Vertical Marquee

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

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

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.