4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2a99,"use client"; import type { ReactNode } from "react"; import { useRef } from "react"; import { CheckIcon, FilmIcon, ImageIcon, LayoutTemplateIcon, XIcon, } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { STACK_CARD_TOP_BASE, STACK_CARD_TOP_STEP, useStackCardScrollMotion, } from "@/lib/section-scroll"; import { Button, buttonVariants } from "@/components/ui/button"; import { Card, CardContent, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { GridPattern } from "@/components/ui/grid-pattern"; import { cn } from "@/lib/utils"; import { defaultSpring, motionViewport } from "@/lib/motion-tokens"; import { SectionShell, ContentRail } from "@/components/layout-contract"; const STACK_TOP_BASE = STACK_CARD_TOP_BASE; const STACK_TOP_STEP = STACK_CARD_TOP_STEP; type FeatureCard = { title: string; description: string; visual: ReactNode; }; const cards: FeatureCard[] = [ { title: "Pick a template", description: "Browse looping animations and choose the motion that fits your work — preview each style before you commit.", visual: , }, { title: "Drop in your media", description: "Add images or video to every slot, tune aspect ratio and timing, and see updates live in the canvas.", visual: , }, { title: "Export MP4 / WebM", description: "Render frame-exact from 720p up to 8K, straight from the browser — no desktop app required.", visual: , }, ]; function VisualStage({ children }: { children: ReactNode }) { return (

{children}

); } function MockOption({ active, children, className, }: { active?: boolean; children: ReactNode; className?: string; }) { return ( {children} ); } function MockFieldLabel({ children, className, }: { children: ReactNode; className?: string; }) { return (

{children}

); } function MockFieldGroup({ children, inline, label, }: { children: ReactNode; inline?: boolean; label: ReactNode; }) { if (inline) { return (

{label} {children}

); } return (

{label}

{children}

); } function TemplateVisual() { const presets = [ { name: "Showcase Stream", active: true }, { name: "Card Tower", active: false }, { name: "Film Strip", active: false }, { name: "Orbit Carousel", active: false }, ]; return (

3D & Perspective

{presets.map((preset) => (

{preset.name}

))}

{[0, 1, 2, 3].map((index) => ( ))}

); } function MediaVisual() { const ratios = ["16:9", "4:3", "1:1", "4:5", "9:16"]; const slots = ["Slot 1", "Slot 2", "Slot 3"]; return ( Editor

{ratios.map((ratio, index) => ( {ratio} ))}

{slots.map((slot, index) => (

{slot} {index === 0 ? ( ) : ( empty )}

))}

); } function ExportVisual() { const resolutions = ["720p", "1080p", "2K", "4K", "8K"]; return (

Export video

MP4 · H.264 WebM · VP9

{resolutions.map((res, index) => ( {res} ))}

720×720 · 18.0s · 8 Mbps · ~17 MB max

); } function StackCard({ card, index, reduceMotion, }: { card: FeatureCard; index: number; reduceMotion: boolean; }) { const ref = useRef(null); const { y, scale, filter } = useStackCardScrollMotion(ref, reduceMotion); return (

{card.title}

{card.description}

{card.visual}

); } export function FeaturesStackSection() { const reduceMotion = useReducedMotion(); return (

Features

Scroll to stack each step

Sticky cards slide up with scroll and pile at the end — ideal for product tours and flagship workflows.

{cards.map((card, index) => ( ))}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@nusaiba","registryDependencies":["@nusaiba/foundation","button","card","@magicui/grid-pattern"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/features/4/features-stack-section.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]