Vertical Marquee

March 28, 2026

Two columns of tweet cards scrolling vertically in opposite directions with a progressive fade at the top and bottom edges.

Installation

File Structure

vertical-marquee-client.tsx

vertical-marquee.tsx

vertical-marquee.types.ts

Usage

import { VerticalMarquee } from "@/components/unlumen-ui/vertical-marquee";

const tweetIds = [
  "1892181693611458734",
  "1886746617457354918",
  "1874122090617197017",
  "1854306627573950703",
];

export default async function Page() {
  return (
    <div className="h-[560px]">
      <VerticalMarquee tweetIds={tweetIds} />
    </div>
  );
}

API Reference

VerticalMarquee

Prop	Type	Default	Description
`tweetIds`	`string[]`	-	Array of tweet IDs to fetch and display in the scrolling columns.
`columns?`	`1 \| 2`	`2`	Number of scrolling columns. Both columns scroll at different speeds and in opposite directions.
`speed?`	`number`	`20`	Duration in seconds for one full scroll loop of the primary column.
`gap?`	`number`	`16`	Vertical gap between tweet cards in pixels. Also used as the horizontal gap between columns.
`blurSize?`	`number`	`120`	Height in pixels of the progressive fade zone at the top and bottom edges.
`pauseOnHover?`	`boolean`	`true`	When true, all columns smoothly decelerate to a stop while the cursor is over the component.
`className?`	`string`	-	Extra classes applied to the root container element.
`tweetClassName?`	`string`	-	Extra classes applied to each tweet card.

Credits

Built by Léo

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.