CTA Band

A dark full-width call-to-action band with drifting accent orbs and a magnetic button.

Ship something alive.

Build a closing CTA band for a landing page. Structure: a full-width dark ink band with generous padding, a big centered headline (one word emphasized in the accent color), and a single accent pill button with an arrow icon. Atmosphere: two large blurred accent orbs drift slowly behind the text - radial gradients (accent at ~50% opacity fading to transparent), blur ~18px, each moving on its own gentle x/y loop (9-11s, easeInOut, offset phases so they never sync). They should feel like embers under glass, never distracting from the text. Magnetic button: within a ~90px radius, the button leans toward the cursor at about 28% of the distance, on a spring (stiffness ~220, damping ~16); it snaps back to center when the cursor leaves. Press scales to 0.93. The arrow nudges 3px right on hover. Accessibility: the orbs are aria-hidden; under prefers-reduced-motion the orbs hold still and the button doesn't chase the cursor. Colors as tokens: ink band, paper text, one accent. The headline does the talking - keep the copy to one short line and one verb on the button. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data