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[544296,["/_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"],"ItemStyles"] 53:I[8513,["/_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"],"ScrollArea"] 54:I[8513,["/_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"],"ScrollBar"] 55:I[34002,["/_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"],"CodeEditor"] 56: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"] 57:T17b7,"use client"; import { Fragment, useMemo, type AnimationEvent, type ComponentProps, type CSSProperties, type Ref, } from "react"; import { useEntrance, type EntranceTrigger } from "@/registry/default/hooks/use-entrance"; import { cn } from "@/registry/default/lib/utils"; function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } // One splitter for the module: user-perceived characters, so emoji and // accents stay whole wherever the runtime can tell them apart. const characterSplitter = typeof Intl === "object" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : null; function graphemes(text: string) { if (!characterSplitter) return [...text]; const pieces: string[] = []; for (const { segment } of characterSplitter.segment(text)) pieces.push(segment); return pieces; } type FlipTextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"; interface FlipTextProps extends Omit, "children" | "onAnimationEnd"> { /** Plain text. */ children: string; as?: FlipTextTag; /** What turns on its own: each character or each word. */ split?: "characters" | "words"; /** Where the wave starts. */ from?: "first" | "last" | "center"; /** * Where each piece starts, in degrees around its horizontal axis. * Negative values tip the top away from the reader, positive towards them. */ angle?: number; /** Distance to the viewer, in px: lower values give a deeper 3D turn. */ perspective?: number; /** * The axis each piece turns around. "center" rolls it like a drum, * "bottom" stands it up from its baseline, "top" lets it drop down. */ origin?: "center" | "bottom" | "top"; /** "load" plays on first paint with CSS alone; "in-view" when the text scrolls into view. */ trigger?: EntranceTrigger; /** In-view: play the first time only. */ once?: boolean; /** Takes over from `trigger`: `false` holds the text turned away, `true` plays it. */ play?: boolean; /** Wait before the first piece, in ms. */ delay?: number; /** Time between pieces, in ms. */ stagger?: number; /** How long each piece takes, in ms. */ duration?: number; /** Called once the last piece is in place. */ onAnimationComplete?: () => void; } // Behind the face for "center", so the piece rolls like a drum instead of spinning on the spot. const ORIGINS = { center: "50% 50% -0.5em", bottom: "50% 100%", top: "50% 0%", } as const; /** * Kinetic type in 3D: characters (or words) turn into place around their * horizontal axis, one after another, with their own perspective. It is one * CSS animation of `rotateX` per piece, so it plays on first paint without * JavaScript. Screen readers get the text in one piece, and with * `prefers-reduced-motion` it is shown as is. * * @example * Hoist the colours */ function FlipText({ children, as: Tag = "p", split = "characters", from = "first", angle = -90, perspective = 600, origin = "center", trigger = "load", once = true, play, delay = 0, stagger = 40, duration = 800, onAnimationComplete, className, style, ref, ...props }: FlipTextProps) { const [observe, phase] = useEntrance({ trigger, once, play }); const mergedRef = useMemo(() => mergeRefs(ref, observe), [ref, observe]); // Words keep their characters on one line; each holds the pieces that turn. const words = useMemo(() => { let next = 0; return children .trim() .split(/\s+/) .filter(Boolean) .map((word) => (split === "characters" ? graphemes(word) : [word]).map((text) => ({ text, index: next++, })) ); }, [children, split]); const count = words.reduce((sum, word) => sum + word.length, 0); const order = (index: number) => { if (from === "last") return count - 1 - index; if (from === "center") return Math.abs(Math.floor((count - 1) / 2) - index); return index; }; const pieceStyle = (index: number): CSSProperties => phase === "static" ? {} : { animationDelay: `${delay + order(index) * stagger}ms`, animationDuration: `${duration}ms`, animationPlayState: phase === "armed" ? "paused" : undefined, }; // The piece that moves last: the far end of the wave. const last = from === "last" ? 0 : Math.max(count - 1, 0); const handleAnimationEnd = (event: AnimationEvent) => { if ((event.target as HTMLElement).dataset.last !== undefined) onAnimationComplete?.(); }; return ( } data-slot="flip-text" data-state={phase} className={className} style={ { "--flip-text-angle": `${angle}deg`, "--flip-text-perspective": `${perspective}px`, ...style, } as CSSProperties } onAnimationEnd={handleAnimationEnd} {...props} > {children} {words.map((word, wordIndex) => ( {wordIndex > 0 ? " " : null} ))} ); } export { FlipText, type FlipTextProps }; 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":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/use-entrance"]}]]}],["$","$L52",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L53",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","animate-flip-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","animate-flip-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"flip-text 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both"}]]}]]}],["$","$L54",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L55",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes flip-text {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: perspective(var(--flip-text-perspective, 600px)) rotateX(var(--flip-text-angle, -90deg));\n\t}\n\tto {\n\t\ttransform: perspective(var(--flip-text-perspective, 600px)) rotateX(0deg);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L56",null,{"files":[{"path":"registry/default/ui/flip-text.tsx","content":"$57","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]