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:T25c8,"use client" import { useState } from "react" import { PixelHeading } from "@/registry/default/ui/pixel-heading-character" import type { PixelHeadingMode } from "@/registry/default/ui/pixel-heading-character" /* ─── Constants ─── */ const MODES: PixelHeadingMode[] = ["uniform", "multi", "wave", "random"] const PREFIX_FONTS = [ "none", "square", "grid", "circle", "triangle", "line", ] as const const HEADING_LEVELS = ["h1", "h2", "h3", "h4", "h5", "h6"] as const /* ─── Demo ─── */ export default function PixelHeadingCharacterDemo() { const [text, setText] = useState("Pixel Fonts") const [mode, setMode] = useState("wave") const [autoPlay, setAutoPlay] = useState(true) const [showLabel, setShowLabel] = useState(true) const [cycleInterval, setCycleInterval] = useState(340) const [staggerDelay, setStaggerDelay] = useState(200) const [prefix, setPrefix] = useState("") const [prefixFont, setPrefixFont] = useState<(typeof PREFIX_FONTS)[number]>("none") const [headingLevel, setHeadingLevel] = useState<(typeof HEADING_LEVELS)[number]>("h1") const [defaultFontIndex, setDefaultFontIndex] = useState(3) const [isolateEnabled, setIsolateEnabled] = useState(false) const [isolateChars, setIsolateChars] = useState("x") const [isolateFont, setIsolateFont] = useState("sans") const isolateMap = isolateEnabled ? Object.fromEntries(isolateChars.split("").map((c) => [c, isolateFont])) : undefined /* ── Reset key forces remount when autoPlay toggles ── */ const [resetKey, setResetKey] = useState(0) return (

{/* ── Preview ── */}

{text}

{/* ── Controls ── */}

{/* Text */} setText(e.target.value)} className="border-input placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none" placeholder="Enter heading text" /> {/* Mode */}

{MODES.map((m) => ( ))}

{/* Heading Level */} {/* Cycle Interval */} setCycleInterval(Number(e.target.value))} className="accent-foreground w-full" /> {/* Stagger Delay */} setStaggerDelay(Number(e.target.value))} className="accent-foreground w-full" /> {/* Default Font Index (uniform) */} setDefaultFontIndex(Number(e.target.value))} className="accent-foreground w-full" /> {/* Auto Play */} { setAutoPlay(v) setResetKey((k) => k + 1) }} /> {/* Show Label */} {/* Prefix */} setPrefix(e.target.value)} className="border-input placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none" placeholder="e.g. Shadcn," /> {/* Prefix Font */} {/* Isolate */}

{isolateEnabled && (

setIsolateChars(e.target.value)} className="border-input placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-20 rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none" placeholder="chars" />

)}

{/* Remount */}

) } /* ─── Shared control primitives ─── */ function ControlGroup({ label, children, }: { label: string children: React.ReactNode }) { return (

{label} {children}

) } function Toggle({ checked, onChange, }: { checked: boolean onChange: (v: boolean) => void }) { return ( ) } 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":[null,["$","$L51",null,{"namespace":"@cult-ui","registryDependencies":["pixel-heading-character"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/example/pixel-heading-character-demo.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]