{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "design-components-folder", "title": "Design Components Folder", "author": "AlgorizeTech", "description": "An animated folder that opens to fan out component preview cards. Use it on portfolio and feature pages to reveal a collection on interaction.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "src/components/custom/blocks/DesignComponentsFolder.tsx", "content": "\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport {\n ArrowRight,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { springLinear } from \"./motion-curves\";\n\n// Springs, drawn as CSS `linear()` curves: the fan-out, the retract into the\n// folder, and the lift under the pointer (the move and the scale).\nconst FAN_OUT = springLinear({ stiffness: 90, damping: 14 });\nconst RETRACT = springLinear({ stiffness: 110, damping: 15 });\nconst HOVER_MOVE = springLinear({ stiffness: 500, damping: 25 });\nconst HOVER_SCALE = springLinear({ stiffness: 550, damping: 30 });\nconst HOVER_LAYER = \"0.3s cubic-bezier(0.25, 0.1, 0.35, 1)\";\nconst timing = (spring: { duration: number; easing: string }, delay = 0) =>\n `${spring.duration}ms ${spring.easing}${delay ? ` ${delay}s` : \"\"}`;\n\n/** Where a card starts (tucked in the folder), where it fans out to, and how it lifts. */\ninterface FanCard {\n initX: number;\n initY: number;\n rotate: number;\n delay: number;\n zIndex: number;\n hoverScale: number;\n hoverRotate: number;\n}\n\n// Folder silhouette in the 660×310 viewBox: tab on the left, body below.\nconst FOLDER_PATH = `\n M -8 8\n C -8 3, -3 0, 8 0\n L 330 0\n C 347 0, 360 25, 372 45\n C 380 58, 392 68, 408 68\n L 638 68\n C 644 68, 648 72, 648 80\n L 620 302\n C 620 307, 616 310, 610 310\n L 30 310\n C 24 310, 20 307, 20 302\n Z\n`;\n\nexport interface DesignComponentsFolderProps {\n color?: string;\n className?: string;\n disableLinks?: boolean;\n /**\n * The element used for links. Defaults to a plain `a`, so this component works\n * in any React app with no adaptation. In Next.js, pass `next/link` to keep\n * client-side navigation and prefetching: `linkComponent={Link}`.\n */\n linkComponent?: React.ElementType;\n}\n\nexport function DesignComponentsFolder({\n color,\n className,\n disableLinks = false,\n linkComponent: Link = \"a\",\n}: DesignComponentsFolderProps) {\n const [isInView, setIsInView] = useState(false);\n const [retractedIndex, setRetractedIndex] = useState(null);\n\n const getAccentColor = (col?: string) => {\n if (!col || col === \"primary\" || col === \"default\") return undefined;\n const presets: Record = {\n indigo: \"#6366f1\",\n rose: \"#f43f5e\",\n emerald: \"#10b981\",\n zinc: \"#18181b\",\n };\n return presets[col] || col;\n };\n\n const resolvedColor = getAccentColor(color);\n const customStyle: React.CSSProperties = resolvedColor\n ? ({ \"--primary\": resolvedColor } as React.CSSProperties)\n : {};\n\n // The retract loop runs only while the folder is on screen: off screen it\n // would keep re-rendering every card for nothing. It picks up at the next\n // card when the reader scrolls back.\n const [onScreen, setOnScreen] = useState(false);\n const nextCardRef = React.useRef(0);\n\n useEffect(() => {\n if (!isInView || !onScreen) return;\n\n let interval = 0;\n let bringBack = 0;\n // Start auto loop 2 seconds after the entrance fan-out (or the return).\n const startTimer = window.setTimeout(() => {\n interval = window.setInterval(() => {\n // Retract card into folder\n setRetractedIndex(nextCardRef.current);\n\n // Bring card back out to visible state after 900ms\n bringBack = window.setTimeout(() => {\n setRetractedIndex(null);\n nextCardRef.current = (nextCardRef.current + 1) % 8;\n }, 900);\n }, 2500);\n }, 2000);\n\n // Every timer is cleared here — the interval and the pending bring-back\n // included — so leaving the screen or unmounting stops the loop cold.\n return () => {\n window.clearTimeout(startTimer);\n window.clearInterval(interval);\n window.clearTimeout(bringBack);\n setRetractedIndex(null);\n };\n }, [isInView, onScreen]);\n\n // The stage reports when it is on screen; the first time also starts the fan-out.\n const stageRef = React.useRef(null);\n useEffect(() => {\n const el = stageRef.current;\n if (!el) return;\n const io = new IntersectionObserver(([entry]) => {\n if (!entry) return;\n if (entry.isIntersecting) {\n setIsInView(true);\n setOnScreen(true);\n } else setOnScreen(false);\n });\n io.observe(el);\n return () => io.disconnect();\n }, []);\n\n // The card under a (non-touch) pointer lifts, turns and rises above the rest.\n const [hoveredIndex, setHoveredIndex] = useState(null);\n\n // Fan-out: each card starts small and hidden down in the folder and springs\n // out to its place after its own delay; the retract loop springs one back\n // in. A lifted card springs to its hover pose, and settles back the way it\n // fanned out — its delay included.\n const cardMotion = (index: number, card: FanCard) => {\n const state = !isInView ? \"hidden\" : retractedIndex === index ? \"retracted\" : \"visible\";\n const tucked = state !== \"visible\";\n const hovered = hoveredIndex === index;\n const settle = state === \"visible\" ? timing(FAN_OUT, card.delay) : timing(RETRACT);\n const move = hovered ? timing(HOVER_MOVE) : settle;\n return {\n style: {\n translate: `${tucked ? card.initX : 0}px ${hovered ? -10 : tucked ? card.initY : 0}px`,\n scale: hovered ? card.hoverScale : tucked ? 0.2 : 1,\n rotate: `${hovered ? card.hoverRotate : tucked ? 0 : card.rotate}deg`,\n opacity: tucked ? 0 : 1,\n zIndex: hovered ? 40 : card.zIndex,\n transition: [\n `translate ${move}`,\n `rotate ${move}`,\n `scale ${hovered ? timing(HOVER_SCALE) : settle}`,\n `opacity ${settle}`,\n `z-index ${hovered ? HOVER_LAYER : settle}`,\n ].join(\", \"),\n } as React.CSSProperties,\n onPointerEnter: (e: React.PointerEvent) => {\n if (e.pointerType !== \"touch\") setHoveredIndex(index);\n },\n onPointerLeave: () => setHoveredIndex((current) => (current === index ? null : current)),\n };\n };\n\n return (\n
\n {/* \n Full Width Responsive Stage with Scale Wrapper to ensure cards shrink smoothly on mobile/small screens\n */}\n
\n \n {/* CARDS FANNING OUT & AUTOMATIC SEQUENTIAL RETRACTING LOOP */}\n
\n
\n\n {/* Card 0: Calendar (calendar.tsx) -> Indigo/Purple Tint */}\n \n e.preventDefault() : undefined} className=\"w-full h-full flex flex-col justify-between\">\n {/* Top: Miniature Illustration Container */}\n
\n
\n
\n \n \n \n
\n calendar.tsx\n
\n
\n\n
\n
\n
\n
\n \n August 2026\n
\n
\n ‹\n ›\n
\n
\n
\n SuMoTuWeThFrSa\n
\n
\n 30\n 31\n 1\n 2\n 3\n 4\n 5\n 14\n 15\n 16\n 17\n
\n
\n
\n
\n\n {/* Bottom: Card Info & Arrow */}\n
\n
\n

\n Calendar\n

\n

\n Date Picker Grid\n

\n
\n
\n \n
\n
\n \n
\n\n {/* Card 1: Data Table (data-table.tsx) -> Emerald/Teal Tint */}\n \n e.preventDefault() : undefined} className=\"w-full h-full flex flex-col justify-between\">\n {/* Top: Miniature Illustration Container */}\n
\n
\n
\n \n \n \n
\n data-table.tsx\n
\n
\n\n
\n
\n
\n
\n Invoices\n 128 total\n
\n
\n
\n ☑\n Alex Rivers\n $1,250.00\n
\n
\n
\n\n \n New\n \n
\n\n {/* Bottom: Card Info & Arrow */}\n
\n
\n

