{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "demo-vertical-marquee",
"title": "Vertical Marquee Demo",
"description": "Two-column vertical tweet marquee scrolling in opposite directions with progressive fade edges.",
"registryDependencies": [
"@unlumen-ui/vertical-marquee"
],
"files": [
{
"path": "registry/demo/components/unlumen/vertical-marquee/index.tsx",
"content": "\"use client\";\n\nimport type { Tweet } from \"react-tweet/api\";\n\nimport {\n VerticalMarqueeClient,\n type TweetItem,\n} from \"@/components/unlumen-ui/vertical-marquee\";\n\nfunction createAvatarDataUri(seed: string, palette: [string, string, string]) {\n const [bg, skin, shirt] = palette;\n const svg = `\n \n `;\n\n return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;\n}\n\nconst makeTweet = ({\n id,\n name,\n handle,\n text,\n photo,\n avatarPalette,\n}: {\n id: string;\n name: string;\n handle: string;\n text: string;\n photo?: string;\n avatarPalette: [string, string, string];\n}): Tweet => ({\n __typename: \"Tweet\",\n lang: \"en\",\n created_at: \"2026-03-20T10:00:00.000Z\",\n display_text_range: [0, text.length],\n entities: {\n hashtags: [],\n urls: [],\n user_mentions: [],\n symbols: [],\n },\n id_str: id,\n text,\n user: {\n id_str: `${id}-user`,\n name,\n profile_image_url_https: createAvatarDataUri(handle, avatarPalette),\n profile_image_shape: \"Circle\",\n screen_name: handle,\n verified: true,\n is_blue_verified: true,\n },\n edit_control: {\n edit_tweet_ids: [id],\n editable_until_msecs: \"0\",\n is_edit_eligible: false,\n edits_remaining: \"0\",\n },\n isEdited: false,\n isStaleEdit: false,\n favorite_count: 0,\n conversation_count: 0,\n news_action_type: \"conversation\",\n photos: photo\n ? [\n {\n backgroundColor: {\n red: 17,\n green: 24,\n blue: 39,\n },\n cropCandidates: [],\n expandedUrl: photo,\n url: photo,\n width: 1200,\n height: 900,\n },\n ]\n : undefined,\n});\n\nconst TWEETS: TweetItem[] = [\n {\n id: \"demo-1\",\n tweet: makeTweet({\n id: \"demo-1\",\n name: \"Elon Musk\",\n handle: \"elonmusk\",\n text: \"Mars is basically a fixer-upper.\",\n avatarPalette: [\"#22d3ee\", \"#2563eb\", \"#0f172a\"],\n }),\n },\n {\n id: \"demo-2\",\n tweet: makeTweet({\n id: \"demo-2\",\n name: \"Ryan Reynolds\",\n handle: \"vancityreynolds\",\n text: \"I meditate by opening one tab and closing seventeen.\",\n avatarPalette: [\"#f97316\", \"#fb7185\", \"#7f1d1d\"],\n }),\n },\n {\n id: \"demo-3\",\n tweet: makeTweet({\n id: \"demo-3\",\n name: \"Zendaya\",\n handle: \"zendaya\",\n text: \"Replying 'on my way' while still choosing socks is a universal experience.\",\n avatarPalette: [\"#ec4899\", \"#f59e0b\", \"#7c2d12\"],\n }),\n },\n {\n id: \"demo-4\",\n tweet: makeTweet({\n id: \"demo-4\",\n name: \"Keanu Reeves\",\n handle: \"keanureeves\",\n text: \"The scariest part of adulthood is how often lunch is a decision.\",\n avatarPalette: [\"#64748b\", \"#94a3b8\", \"#0f172a\"],\n }),\n },\n {\n id: \"demo-5\",\n tweet: makeTweet({\n id: \"demo-5\",\n name: \"Taylor Swift\",\n handle: \"taylorswift13\",\n text: \"I support any plan that starts with coffee and ends with cancellation.\",\n avatarPalette: [\"#a78bfa\", \"#f472b6\", \"#4338ca\"],\n }),\n },\n {\n id: \"demo-6\",\n tweet: makeTweet({\n id: \"demo-6\",\n name: \"Pedro Pascal\",\n handle: \"pascalispunk\",\n text: \"My strongest skill is nodding like I understand the group chat plan.\",\n avatarPalette: [\"#14b8a6\", \"#22c55e\", \"#14532d\"],\n }),\n },\n {\n id: \"demo-7\",\n tweet: makeTweet({\n id: \"demo-7\",\n name: \"Dua Lipa\",\n handle: \"dualipa\",\n text: \"The best productivity hack is pretending the deadline is in 14 minutes.\",\n avatarPalette: [\"#06b6d4\", \"#3b82f6\", \"#1e3a8a\"],\n }),\n },\n {\n id: \"demo-8\",\n tweet: makeTweet({\n id: \"demo-8\",\n name: \"Chris Evans\",\n handle: \"chrisevans\",\n text: \"I opened the fridge four times like the software update might finally be ready.\",\n avatarPalette: [\"#ef4444\", \"#f59e0b\", \"#7c2d12\"],\n }),\n },\n {\n id: \"demo-9\",\n tweet: makeTweet({\n id: \"demo-9\",\n name: \"Ariana Grande\",\n handle: \"arianagrande\",\n text: \"I respect every calendar reminder that starts sounding passive aggressive.\",\n avatarPalette: [\"#f472b6\", \"#c084fc\", \"#6d28d9\"],\n }),\n },\n {\n id: \"demo-10\",\n tweet: makeTweet({\n id: \"demo-10\",\n name: \"LeBron James\",\n handle: \"kingjames\",\n text: \"Hydration, discipline, and accidentally liking a message from 2019.\",\n avatarPalette: [\"#f59e0b\", \"#f97316\", \"#7f1d1d\"],\n }),\n },\n {\n id: \"demo-11\",\n tweet: makeTweet({\n id: \"demo-11\",\n name: \"Billie Eilish\",\n handle: \"billieeilish\",\n text: \"If I say 'quick call' I am lying to both of us.\",\n avatarPalette: [\"#84cc16\", \"#22c55e\", \"#14532d\"],\n }),\n },\n {\n id: \"demo-12\",\n tweet: makeTweet({\n id: \"demo-12\",\n name: \"Robert Downey Jr.\",\n handle: \"robertdowneyjr\",\n text: \"Confidence is just re-opening the same app and hoping this time it behaves.\",\n avatarPalette: [\"#38bdf8\", \"#818cf8\", \"#312e81\"],\n }),\n },\n];\n\ninterface VerticalMarqueeDemoProps {\n speed?: number;\n gap?: number;\n blurSize?: number;\n pauseOnHover?: boolean;\n}\n\nexport const VerticalMarqueeDemo = ({\n speed = 20,\n gap = 16,\n blurSize = 120,\n pauseOnHover = true,\n}: VerticalMarqueeDemoProps) => {\n return (\n \n \n
\n );\n};\n\nexport default VerticalMarqueeDemo;\n",
"type": "registry:example"
}
],
"meta": {
"demoProps": {
"VerticalMarqueeDemo": {}
}
},
"type": "registry:example"
}