import React from "react"; import { StaggeredMotion, useViewportRect } from "remotion-bits"; export const metadata = { name: "List Reveal", description: "A vertical list of items scaling and finding their place.", tags: ["list", "motion", "staggered-motion", "ui"], duration: 90, width: 1080, height: 1080, registry: { name: "bit-list-reveal", title: "List Reveal", description: "A vertical list of items scaling and finding their place.", type: "bit" as const, add: "when-needed" as const, registryDependencies: ["staggered-motion"], dependencies: [], files: [ { path: "docs/src/bits/examples/staggered-motion/ListReveal.tsx", }, ], }, }; export const Component: React.FC = () => { const { width } = useViewportRect(); const items = [ { title: "Dashboard", icon: "📊" }, { title: "Analytics", icon: "📈" }, { title: "Settings", icon: "⚙️" }, { title: "Profile", icon: "👤" }, { title: "Messages", icon: "💬" }, { title: "Notifications", icon: "🔔" }, ]; const itemWidth = Math.min(width * 0.8, 600); const itemHeight = 80; return (

{items.map((item, i) => (

{item.icon}

{item.title}

))}

); };

List Reveal

Install