\n Data Table\n

\n

\n Sortable Table\n

\n
\n
\n \n
\n
\n \n
\n\n {/* Card 2: Map (fleet-tracker.tsx) -> Blue/Sky Tint */}\n \n e.preventDefault() : undefined} className=\"w-full h-full flex flex-col justify-between\">\n {/* Top: Miniature Illustration Container */}\n
\n
\n
\n \n \n \n
\n fleet-tracker.tsx\n
\n
\n\n
\n \n \n \n
\n \n \n
\n
\n Bangladesh\n
\n
\n
\n\n {/* Bottom: Card Info & Arrow */}\n
\n
\n

\n Map\n

\n

\n Fleet Tracker Map\n

\n
\n
\n \n
\n
\n \n
\n\n {/* Card 3: Breadcrumb (breadcrumb.tsx) -> Violet/Fuchsia Tint */}\n \n e.preventDefault() : undefined} className=\"w-full h-full flex flex-col justify-between\">\n {/* Top: Miniature Illustration Container */}\n
\n
\n
\n \n \n \n
\n breadcrumb.tsx\n
\n
\n\n
\n
\n Docs\n /\n Components\n /\n Breadcrumb\n
\n
\n
\n\n {/* Bottom: Card Info & Arrow */}\n
\n
\n

