Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
word-cycle-reveal-demo
Rooms Made
Around
The Light
Stone, Lime and Shade
Halverne
Houses
000
Practice Since 2008
import { WordCycleReveal } from "@/registry/tween/word-cycle-reveal"
export function WordCycleRevealDemo() {
return <WordCycleReveal />
}
Installation
Usage
import { WordCycleReveal } from "@/components/ui/word-cycle-reveal"<WordCycleReveal
brand="Halverne"
words={["Houses", "Gardens", "Courts", "Shelter", "Studio"]}
lines={["Rooms Made", "Around", "The Light"]}
images={[
"https://images.unsplash.com/photo-1599950278531-911e86d1467a?q=80&w=2400&h=1350&fit=crop&crop=center&auto=format",
"https://images.unsplash.com/photo-1582934802734-7f704eee2fcc?q=80&w=2400&h=1350&fit=crop&crop=center&auto=format",
"https://images.unsplash.com/photo-1743510928991-49e119554d80?q=80&w=2400&h=1350&fit=crop&crop=center&auto=format",
]}
/>How it works:
- For
durationseconds, three linear tweens run side by side: the counter counts from000to100, the second loader line steps throughwords, and the frame cycles throughimagesthree times. Meanwhile the image frame slides from the left padding back to its place beside the second headline line. - The loader text fades and the loader collapses to the top with a
clip-pathpolygon on a customhopease. - The headline words slide in through masks (the middle line from the right, the others from the left), then the frame is pinned at its current box and grows to cover the whole container behind the
mix-blend-mode: differencetext.
All measurements come from the container, so it works inside a preview or any section. The Replay button remounts the stage. With prefers-reduced-motion: reduce the loader is skipped and the last image fills the background.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 6 images | Images cycled in the frame. |
brand | string | "Halverne" | First loader line and nav label. |
words | string[] | 5 words | Words cycled on the second loader line. |
lines | [string, string, string] | ["Rooms Made","Around","The Light"] | Hero headline rows. |
preloaderNote | string | "Practice Since 2008" | Bottom-right loader text. |
footer | string | "Stone, Lime and Shade" | Hero footer line. |
menuLabel | string | "Menu" | Nav right label. |
duration | number | 3 | Seconds the counter takes to reach 100. |
background | string | "#f3eee6" | Page background. |
loaderBackground | string | "#2b241f" | Loader background. |
showReplay | boolean | true | Show the replay button. |
className | string | — | Extra classes on the outer container. |