Alice
@alice
Bob
@bob
Charlie
@charlie
Diana
@diana
Ethan
@ethan
Fiona
@fiona
George
@george
Alice
@alice
Bob
@bob
Charlie
@charlie
Diana
@diana
Ethan
@ethan
Fiona
@fiona
George
@george
Alice
@alice
Bob
@bob
Charlie
@charlie
Diana
@diana
Ethan
@ethan
Fiona
@fiona
George
@george
Alice
@alice
Bob
@bob
Charlie
@charlie
Diana
@diana
Ethan
@ethan
Fiona
@fiona
George
@george
Community Driven
Join thousands of developers worldwide.
Installation
npx kinetic-ui-cli@latest add vertical-tickerUsage
import { VerticalTickerWall, VerticalTickerColumn } from "@/components/creative/vertical-ticker";
export default function Page() {
return (
<div className="h-[600px] overflow-hidden">
<VerticalTickerWall className="rotate-[-5deg] scale-110">
{/* Column 1 (Scrolls UP at speed 2) */}
<VerticalTickerColumn speed={2} direction={-1}>
<div className="h-40 bg-zinc-900 mb-4 rounded-xl" />
<div className="h-40 bg-zinc-900 mb-4 rounded-xl" />
</VerticalTickerColumn>
{/* Column 2 (Scrolls DOWN at speed 1.5) */}
<VerticalTickerColumn speed={1.5} direction={1}>
<div className="h-40 bg-zinc-900 mb-4 rounded-xl" />
<div className="h-40 bg-zinc-900 mb-4 rounded-xl" />
</VerticalTickerColumn>
</VerticalTickerWall>
</div>
);
}
How it works
The VerticalTickerWall acts as a Flexbox container for multiple VerticalTickerColumn components.
Each column utilizes an independent Framer Motion useAnimationFrame loop to translate its items vertically.
To achieve an infinite loop without cloning DOM nodes arbitrarily, the columns expect you to duplicate your item list at least once (i.e. {items}{items}). The loop maps the Y translation precisely from 0% to -50%. As soon as it hits -50%, it seamlessly snaps back to 0%.
[!TIP] This component pairs incredibly well with CSS
mix-blend-mode: screenand-5degrotation for a modern hero section background.
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { VerticalTicker } from "@/components/creative/vertical-ticker";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { VerticalTicker } from "@/components/creative/vertical-ticker";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<VerticalTicker
>
<div>Content goes here</div>
</VerticalTicker>
</div>
);
}