2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T23eb,"use client"; import { motion, type MotionValue, useMotionValue, useMotionValueEvent, useReducedMotion, useSpring, useTransform, useVelocity, } from "motion/react"; import { useRef, type KeyboardEvent } from "react"; import { cn } from "@/lib/utils"; export type StackedOutlineTextProps = { className?: string; text?: string; fontSize?: number; stacks?: number; /** Face color of the type. Defaults to the brand ink token. */ ink?: string; /** Outline color of the type. Defaults to the canvas token. */ paper?: string; }; const DEFAULT_TEXT = "LMNO"; const DEFAULT_FONT_SIZE = 250; const MIN_STACK_COUNT = 5; const MAX_STACK_COUNT = 10; const MIN_SHADOW_SPEED = 120; const MAX_SHADOW_SPEED = 2200; const MIN_TRAIL_DISTANCE = 18; const MAX_TRAIL_DISTANCE = 132; const KEYBOARD_STEP = 32; const SVG_HORIZONTAL_PADDING = 36; const SVG_VERTICAL_PADDING = 168; const MAX_SVG_WIDTH = 1040; const shadowSpring = { damping: 28, mass: 0.55, stiffness: 260 }; const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max); const estimateTextWidth = (text: string, fontSize: number) => Array.from(text).reduce((width, character) => { if (character === " ") return width + fontSize * 0.34; if ("ilI.,'!|".includes(character)) return width + fontSize * 0.34; if ("mwMWOQ@#".includes(character)) return width + fontSize * 0.9; return width + fontSize * 0.68; }, 0); const getLayerIndexes = (stackCount: number) => Array.from({ length: stackCount }, (_, index) => stackCount - index); const getSafeStackCount = (stackCount: number) => Math.round(clamp(stackCount, MIN_STACK_COUNT, MAX_STACK_COUNT)); const getSvgMetrics = (displayText: string, fontSize: number) => { const textWidth = estimateTextWidth(displayText, fontSize); const viewBoxWidth = Math.max(textWidth + SVG_HORIZONTAL_PADDING * 2, fontSize * 2.65); const viewBoxHeight = fontSize + SVG_VERTICAL_PADDING; return { renderedWidth: Math.min(MAX_SVG_WIDTH, viewBoxWidth * (fontSize / DEFAULT_FONT_SIZE)), viewBox: `${-viewBoxWidth / 2} ${-viewBoxHeight / 2} ${viewBoxWidth} ${viewBoxHeight}`, }; }; function ShadowTextLayer({ displayText, layerIndex, stackCount, shadowOpacity, shadowX, shadowY, ink, paper, }: { displayText: string; layerIndex: number; stackCount: number; shadowOpacity: MotionValue; shadowX: MotionValue; shadowY: MotionValue; ink: string; paper: string; }) { const layerDepth = layerIndex / stackCount; const layerX = useTransform(shadowX, (latest) => latest * layerDepth); const layerY = useTransform(shadowY, (latest) => latest * layerDepth); const layerOpacity = useTransform(shadowOpacity, (latest) => latest * (0.34 + layerDepth * 0.66)); return ( {displayText} ); } /** * Brand display type: giant outlined type you can drag. Drag velocity pushes * a springy stack of copies behind the word; release settles it back. * Colors default to the brand ink/canvas tokens; the face uses the brand * display family with a heavy system fallback. */ export function StackedOutlineText({ className, text = DEFAULT_TEXT, fontSize = DEFAULT_FONT_SIZE, stacks = MAX_STACK_COUNT, ink = "var(--kc-ink)", paper = "var(--kc-canvas)", }: StackedOutlineTextProps) { const containerRef = useRef(null); const draggableRef = useRef(null); const isDraggingRef = useRef(false); const shouldReduceMotion = useReducedMotion() ?? false; const x = useMotionValue(0); const y = useMotionValue(0); const velocityX = useVelocity(x); const velocityY = useVelocity(y); const rawShadowX = useMotionValue(0); const rawShadowY = useMotionValue(0); const rawShadowOpacity = useMotionValue(0); const shadowX = useSpring(rawShadowX, shadowSpring); const shadowY = useSpring(rawShadowY, shadowSpring); const shadowOpacity = useSpring(rawShadowOpacity, shadowSpring); const displayText = text.trim() || DEFAULT_TEXT; const stackCount = getSafeStackCount(stacks); const letterSpacing = fontSize * -0.04; const layerIndexes = getLayerIndexes(stackCount); const svgMetrics = getSvgMetrics(displayText, fontSize); const updateShadowFromVelocity = (latestX: number, latestY: number) => { if (shouldReduceMotion || !isDraggingRef.current) { rawShadowX.set(0); rawShadowY.set(0); rawShadowOpacity.set(0); return; } const speed = Math.hypot(latestX, latestY); if (speed < MIN_SHADOW_SPEED) { rawShadowX.set(0); rawShadowY.set(0); rawShadowOpacity.set(0); return; } const normalizedSpeed = clamp((speed - MIN_SHADOW_SPEED) / (MAX_SHADOW_SPEED - MIN_SHADOW_SPEED), 0, 1); const easedSpeed = Math.pow(normalizedSpeed, 0.62); const trailDistance = MIN_TRAIL_DISTANCE + easedSpeed * (MAX_TRAIL_DISTANCE - MIN_TRAIL_DISTANCE); rawShadowX.set((-latestX / speed) * trailDistance); rawShadowY.set((-latestY / speed) * trailDistance); rawShadowOpacity.set(0.12 + easedSpeed * 0.88); }; useMotionValueEvent(velocityX, "change", (latestX) => { updateShadowFromVelocity(latestX, velocityY.get()); }); useMotionValueEvent(velocityY, "change", (latestY) => { updateShadowFromVelocity(velocityX.get(), latestY); }); const moveByKeyboardDelta = (deltaX: number, deltaY: number) => { const containerElement = containerRef.current; const draggableElement = draggableRef.current; if (!containerElement || !draggableElement) return; const containerRect = containerElement.getBoundingClientRect(); const draggableRect = draggableElement.getBoundingClientRect(); const safeDeltaX = clamp(deltaX, containerRect.left - draggableRect.left, containerRect.right - draggableRect.right); const safeDeltaY = clamp(deltaY, containerRect.top - draggableRect.top, containerRect.bottom - draggableRect.bottom); if (safeDeltaX === 0 && safeDeltaY === 0) return; x.set(x.get() + safeDeltaX); y.set(y.get() + safeDeltaY); }; const handleKeyDown = (event: KeyboardEvent) => { const keyDeltaByKey: Record = { ArrowDown: [0, KEYBOARD_STEP], ArrowLeft: [-KEYBOARD_STEP, 0], ArrowRight: [KEYBOARD_STEP, 0], ArrowUp: [0, -KEYBOARD_STEP], }; const keyDelta = keyDeltaByKey[event.key]; if (!keyDelta) return; event.preventDefault(); moveByKeyboardDelta(keyDelta[0], keyDelta[1]); }; return (

{ isDraggingRef.current = false; rawShadowX.set(0); rawShadowY.set(0); rawShadowOpacity.set(0); }} onDragStart={() => { isDraggingRef.current = true; }} onKeyDown={handleKeyDown} role="group" style={{ x, y }} tabIndex={0} whileDrag={shouldReduceMotion ? undefined : { cursor: "grabbing", scale: 0.985 }} >

); } export default StackedOutlineText; 32:T519,import type { BlockMeta } from "../../../lib/block-meta"; export const stackedOutlineTextMeta: BlockMeta = { slug: "stacked-outline-text", title: "Stacked outline text", description: "Brand display type you can drag: velocity pushes a springy stack of outlined copies behind the word. Ink, outline, and face default to the brand tokens; keyboard-movable and still under reduced motion.", group: "sections", kobraDeps: [], files: [ "blocks/sections/stacked-outline-text/stacked-outline-text.tsx", "blocks/sections/stacked-outline-text/demo.tsx", "blocks/sections/stacked-outline-text/meta.ts", ], props: [ { name: "text", type: "string", default: "'LMNO'", description: "The word rendered; blank falls back to LMNO." }, { name: "fontSize", type: "number", default: "250", description: "SVG font size; drives spacing and viewBox." }, { name: "stacks", type: "number", default: "10", description: "Trail layers, clamped to 5–10." }, { name: "ink / paper", type: "string", default: "var(--kc-ink) / var(--kc-canvas)", description: "Face and outline colors." }, ], tags: ["typography", "display", "drag", "brand"], status: "ready", origin: { name: "uselayouts", url: "https://uselayouts.com/docs/components/stacked-outline-text", license: "MIT" }, }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#sections","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Sections"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Stacked outline text"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Stacked outline text"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Brand display type you can drag: velocity pushes a springy stack of outlined copies behind the word. Ink, outline, and face default to the brand tokens; keyboard-movable and still under reduced motion."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"stacked-outline-text","group":"sections","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/sections/stacked-outline-text/stacked-outline-text.tsx","code":"$31"},{"path":"blocks/sections/stacked-outline-text/demo.tsx","code":"\"use client\";\n\nimport { StackedOutlineText } from \"./stacked-outline-text\";\nimport { DemoPage, DemoSection } from \"../../_shared/variant-frame\";\nimport { brandFixture } from \"../../../lib/commerce/fixtures/heroes\";\n\nexport function StackedOutlineTextDemo({ brand }: { brand?: string }) {\n const f = brandFixture(brand);\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport default StackedOutlineTextDemo;\n"},{"path":"blocks/sections/stacked-outline-text/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]