Vertical Loop
Seamless vertical carousel of words with smooth looping animation.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["DREAM", "BUILD", "CREATE", "SHIP", "REPEAT"] | Array of words to loop through |
| duration | number | 4 | Duration in seconds for each word |
When to Use
Perfect for hero sections, elevator pitches, and feature summaries. Cycle through key value propositions in a compact, energetic way.
Best Practices
Provide words of similar length to avoid sudden layout shifts. Use 3-7 words for the best rhythm.
Why This Component Matters
Vertical loops are a hallmark of modern SaaS homepages, adding momentum and authority to your messaging.
FAQ
QHow many words can I include?
Optimized for 3-7 words. Too many can make the loop feel too slow or fast.
QDoes it support custom fonts?
Yes, it inherits all global typography styles.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.