\n Breadcrumb\n

\n

\n Truncated Navigation\n

\n
\n
\n \n
\n
\n \n
\n\n {/* Card 4: Dock (dock.tsx) -> Amber/Orange Tint */}\n \n e.preventDefault() : undefined} className=\"w-full h-full flex flex-col justify-between\">\n {/* Top: Miniature Illustration Container */}\n
\n
\n
\n \n \n \n
\n dock.tsx\n
\n
\n\n
\n
\n
A
\n
B
\n
★
\n
C
\n
\n
\n\n \n New\n \n
\n\n {/* Bottom: Card Info & Arrow */}\n
\n
\n

\n Dock\n

\n

\n macOS Magnification\n

\n
\n
\n \n
\n
\n \n
\n\n {/* Card 5: File Upload (file-upload.tsx) -> Rose/Pink Tint */}\n \n e.preventDefault() : undefined} className=\"w-full h-full flex flex-col justify-between\">\n {/* Top: Miniature Illustration Container */}\n
\n
\n
\n \n \n \n
\n file-upload.tsx\n
\n
\n\n
\n ☁\n
Drag & Drop File
\n
\n
\n\n {/* Bottom: Card Info & Arrow */}\n
\n
\n

\n File Upload\n

\n

\n Drag & Drop Motion\n

\n
\n
\n \n
\n
\n \n
\n\n {/* Card 6: Network Graph (network-graph.tsx) -> Cyan/Blue Tint */}\n \n e.preventDefault() : undefined} className=\"w-full h-full flex flex-col justify-between\">\n {/* Top: Miniature Illustration Container */}\n
\n
\n
\n \n \n \n
\n network-graph.tsx\n
\n
\n\n
\n
\n
A
\n
B
\n
\n
Core
\n
\n\n \n New\n \n
\n\n {/* Bottom: Card Info & Arrow */}\n
\n
\n

\n Network Graph\n

\n

\n Node Graph Canvas\n

\n
\n
\n \n
\n
\n \n
\n\n {/* Card 7: Navbar (navbar.tsx) -> Purple/Primary Tint */}\n \n e.preventDefault() : undefined} className=\"w-full h-full flex flex-col justify-between\">\n {/* Top: Miniature Illustration Container */}\n
\n
\n
\n \n \n \n
\n navbar.tsx\n
\n
\n\n
\n
\n
\n \n DocsUI\n
\n
\n Docs\n Login\n
\n
\n
\n\n \n Core\n \n
\n\n {/* Bottom: Card Info & Arrow */}\n
\n
\n

