{"loaderData":{"0":null,"component":{"source":{"state":"ready","data":{"code":"import { useRef } from 'react';\nimport { motion, useScroll, useTransform, useReducedMotion } from 'motion/react';\nimport './ScrollStack.css';\n\nconst join = (...classes) => classes.filter(Boolean).join(' ');\n\nconst DEFAULT_ITEMS = [\n { title: 'Capture', description: 'Drop any idea in and keep moving — sorting can wait.', accent: '#5227FF' },\n { title: 'Organize', description: 'Group related thoughts so the shape of the work appears.', accent: '#0EA5E9' },\n { title: 'Refine', description: 'Trim the noise until only the decisions remain.', accent: '#10B981' },\n { title: 'Ship', description: 'Hand it off with everything it needs to stand on its own.', accent: '#F59E0B' },\n { title: 'Reflect', description: 'Look back at what worked and feed it into the next pass.', accent: '#EF4444' }\n];\n\n// One pinned card. It sticks at `pinTop` and, as the scroll travels past its pin\n// point, shrinks toward a depth-based scale and dims — so cards landing on top\n// read as a physical stack. Scale/opacity derive from the shared container scroll\n// via motion's useTransform; reduced-motion users get a plain static stack.\nfunction StackCard({ index, total, item, scrollY, peek, gap, cardHeight, scaleStep, minScale, dim, reduce }) {\n const stride = cardHeight + gap;\n const pinTop = peek * index;\n const pinStart = index * stride - pinTop;\n const range = stride * 2.5;\n const depthScale = Math.max(minScale, 1 - scaleStep * (total - 1 - index) * 2);\n\n const scale = useTransform(scrollY, [pinStart, pinStart + range], [1, depthScale], { clamp: true });\n const opacity = useTransform(scrollY, [pinStart, pinStart + range], [1, 1 - dim], { clamp: true });\n\n return (\n \n {String(index + 1).padStart(2, '0')}\n

{item.title}

\n {item.description != null &&

{item.description}

}\n

\n \n );\n}\n\n// A self-contained scrolling column of cards that pin and stack as they reach the\n// top. Inspired by the sticky \"stacking cards\" scroll interaction catalogued on\n// designspells (Apple-style pinned card stacks). Each card peeks below the one\n// above by `peek` pixels; deeper cards scale down so the stack reads with depth.\nexport default function ScrollStack({\n items = DEFAULT_ITEMS,\n peek = 22,\n gap = 18,\n cardHeight = 190,\n scaleStep = 0.04,\n minScale = 0.82,\n dim = 0.35,\n height = 460,\n className = '',\n ...rest\n}) {\n const ref = useRef(null);\n const reduce = !!useReducedMotion();\n const { scrollY } = useScroll({ container: ref });\n const total = items.length;\n const tailSpace = Math.max(cardHeight, height - peek * Math.max(0, total - 1));\n\n return (\n

\n {items.map((item, i) => (\n \n ))}\n

\n );\n}\n","css":".scroll-stack {\n position: relative;\n width: 100%;\n max-width: 540px;\n margin: 0 auto;\n overflow-y: auto;\n overflow-x: hidden;\n border-radius: 18px;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n}\n\n.scroll-stack::-webkit-scrollbar {\n display: none;\n}\n\n.scroll-stack-track {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: 0 4px;\n}\n\n.scroll-stack-card {\n position: sticky;\n display: flex;\n align-items: flex-start;\n gap: 18px;\n box-sizing: border-box;\n padding: 24px 26px;\n margin-bottom: 18px;\n border-radius: 16px;\n background: color-mix(in srgb, var(--scroll-stack-accent, #5227ff) 68%, transparent);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n color: #fff;\n transform-origin: 50% 0%;\n box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.65);\n will-change: transform, opacity;\n}\n\n.scroll-stack-index {\n flex: 0 0 auto;\n font-size: 13px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n letter-spacing: -0.01em;\n padding: 4px 10px;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.16);\n color: rgba(255, 255, 255, 0.92);\n}\n\n.scroll-stack-body {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n\n.scroll-stack-title {\n margin: 0;\n font-size: 22px;\n font-weight: 600;\n line-height: 1.15;\n letter-spacing: -0.02em;\n}\n\n.scroll-stack-desc {\n margin: 0;\n font-size: 14px;\n line-height: 1.5;\n color: rgba(255, 255, 255, 0.82);\n}\n\n.scroll-stack-tail {\n flex: 0 0 auto;\n}\n","tailwind":"import { useRef } from 'react';\nimport { motion, useScroll, useTransform, useReducedMotion } from 'motion/react';\n\nconst join = (...classes) => classes.filter(Boolean).join(' ');\n\nconst DEFAULT_ITEMS = [\n { title: 'Capture', description: 'Drop any idea in and keep moving — sorting can wait.', accent: '#5227FF' },\n { title: 'Organize', description: 'Group related thoughts so the shape of the work appears.', accent: '#0EA5E9' },\n { title: 'Refine', description: 'Trim the noise until only the decisions remain.', accent: '#10B981' },\n { title: 'Ship', description: 'Hand it off with everything it needs to stand on its own.', accent: '#F59E0B' },\n { title: 'Reflect', description: 'Look back at what worked and feed it into the next pass.', accent: '#EF4444' }\n];\n\nfunction StackCard({ index, total, item, scrollY, peek, gap, cardHeight, scaleStep, minScale, dim, reduce }) {\n const stride = cardHeight + gap;\n const pinTop = peek * index;\n const pinStart = index * stride - pinTop;\n const range = stride * 2.5;\n const depthScale = Math.max(minScale, 1 - scaleStep * (total - 1 - index) * 2);\n\n const scale = useTransform(scrollY, [pinStart, pinStart + range], [1, depthScale], { clamp: true });\n const opacity = useTransform(scrollY, [pinStart, pinStart + range], [1, 1 - dim], { clamp: true });\n\n return (\n \n \n {String(index + 1).padStart(2, '0')}\n \n

{item.title}

\n {item.description != null &&

{item.description}

}\n

\n \n );\n}\n\nexport default function ScrollStack({\n items = DEFAULT_ITEMS,\n peek = 22,\n gap = 18,\n cardHeight = 190,\n scaleStep = 0.04,\n minScale = 0.82,\n dim = 0.35,\n height = 460,\n className = '',\n ...rest\n}) {\n const ref = useRef(null);\n const reduce = !!useReducedMotion();\n const { scrollY } = useScroll({ container: ref });\n const total = items.length;\n const tailSpace = Math.max(cardHeight, height - peek * Math.max(0, total - 1));\n\n return (\n \n

\n {items.map((item, i) => (\n \n ))}\n

\n );\n}\n","tsCode":"import { useRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { motion, useScroll, useTransform, useReducedMotion, type MotionValue } from 'motion/react';\nimport './ScrollStack.css';\n\nconst join = (...classes: Array) => classes.filter(Boolean).join(' ');\n\nexport interface ScrollStackItem {\n title: string;\n description?: string;\n accent: string;\n}\n\nexport interface ScrollStackProps extends Omit, 'children'> {\n items?: ScrollStackItem[];\n peek?: number;\n gap?: number;\n cardHeight?: number;\n scaleStep?: number;\n minScale?: number;\n dim?: number;\n height?: number;\n className?: string;\n}\n\nconst DEFAULT_ITEMS: ScrollStackItem[] = [\n { title: 'Capture', description: 'Drop any idea in and keep moving — sorting can wait.', accent: '#5227FF' },\n { title: 'Organize', description: 'Group related thoughts so the shape of the work appears.', accent: '#0EA5E9' },\n { title: 'Refine', description: 'Trim the noise until only the decisions remain.', accent: '#10B981' },\n { title: 'Ship', description: 'Hand it off with everything it needs to stand on its own.', accent: '#F59E0B' },\n { title: 'Reflect', description: 'Look back at what worked and feed it into the next pass.', accent: '#EF4444' }\n];\n\ninterface StackCardProps {\n index: number;\n total: number;\n item: ScrollStackItem;\n scrollY: MotionValue;\n peek: number;\n gap: number;\n cardHeight: number;\n scaleStep: number;\n minScale: number;\n dim: number;\n reduce: boolean;\n}\n\n// One pinned card. It sticks at `pinTop` and, as the scroll travels past its pin\n// point, shrinks toward a depth-based scale and dims — so cards landing on top\n// read as a physical stack. Scale/opacity derive from the shared container scroll\n// via motion's useTransform; reduced-motion users get a plain static stack.\nfunction StackCard({ index, total, item, scrollY, peek, gap, cardHeight, scaleStep, minScale, dim, reduce }: StackCardProps) {\n const stride = cardHeight + gap;\n const pinTop = peek * index;\n const pinStart = index * stride - pinTop;\n const range = stride * 2.5;\n const depthScale = Math.max(minScale, 1 - scaleStep * (total - 1 - index) * 2);\n\n const scale = useTransform(scrollY, [pinStart, pinStart + range], [1, depthScale], { clamp: true });\n const opacity = useTransform(scrollY, [pinStart, pinStart + range], [1, 1 - dim], { clamp: true });\n\n return (\n \n {String(index + 1).padStart(2, '0')}\n

{item.title}

\n {item.description != null &&

{item.description}

}\n

\n \n );\n}\n\n// A self-contained scrolling column of cards that pin and stack as they reach the\n// top. Inspired by the sticky \"stacking cards\" scroll interaction catalogued on\n// designspells (Apple-style pinned card stacks). Each card peeks below the one\n// above by `peek` pixels; deeper cards scale down so the stack reads with depth.\nexport default function ScrollStack({\n items = DEFAULT_ITEMS,\n peek = 22,\n gap = 18,\n cardHeight = 190,\n scaleStep = 0.04,\n minScale = 0.82,\n dim = 0.35,\n height = 460,\n className = '',\n ...rest\n}: ScrollStackProps) {\n const ref = useRef(null);\n const reduce = !!useReducedMotion();\n const { scrollY } = useScroll({ container: ref });\n const total = items.length;\n const tailSpace = Math.max(cardHeight, height - peek * Math.max(0, total - 1));\n\n return (\n

\n {items.map((item, i) => (\n \n ))}\n

\n );\n}\n","tsTailwind":"import { useRef, type HTMLAttributes } from 'react';\nimport { motion, useScroll, useTransform, useReducedMotion, type MotionValue } from 'motion/react';\n\nconst join = (...classes: Array) => classes.filter(Boolean).join(' ');\n\nexport interface ScrollStackItem {\n title: string;\n description?: string;\n accent: string;\n}\n\nexport interface ScrollStackProps extends Omit, 'children'> {\n items?: ScrollStackItem[];\n peek?: number;\n gap?: number;\n cardHeight?: number;\n scaleStep?: number;\n minScale?: number;\n dim?: number;\n height?: number;\n className?: string;\n}\n\nconst DEFAULT_ITEMS: ScrollStackItem[] = [\n { title: 'Capture', description: 'Drop any idea in and keep moving — sorting can wait.', accent: '#5227FF' },\n { title: 'Organize', description: 'Group related thoughts so the shape of the work appears.', accent: '#0EA5E9' },\n { title: 'Refine', description: 'Trim the noise until only the decisions remain.', accent: '#10B981' },\n { title: 'Ship', description: 'Hand it off with everything it needs to stand on its own.', accent: '#F59E0B' },\n { title: 'Reflect', description: 'Look back at what worked and feed it into the next pass.', accent: '#EF4444' }\n];\n\ninterface StackCardProps {\n index: number;\n total: number;\n item: ScrollStackItem;\n scrollY: MotionValue;\n peek: number;\n gap: number;\n cardHeight: number;\n scaleStep: number;\n minScale: number;\n dim: number;\n reduce: boolean;\n}\n\nfunction StackCard({ index, total, item, scrollY, peek, gap, cardHeight, scaleStep, minScale, dim, reduce }: StackCardProps) {\n const stride = cardHeight + gap;\n const pinTop = peek * index;\n const pinStart = index * stride - pinTop;\n const range = stride * 2.5;\n const depthScale = Math.max(minScale, 1 - scaleStep * (total - 1 - index) * 2);\n\n const scale = useTransform(scrollY, [pinStart, pinStart + range], [1, depthScale], { clamp: true });\n const opacity = useTransform(scrollY, [pinStart, pinStart + range], [1, 1 - dim], { clamp: true });\n\n return (\n \n \n {String(index + 1).padStart(2, '0')}\n \n

{item.title}

\n {item.description != null &&

{item.description}

}\n

\n \n );\n}\n\nexport default function ScrollStack({\n items = DEFAULT_ITEMS,\n peek = 22,\n gap = 18,\n cardHeight = 190,\n scaleStep = 0.04,\n minScale = 0.82,\n dim = 0.35,\n height = 460,\n className = '',\n ...rest\n}: ScrollStackProps) {\n const ref = useRef(null);\n const reduce = !!useReducedMotion();\n const { scrollY } = useScroll({ container: ref });\n const total = items.length;\n const tailSpace = Math.max(cardHeight, height - peek * Math.max(0, total - 1));\n\n return (\n \n

\n {items.map((item, i) => (\n \n ))}\n

\n );\n}\n"},"componentId":"scroll-stack"}}},"actionData":null,"errors":null}

Scroll Stack

Capture

Organize

Refine

Ship

Reflect