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:T142c,"use client"; import { useMemo, 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; } }; } // Registering the offset as a number lets CSS animate it smoothly; an // unregistered custom property would jump from start to end instead. if (typeof CSS !== "undefined" && "registerProperty" in CSS) { try { CSS.registerProperty({ name: "--wave-text-offset", syntax: "", inherits: false, initialValue: "-25", }); } catch { // Already registered by another copy of the component. } } const COLORS = ["#d9b06a", "#6fb3c2", "#e07a5f", "#81b29a", "#f2cc8f", "#8d7fc9"]; type WaveTextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"; interface WaveTextProps extends Omit, "color"> { as?: WaveTextTag; /** Colours of the bands, in order. */ colors?: string[]; /** The colour of the text between waves. Defaults to the text colour. */ base?: string; /** Bands ripple out from below the text (radial) or rise straight up (linear). */ shape?: "radial" | "linear"; /** How many bands one wave carries. */ bands?: number; /** Width of each band, in percent of the text box. */ bandWidth?: number; /** * Room below the text where the ripples start, in percent of the * container's width (padding percentages follow the width). Radial only. */ depth?: number; /** Seconds for one wave to pass. */ duration?: number; /** Keep sending waves, instead of one. */ repeat?: boolean; /** Wait before the first wave, in ms. */ delay?: number; /** "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 wave back, `true` sends it. */ play?: boolean; } /** * Bands of colour that wash through text like a swell, rippling out from * below it or rising straight up. It is a gradient clipped to the text, * moved by one CSS animation of a registered custom property: no canvas, * no per-frame JavaScript. The text rests in its own colour, repeating * waves pause off screen, and with `prefers-reduced-motion` it stays still. * * @example * * High tide * */ function WaveText({ as: Tag = "span", colors = COLORS, base = "currentColor", shape = "radial", bands = 8, bandWidth = 4, depth = 20, duration = 3.75, repeat = false, delay = 0, trigger = "load", once = true, play, className, style, ref, children, ...props }: WaveTextProps) { const [observe, phase, inView] = useEntrance({ trigger, once, play }); const mergedRef = useMemo(() => mergeRefs(ref, observe), [ref, observe]); const gradient = useMemo(() => { const palette = colors.length > 0 ? colors : COLORS; const at = (offset: number) => `calc((var(--wave-text-offset) + ${offset}) * 1%)`; const stops = [`${base} ${at(0)}`]; for (let band = 0; band < bands; band++) { stops.push(`${palette[band % palette.length]} ${at((band + 2) * bandWidth)}`); } stops.push(`${base} ${at((bands + 2) * bandWidth)}`); return shape === "radial" ? `radial-gradient(circle at 50% 100%, ${stops.join(", ")})` : `linear-gradient(0deg, ${stops.join(", ")})`; }, [colors, base, bands, bandWidth, shape]); const moving = phase !== "static"; const lift = shape === "radial" ? depth : 0; return ( } data-slot="wave-text" data-state={phase} className={cn( "inline-block bg-clip-text [-webkit-text-fill-color:transparent]", moving && "motion-safe:animate-wave-text", className )} style={ { // A resting value for the moment before the property is registered, // so the gradient is valid and the text visible from the first paint. // The animation overrides it while it runs. "--wave-text-offset": -25, backgroundImage: gradient, // Extra room below the text puts the ripples' centre under the baseline. paddingBottom: lift ? `${lift}%` : undefined, marginBottom: lift ? `-${lift}%` : undefined, ...(moving ? { animationDuration: `${duration}s`, animationDelay: `${delay}ms`, animationIterationCount: repeat ? "infinite" : 1, animationPlayState: phase === "armed" || (repeat && !inView) ? "paused" : undefined, } : null), ...style, } as CSSProperties } {...props} > {children} ); } export { WaveText, type WaveTextProps }; 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-wave-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-wave-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"wave-text 3.75s linear 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 wave-text {\n\tfrom {\n\t\t--wave-text-offset: -25;\n\t}\n\tto {\n\t\t--wave-text-offset: 200;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L56",null,{"files":[{"path":"registry/default/ui/wave-text.tsx","content":"$57","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]