\n Navbar\n

\n

\n Responsive Header\n

\n
\n
\n \n
\n
\n \n
\n\n
\n
\n\n {/* ═══════════════════════════════════════════════\n FOREGROUND SOLID FOLDER BOX (+50PX HEIGHT, TIGHTER CORNERS)\n ═══════════════════════════════════════════════ */}\n
\n
\n {/* Folder Box */}\n
\n \n \n {/* Fully opaque so the cards tucked behind the folder never show\n through; a faint white wash keeps the top-left highlight. */}\n \n \n \n \n \n \n {/* A soft tint of the colour, not the colour itself — the same\n OKLCH recipe as Folder, so every theme reads light and calm. */}\n \n \n \n
\n\n {/* Folder Text Content Overlay */}\n
\n
\n \n Design
Components\n \n
\n
\n\n
\n
\n\n
\n \n
\n );\n}\n\nexport default DesignComponentsFolder;\n", "type": "registry:component", "target": "components/custom/blocks/DesignComponentsFolder.tsx" }, { "path": "src/components/custom/blocks/motion-curves.ts", "content": "/**\n * Motion curves with no animation library behind them.\n *\n * The components here ship as CSS, GSAP or Motion builds that must move\n * identically, so the curves are computed once, from the same numbers, and\n * handed to whichever engine runs them:\n *\n * - `cubicBezier(x1, y1, x2, y2)` → an easing function (GSAP accepts any\n * `(progress) => value` as `ease`), exact for Motion's `ease: [..]` arrays\n * and for CSS `cubic-bezier()`.\n * - `spring({ stiffness, damping, mass })` → the analytic solution Motion\n * Motion uses, as an easing function plus the time it takes to settle, or\n * as a CSS `linear()` string for a fixed start and end.\n * - `createSpringFollower` → a value that chases a moving target through the\n * same spring every frame, like Motion's `useSpring`, for pointer-driven\n * motion that no fixed curve can describe.\n */\n\n// ---------------------------------------------------------------------------\n// Cubic bezier\n// ---------------------------------------------------------------------------\n\n/**\n * The CSS / Motion cubic-bezier as a function of progress. Newton-Raphson\n * with a bisection fallback, the same solver browsers use.\n */\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number) {\n if (x1 === y1 && x2 === y2) return (t: number) => t;\n\n const a = (p1: number, p2: number) => 1 - 3 * p2 + 3 * p1;\n const b = (p1: number, p2: number) => 3 * p2 - 6 * p1;\n const c = (p1: number) => 3 * p1;\n const at = (t: number, p1: number, p2: number) =>\n ((a(p1, p2) * t + b(p1, p2)) * t + c(p1)) * t;\n const slope = (t: number, p1: number, p2: number) =>\n 3 * a(p1, p2) * t * t + 2 * b(p1, p2) * t + c(p1);\n\n const solveX = (x: number) => {\n let t = x;\n for (let i = 0; i < 8; i++) {\n const s = slope(t, x1, x2);\n if (Math.abs(s) < 1e-6) break;\n const err = at(t, x1, x2) - x;\n if (Math.abs(err) < 1e-7) return t;\n t -= err / s;\n }\n let lo = 0;\n let hi = 1;\n t = x;\n for (let i = 0; i < 30 && hi - lo > 1e-7; i++) {\n const value = at(t, x1, x2);\n if (value < x) lo = t;\n else hi = t;\n t = (lo + hi) / 2;\n }\n return t;\n };\n\n return (x: number) => (x <= 0 ? 0 : x >= 1 ? 1 : at(solveX(x), y1, y2));\n}\n\n/** Motion's named eases, as the cubic-beziers they are. */\nexport const MOTION_EASE = {\n linear: [0, 0, 1, 1],\n easeIn: [0.42, 0, 1, 1],\n easeOut: [0, 0, 0.58, 1],\n easeInOut: [0.42, 0, 0.58, 1],\n circIn: [0.55, 0, 1, 0.45],\n circOut: [0.55, 0, 0.45, 1],\n circInOut: [0.85, 0, 0.15, 1],\n backIn: [0.31, 0.01, 0.66, -0.59],\n backOut: [0.33, 1.53, 0.69, 0.99],\n anticipate: [0.66, -0.56, 0.34, 1.35],\n} as const;\n\n/**\n * Motion's default layout transition (`layout` / `layoutId`):\n * `{ duration: 0.45, ease: [0.4, 0, 0.1, 1] }`.\n */\nexport const LAYOUT_TRANSITION = { duration: 0.45, ease: [0.4, 0, 0.1, 1] as const };\n\n// ---------------------------------------------------------------------------\n// Spring\n// ---------------------------------------------------------------------------\n\nexport interface SpringOptions {\n /** Motion default 100. */\n stiffness?: number;\n /** Motion default 10. */\n damping?: number;\n /** Motion default 1. */\n mass?: number;\n /** Starting velocity, in units of the whole distance per second. */\n velocity?: number;\n /** How close to the end counts as settled, as a fraction of the distance. */\n restDelta?: number;\n}\n\n/**\n * Normalised position (0 → 1) of a spring released from 0 towards 1, at time\n * `t` seconds. The closed-form solution Motion's `spring()` generator\n * uses for the under-, critically and over-damped cases.\n */\nexport function springAt(options: SpringOptions = {}) {\n const { stiffness = 100, damping = 10, mass = 1, velocity = 0 } = options;\n const zeta = damping / (2 * Math.sqrt(stiffness * mass));\n const omega0 = Math.sqrt(stiffness / mass);\n // Motion's convention: distance still to cover, velocity toward it negated.\n const delta = 1;\n const v0 = -velocity;\n\n if (zeta < 1) {\n const omegaD = omega0 * Math.sqrt(1 - zeta * zeta);\n return (t: number) => {\n const envelope = Math.exp(-zeta * omega0 * t);\n return (\n 1 -\n envelope *\n (((v0 + zeta * omega0 * delta) / omegaD) * Math.sin(omegaD * t) +\n delta * Math.cos(omegaD * t))\n );\n };\n }\n if (zeta === 1) {\n return (t: number) => 1 - Math.exp(-omega0 * t) * (delta + (v0 + omega0 * delta) * t);\n }\n const omegaD = omega0 * Math.sqrt(zeta * zeta - 1);\n return (t: number) => {\n const envelope = Math.exp(-zeta * omega0 * t);\n const freq = Math.min(omegaD * t, 300);\n return (\n 1 -\n (envelope *\n ((v0 + zeta * omega0 * delta) * Math.sinh(freq) + omegaD * delta * Math.cosh(freq))) /\n omegaD\n );\n };\n}\n\n/** Seconds until the spring stays within `restDelta` of its end. */\nexport function springDuration(options: SpringOptions = {}) {\n const at = springAt(options);\n const restDelta = options.restDelta ?? 0.001;\n const step = 1 / 240;\n let lastOutside = 0;\n for (let t = 0; t <= 10; t += step) {\n if (Math.abs(1 - at(t)) > restDelta) lastOutside = t;\n else if (t - lastOutside > 0.1) break;\n }\n return Math.max(lastOutside + step, step);\n}\n\n/**\n * A spring as a duration and an easing function over it — what GSAP takes:\n *\n * const { duration, ease } = springEase({ stiffness: 300, damping: 20 });\n * gsap.to(el, { y: 0, duration, ease });\n *\n * Exact for a fixed start and end; a spring that has to react mid-flight to a\n * new target needs `createSpringFollower` instead.\n */\nexport function springEase(options: SpringOptions = {}) {\n const duration = springDuration(options);\n const at = springAt(options);\n return {\n duration,\n ease: (progress: number) => (progress >= 1 ? 1 : at(progress * duration)),\n };\n}\n\n/**\n * A spring as a CSS `linear()` easing and its duration in ms, for\n * `transition` / `animation` with a fixed start and end.\n *\n * const { easing, duration } = springLinear({ stiffness: 400, damping: 30 });\n * el.style.transition = `transform ${duration}ms ${easing}`;\n */\nexport function springLinear(options: SpringOptions = {}, pointsPerSecond = 60) {\n const duration = springDuration(options);\n const at = springAt(options);\n const count = Math.max(Math.ceil(duration * pointsPerSecond), 8);\n const points: string[] = [];\n for (let i = 0; i <= count; i++) {\n const t = (i / count) * duration;\n points.push(String(Math.round((i === count ? 1 : at(t)) * 10000) / 10000));\n }\n return { easing: `linear(${points.join(\", \")})`, duration: Math.round(duration * 1000) };\n}\n\n// ---------------------------------------------------------------------------\n// Spring follower (useSpring equivalent)\n// ---------------------------------------------------------------------------\n\n/** Something that calls back once per frame with the time since the last, in ms. */\nexport interface FrameTicker {\n add: (callback: (deltaMs: number) => void) => () => void;\n}\n\n/** requestAnimationFrame as a ticker — the library-free default. */\nexport const rafTicker: FrameTicker = {\n add(callback) {\n let last = performance.now();\n let frame = requestAnimationFrame(function tick(now) {\n callback(now - last);\n last = now;\n frame = requestAnimationFrame(tick);\n });\n return () => cancelAnimationFrame(frame);\n },\n};\n\nexport interface SpringFollower {\n /** Chase a new target from wherever the value is now, keeping its velocity. */\n set: (target: number) => void;\n /** Move to a value instantly, with no motion. */\n jump: (value: number) => void;\n get: () => number;\n destroy: () => void;\n}\n\n/**\n * A value that follows its target through a spring, integrating the same\n * equation of motion Motion's `useSpring` solves — so a pointer-driven spring\n * reads the same in every build. Runs only while moving; `onUpdate` receives\n * each new value.\n */\nexport function createSpringFollower(\n initial: number,\n onUpdate: (value: number) => void,\n options: SpringOptions & { restSpeed?: number; ticker?: FrameTicker } = {},\n): SpringFollower {\n const { stiffness = 100, damping = 10, mass = 1, ticker = rafTicker } = options;\n const restDelta = options.restDelta ?? 0.01;\n const restSpeed = options.restSpeed ?? 0.01;\n let value = initial;\n let target = initial;\n let velocity = 0;\n let stop: (() => void) | null = null;\n\n const step = (deltaMs: number) => {\n // Fixed 1ms sub-steps keep the integration stable for stiff springs and\n // independent of the frame rate.\n const steps = Math.min(Math.max(Math.round(deltaMs), 1), 250);\n for (let i = 0; i < steps; i++) {\n const force = -stiffness * (value - target) - damping * velocity;\n velocity += (force / mass) * 0.001;\n value += velocity * 0.001;\n }\n if (Math.abs(target - value) < restDelta && Math.abs(velocity) < restSpeed) {\n value = target;\n velocity = 0;\n stop?.();\n stop = null;\n }\n onUpdate(value);\n };\n\n return {\n set(next) {\n target = next;\n if (!stop && value !== target) stop = ticker.add(step);\n },\n jump(next) {\n stop?.();\n stop = null;\n value = target = next;\n velocity = 0;\n onUpdate(value);\n },\n get: () => value,\n destroy() {\n stop?.();\n stop = null;\n },\n };\n}\n", "type": "registry:component", "target": "components/custom/blocks/motion-curves.ts" } ], "docs": "Named export: DesignComponentsFolder. Motion drives the open and card-fan animation; `color` tints the folder. Uses next/image, so it needs edits outside Next.js. For the empty folder shape, use `design-folder-box`.", "categories": [ "media", "marketing" ], "type": "registry:component" }