51: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"] 52: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"] 53:T25ab,"use client"; import { cn } from "@/lib/utils"; import { motion, useMotionTemplate, useReducedMotion, useScroll, useSpring, useTransform, type MotionValue, } from "framer-motion"; import { useRef } from "react"; export interface CaseStudyFlipItem { number?: string; eyebrow: string; title: string; description: string; image: string; imageAlt: string; background: string; foreground?: string; } interface CaseStudyFlipStackProps { items?: CaseStudyFlipItem[]; className?: string; hint?: string; heading?: string; endLabel?: string; } const DEFAULT_ITEMS: CaseStudyFlipItem[] = [ { eyebrow: "Fintech", title: "Boosted conversion by 42% with a product-led redesign", description: "We restructured the onboarding flow and clarified the value proposition, helping the platform turn more visitors into activated users.", image: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=1400&q=90&auto=format&fit=crop", imageAlt: "Portrait framed by tropical greenery", background: "#a94808", foreground: "#fff7ed", }, { eyebrow: "Hospitality", title: "A slower digital experience for a faster-growing retreat", description: "A cinematic booking journey brings the landscape forward, simplifies room selection, and gives every stay a stronger sense of place.", image: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1400&q=90&auto=format&fit=crop", imageAlt: "A person overlooking a mountain landscape", background: "#067b8f", foreground: "#ecfeff", }, { eyebrow: "Culture", title: "Turning a living archive into something you can wander through", description: "We paired bold editorial typography with an intuitive collection system, making decades of work feel immediate, playful, and alive.", image: "https://images.unsplash.com/photo-1561214115-f2f134cc4912?w=1400&q=90&auto=format&fit=crop", imageAlt: "Colorful artwork in a contemporary gallery", background: "#ba075f", foreground: "#fff1f7", }, { eyebrow: "Climate", title: "Making complex energy data feel clear enough to act on", description: "An approachable visual system turns live infrastructure data into useful decisions for operators, partners, and the communities they serve.", image: "https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?w=1400&q=90&auto=format&fit=crop", imageAlt: "Wind turbines across a green landscape", background: "#3322a8", foreground: "#f3f1ff", }, ]; function FlipCard({ item, index, total, progress, reduceMotion, }: { item: CaseStudyFlipItem; index: number; total: number; progress: MotionValue; reduceMotion: boolean; }) { const segment = 1 / Math.max(total, 1); const start = index * segment; const end = Math.min(start + segment, 1); const entryStart = Math.max(0, start - segment); const entryEnd = index === 0 ? 0.0001 : Math.min(start, entryStart + segment * 0.7); const exitStart = start; const exitEnd = end; const stackedCardGap = Math.min(24, 72 / Math.max(total - 1, 1)); const stackedOffset = index * stackedCardGap; const restingOffset = Math.min(index * 12, 34); const restingScale = 1 - Math.min(index * 0.012, 0.035); const exitYPercent = useTransform( progress, [exitStart, exitEnd], reduceMotion ? [0, 0] : [0, -118], ); const exitStackOffset = useTransform( progress, [exitStart, exitEnd], reduceMotion ? [0, 0] : [0, stackedOffset], ); const exitY = useMotionTemplate`calc(${exitYPercent}% + ${exitStackOffset}px)`; const rotateX = useTransform( progress, [exitStart, exitEnd], reduceMotion ? [0, 0] : [0, 22], ); const opacity = useTransform( progress, [exitStart, exitEnd], reduceMotion ? [1, 0] : [1, 1], ); const entryScale = useTransform( progress, [entryStart, entryEnd], index === 0 ? [1, 1] : [restingScale, 1], ); const entryY = useTransform( progress, [entryStart, entryEnd], index === 0 ? [0, 0] : [restingOffset, 0], ); return (

{item.number ?? String(index + 1).padStart(2, "0")}

{item.eyebrow}

{item.title}

{item.description}

); } export function CaseStudyFlipStack({ items = DEFAULT_ITEMS, className, hint = "Scroll Down", heading = "Design That Delivers.", endLabel = "The End", }: CaseStudyFlipStackProps) { const stackRef = useRef(null); const reduceMotion = useReducedMotion() ?? false; const safeItems = items.length > 0 ? items : DEFAULT_ITEMS; const { scrollYProgress } = useScroll({ target: stackRef, offset: ["start start", "end end"], }); const smoothProgress = useSpring(scrollYProgress, { stiffness: 120, damping: 22, mass: 0.8, restDelta: 0.0005, }); const cardProgress = reduceMotion ? scrollYProgress : smoothProgress; return (

{hint}

{heading}

{[...safeItems].reverse().map((item, reverseIndex) => { const index = safeItems.length - reverseIndex - 1; return ( ); })}

{endLabel}

); } 50:["$","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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@componentry","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/case-study-flip-stack.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]