Vertical Loop
Seamless vertical carousel of words with smooth looping animation.
Main Features of Vertical Loop
How to Use Vertical Loop in Next.js
Installation Guide for Vertical Loop
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
words | string[] | ["DREAM", "BUILD", "CREATE", "SHIP", "REPEAT"] | Array of words to loop |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textSize | string | text-7xl md:text-9xl | Size of the text |
gradientFrom | string | from-purple-400 | Gradient start color class |
gradientTo | string | to-pink-600 | Gradient end color class |
animationDuration | number | 4 | Animation duration in seconds |
containerHeight | string | h-[1.2em] | Height of the container |
gap | string | pb-4 | Gap between words |
className | string | Additional CSS classes |
Related Components
When to Use
Perfect for hero sections, elevator pitches, and feature summaries in Next.js landing pages. Use this React component to cycle through key value propositions in a compact, energetic way.
Best Practices
Follow React best practices by providing a list of words that are similar in length to avoid sudden layout shifts. Maintain scalable component architecture by using the `animationDuration` to match the reading speed of your target audience. Optimize for performance by reusing the word containers for the loop.
Why This Component Matters in Modern UI Development
Vertical loops are a hallmark of modern productivity SaaS homepages. This reusable React component gives developers a clean way to implement infinite carousels, adding a sense of momentum and authority to your project's messaging.
Frequently Asked Questions
QCan I stop the animation on hover?
Yes, you can easily add a `whileHover` prop from Framer Motion to pause the loop when the user wants to read a specific word.
QHow many words can I include?
The component is optimized for 3-7 words. Too many words can make the loop feel too long or fast.
QDoes it support custom fonts?
Absolutely! The loop inherits all your global typography styles and supports any font-family or weight.