Quote cycle
Lines that pop up, hold, then shrink away as the next one drops in.
Behaviour
- The current line pops up to its full size and holds, then shrinks up and away while the next drops in from 1.25x. The held size is the layout size, so set the font size for it and nothing spills past the box.
- Driven by index (a click), the swap is quick: the old line leaves in 200ms and the new one overlaps it, readable in about 350ms.
- Every line shares one grid cell, so the box keeps the height of the tallest line and nothing below moves.
- Pauses on hover, on keyboard focus inside it and while off screen.
- Hidden lines are inert; the live region stays off unless announce is set.
- Reduced motion: the lines cross-fade in place.
Props
| Prop | Type | Description |
|---|---|---|
| lines | ReactNode[] | The lines to cycle through, in order: strings or inline content. |
| index | number | Show this line and stop the timer, so you advance it yourself (a click, a key, a step). |
| interval | numberdefault 3.5 | Seconds from one line arriving to the next. |
| announce | booleandefault false | Read each new line to screen readers (a polite live region). |
| className | string | Size, colour and width of the text. |
Installation
npx shadcn@latest add https://purrfectui.com/r/quote-cycle.jsonHow to use
import { QuoteCycle } from "@/components/ui/quote-cycle";
<QuoteCycle lines={["Make it simple, but significant.", "Design is thinking made visual."]} />Source code
Loading…
Credits
Ported from vaibhavtomar.com.
License
MIT. Copy it into your project and change it as you like.