50: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"] 51: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"] 52:T1d9c,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; import { PlayheadReel, type PlayheadReelGroup } from "@/components/ui/playhead-reel"; const photo = (id: string, aspect: number) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${Math.round(560 * aspect)}&h=560&q=65`; const shot = (id: string, aspect: number, alt: string) => ({ src: photo(id, aspect), aspect, alt }); type Project = PlayheadReelGroup & { name: string; discipline: string; year: number }; const projects: Project[] = [ { label: "Halden", name: "Halden House", discipline: "Architecture", year: 2025, items: [ shot("1600585154340-be6161a56a0c", 4 / 3, "Halden House at dusk"), shot("1600566753190-17f0baa2a6c3", 4 / 3, "Street facade in timber and render"), shot("1600585154526-990dced4db0d", 3 / 4, "Slatted screen over the stair"), shot("1600607687939-ce8a6c25118c", 3 / 2, "Open living room"), shot("1600607687644-c7171b42498f", 4 / 3, "Main bedroom"), shot("1600573472550-8090b5e0745e", 3 / 4, "Stair down to the pool"), ], }, { label: "Maison Vert", name: "Maison Vert", discipline: "Interiors", year: 2024, items: [ shot("1618221195710-dd6b41faaea6", 3 / 2, "Long living room with clerestory"), shot("1586023492125-27b2c045efd7", 3 / 4, "Yellow lounge chair"), shot("1618219908412-a29a1bb7b86e", 4 / 3, "Hallway with round mirror"), shot("1615529182904-14819c35db37", 4 / 3, "Snug with rattan pendants"), shot("1616486338812-3dadae4b4ace", 3 / 2, "Sitting room"), shot("1524758631624-e2822e304c36", 4 / 3, "Studio lounge"), ], }, { label: "Objet", name: "Objet", discipline: "Product photography", year: 2024, items: [ shot("1503602642458-232111445657", 3 / 4, "Birch stool"), shot("1592078615290-033ee584e267", 3 / 4, "Black shell chair"), shot("1567538096630-e0c55bd6374c", 1, "Tufted armchair"), shot("1555041469-a586c61ea9bc", 3 / 2, "Green velvet sofa"), shot("1544816155-12df9643f363", 3 / 4, "Canvas tote"), shot("1523275335684-37898b6baf30", 4 / 3, "White watch"), shot("1505740420928-5e560c06d30e", 1, "Headphones on yellow"), ], }, { label: "Lumen", name: "Lumen", discipline: "Motion identity", year: 2023, items: [ shot("1618005182384-a83a8bd57fbe", 3 / 2, "Violet wave"), shot("1620641788421-7a1c342ea42e", 4 / 3, "Glow on indigo"), shot("1617791160505-6f00504e3519", 3 / 4, "Folded ribbon"), shot("1634017839464-5c339ebe3cb4", 4 / 3, "Blue lines"), shot("1557672172-298e090bd0f1", 1, "Liquid marble"), shot("1579546929518-9e396f3cc809", 3 / 2, "Soft gradient"), shot("1604076913837-52ab5629fba9", 3 / 4, "Light leak"), ], }, { label: "Corte", name: "Corte", discipline: "Restaurant identity", year: 2023, items: [ shot("1517248135467-4c7edcad34c4", 3 / 2, "Dining room"), shot("1414235077428-338989a2e8c0", 4 / 3, "Dinner service"), shot("1540189549336-e6e99c3679fe", 1, "Salad from above"), shot("1504674900247-0877df9cc836", 4 / 3, "Plates for the table"), shot("1511920170033-f8396924c348", 3 / 4, "Espresso"), shot("1565299624946-b28f40a0ae38", 1, "Pizza from the oven"), ], }, { label: "Parcel", name: "Parcel", discipline: "Product design", year: 2022, items: [ shot("1460925895917-afdab827c52f", 3 / 2, "Analytics dashboard"), shot("1609921212029-bb5a28e60960", 4 / 3, "App screens on a desktop"), shot("1558655146-d09347e92766", 4 / 3, "Component library"), shot("1586953208448-b95a79798f07", 3 / 4, "Mobile app"), shot("1586717791821-3f44a563fa4c", 4 / 3, "Sketching flows"), shot("1572044162444-ad60f128bdea", 3 / 2, "Choosing colors"), ], }, ]; const pad = (n: number) => String(n).padStart(2, "0"); const slug = (name: string) => name.toLowerCase().replace(/\s+/g, "-"); export function PlayheadReelDemo() { const scrollRef = React.useRef(null); const [view, setView] = React.useState({ group: 0, direction: 1 }); const project = projects[view.group]; return (

setView((prev) => prev.group === group ? prev : { group, direction: group > prev.group ? 1 : -1 }, ) } header={

Selected work · {pad(view.group + 1)} / {pad(projects.length)}

{project.name}

{project.discipline} · {project.year}

View case study →

} />

); } /** Rolls its content out and the next one in, up when moving forward and down when going back. */ function Roll({ id, direction, className, children, }: { id: number; direction: number; className?: string; children: React.ReactNode; }) { const reduceMotion = useReducedMotion(); return (

(reduceMotion ? { opacity: 0 } : { y: `${d * 100}%` }), center: { y: 0, opacity: 1 }, exit: (d: number) => (reduceMotion ? { opacity: 0 } : { y: `${d * -100}%` }), }} initial="enter" animate="center" exit="exit" transition={{ duration: reduceMotion ? 0.2 : 0.5, ease: [0.23, 1, 0.32, 1] }} > {children}

); } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@keyframeui","registryDependencies":["https://keyframeui.com/r/playhead-reel.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/demos/playhead-reel-demo.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]