Animated Select Headline

A cycling word headline where each active word is highlighted with a Figma-style selection rectangle — thin border with corner handles — using blur-fade transitions.

Motion Effectsspringheadlinetextanimationcyclingselectionframer-motionheroblur

Animated Select Headline

Build amazing websites at warp speed

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

prefix

Static text displayed before the animated word

suffix

Optional static text displayed after the animated word

interval

Milliseconds between each word transition

headingClassName

Additional classes applied to the h2 heading element

Generated JSX

Copy this into your page.

<useState
  prefix="Build amazing websites at"
  suffix=""
  interval={2500}
  headingClassName=""
/>

Animation effects

spring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation