52: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"] 53: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"] 54:Tbac,"use client"; import type { AnchorHTMLAttributes, MouseEvent, ReactNode } from "react"; import { cn } from "../../utils"; import { useSoundCue } from "../../sound/use-sound"; import "./line-hover-link.css"; /** * Line Hover Link Variants * * slide - Line slides in from right to left * double - Two lines animate with different timings * grow - Line grows thicker on hover * strike - Strikethrough effect with text scale * fade - Lines fade up with stagger delay * pulse - Line pulses up and down * swap - Two lines go opposite directions * sweep - Full background cover sweep * bounce - Bouncy squish animation * arc - SVG arc stroke draws in * scribble - SVG scribble stroke draws in * ink - Constant underline; whole link snaps (-1px,-1px) on hover */ export type LineHoverVariant = | "slide" | "double" | "grow" | "strike" | "fade" | "pulse" | "swap" | "sweep" | "bounce" | "arc" | "scribble" | "ink"; export interface LineHoverLinkProps extends Omit, "className"> { /** The animation variant */ variant?: LineHoverVariant; /** Link href */ href?: string; /** Additional CSS classes */ className?: string; children?: ReactNode; /** * Plays the matching interface cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } export function LineHoverLink({ variant = "slide", href = "#", target, rel, className = "", children, sound = false, onClick, ...restProps }: LineHoverLinkProps) { const needsSpan = ["strike", "bounce", "arc", "scribble"].includes(variant); const relValue = target === "_blank" ? (rel ?? "noopener noreferrer") : rel; const playCue = useSoundCue(sound); function handleClick(event: MouseEvent) { playCue("press"); onClick?.(event); } return ( {needsSpan ? {children} : children} {variant === "arc" && ( )} {variant === "scribble" && ( )} ); } 55:T29f3,/* * One rule governs this whole sheet: every `transition` and `animation` * declaration lives inside `@media (prefers-reduced-motion: no-preference)`, * and nothing else does. The resting and hover states themselves stay * outside, so a visitor who asked for less motion still gets the full * underline — it simply appears rather than travelling. Each variant keeps * its own guard block next to its own rules rather than pooling them at the * end of the file, so the shape is obvious to whoever adds variant thirteen. * * The eleven bespoke `cubic-bezier` curves and the `0.2s`/`0.3s`/`0.4s`/ * `0.6s` durations below are deliberately NOT retokenised: they are this * component's designed choreography, and flattening them onto the four * house curves would make eleven distinct variants read as one. */ .link-hover { cursor: pointer; position: relative; white-space: nowrap; color: currentColor; text-decoration: none; } .link-hover::before, .link-hover::after { position: absolute; width: 100%; height: 1px; background: currentColor; top: 100%; left: 0; pointer-events: none; } .link-hover::before { content: ""; } /* Slide */ .link-hover--slide::before { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); } .link-hover--slide:is(:hover, :focus-visible)::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } @media (prefers-reduced-motion: no-preference) { .link-hover--slide::before { transition: transform 0.3s; } } /* Double */ .link-hover--double::before { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); } .link-hover--double:is(:hover, :focus-visible)::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } .link-hover--double::after { content: ""; top: calc(100% + 4px); transform-origin: 0% 50%; transform: scale3d(0, 1, 1); } .link-hover--double:is(:hover, :focus-visible)::after { transform-origin: 100% 50%; transform: scale3d(1, 1, 1); } @media (prefers-reduced-motion: no-preference) { .link-hover--double::before, .link-hover--double::after { transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); } .link-hover--double:is(:hover, :focus-visible)::before, .link-hover--double:is(:hover, :focus-visible)::after { transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1); } } /* Grow */ .link-hover--grow::before { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); } .link-hover--grow:is(:hover, :focus-visible)::before { transform-origin: 0% 50%; transform: scale3d(1, 2, 1); } .link-hover--grow::after { content: ""; top: calc(100% + 4px); transform-origin: 100% 50%; transform: scale3d(0, 1, 1); } .link-hover--grow:is(:hover, :focus-visible)::after { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } @media (prefers-reduced-motion: no-preference) { .link-hover--grow::before { transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1); } .link-hover--grow::after { transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1); } .link-hover--grow:is(:hover, :focus-visible)::before, .link-hover--grow:is(:hover, :focus-visible)::after { transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); } } /* Strike */ .link-hover--strike { padding: 0 10px; } .link-hover--strike::before { top: 50%; height: 2px; transform-origin: 100% 50%; transform: scale3d(0, 1, 1); } .link-hover--strike:is(:hover, :focus-visible)::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } .link-hover--strike span { display: inline-block; } .link-hover--strike:is(:hover, :focus-visible) span { transform: scale3d(1.1, 1.1, 1.1); } @media (prefers-reduced-motion: no-preference) { .link-hover--strike::before, .link-hover--strike span { transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1); } } /* Fade */ .link-hover--fade::before, .link-hover--fade::after { opacity: 0; transform-origin: 50% 0%; transform: translate3d(0, 3px, 0); } .link-hover--fade:is(:hover, :focus-visible)::before, .link-hover--fade:is(:hover, :focus-visible)::after { opacity: 1; transform: translate3d(0, 0, 0); } .link-hover--fade::after { content: ""; top: calc(100% + 4px); width: 70%; left: 15%; } @media (prefers-reduced-motion: no-preference) { .link-hover--fade::before, .link-hover--fade::after { transition-property: transform, opacity; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1); } .link-hover--fade:is(:hover, :focus-visible)::before, .link-hover--fade:is(:hover, :focus-visible)::after { transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1); } /* The stagger: the two lines swap which of them leads, so the pair reads as a gesture rather than as one line drawn twice. */ .link-hover--fade::before, .link-hover--fade:is(:hover, :focus-visible)::after { transition-delay: 0.1s; } .link-hover--fade:is(:hover, :focus-visible)::before { transition-delay: 0s; } } /* Pulse */ .link-hover--pulse::before { height: 10px; top: 100%; opacity: 0; } /* * `opacity: 1` stays outside the guard and the `animation` goes inside, on * purpose: this variant reaches its visible state THROUGH the keyframes' * `forwards` fill. The base rule is a full-width, full-opacity 10px bar * with no transform of its own, so dropping the animation leaves a * correctly-sized bar that simply appears. Nothing goes invisible. */ .link-hover--pulse:is(:hover, :focus-visible)::before { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .link-hover--pulse:is(:hover, :focus-visible)::before { animation: lineUp 0.3s ease forwards; } } @keyframes lineUp { 0% { transform-origin: 50% 100%; transform: scale3d(1, 0.045, 1); } 50% { transform-origin: 50% 100%; transform: scale3d(1, 1, 1); } 51% { transform-origin: 50% 0%; transform: scale3d(1, 1, 1); } 100% { transform-origin: 50% 0%; transform: scale3d(1, 0.045, 1); } } .link-hover--pulse::after { content: ""; opacity: 0; } .link-hover--pulse:is(:hover, :focus-visible)::after { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .link-hover--pulse::after { transition: opacity 0.3s; transition-delay: 0s; } .link-hover--pulse:is(:hover, :focus-visible)::after { transition-delay: 0.3s; } } /* Swap */ .link-hover--swap::before { transform-origin: 0% 50%; transform: scale3d(0, 1, 1); } .link-hover--swap:is(:hover, :focus-visible)::before { transform: scale3d(1, 1, 1); } .link-hover--swap::after { content: ""; top: calc(100% + 4px); transform-origin: 100% 50%; } .link-hover--swap:is(:hover, :focus-visible)::after { transform: scale3d(0, 1, 1); } @media (prefers-reduced-motion: no-preference) { .link-hover--swap::before, .link-hover--swap::after { transition: transform 0.3s; } } /* Sweep */ .link-hover--sweep::before { height: 100%; top: 0; opacity: 0; } /* * Same shape as `--pulse` above, and for the same reason: the visible state * is reached through the keyframes' `forwards` fill, so `opacity: 1` has to * stay outside the guard. The base rule is a full-height, full-width cover * with no transform, so without the animation it simply appears. */ .link-hover--sweep:is(:hover, :focus-visible)::before { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .link-hover--sweep:is(:hover, :focus-visible)::before { animation: coverUp 0.3s ease forwards; } } @keyframes coverUp { 0% { transform-origin: 50% 100%; transform: scale3d(1, 0.045, 1); } 50% { transform-origin: 50% 100%; transform: scale3d(1, 1, 1); } 51% { transform-origin: 50% 0%; transform: scale3d(1, 1, 1); } 100% { transform-origin: 50% 0%; transform: scale3d(1, 0.045, 1); } } .link-hover--sweep::after { content: ""; } .link-hover--sweep:is(:hover, :focus-visible)::after { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .link-hover--sweep::after { transition: opacity 0.3s; } } /* Bounce */ .link-hover--bounce::before { height: 7px; border-radius: 20px; transform: scale3d(1, 1, 1); } .link-hover--bounce:is(:hover, :focus-visible)::before { opacity: 1; transform: scale3d(1.2, 0.1, 1); } .link-hover--bounce span { transform: translate3d(0, -4px, 0); display: inline-block; } .link-hover--bounce:is(:hover, :focus-visible) span { transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: no-preference) { .link-hover--bounce::before { transition: transform 0.2s, opacity 0.2s; transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53); } .link-hover--bounce span { transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53); } .link-hover--bounce:is(:hover, :focus-visible)::before, .link-hover--bounce:is(:hover, :focus-visible) span { transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1); transition-duration: 0.4s; } .link-hover--bounce:is(:hover, :focus-visible) span { transition-delay: 0s; } } /* SVG Graphics Base */ .link-hover__graphic { position: absolute; top: 0; left: 0; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1px; } .link-hover__graphic--stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; } .link-hover:is(:hover, :focus-visible) .link-hover__graphic--stroke path { stroke-dashoffset: 0; } /* Arc */ .link-hover--arc::before { display: none; } .link-hover__graphic--arc { top: 73%; left: -23%; } @media (prefers-reduced-motion: no-preference) { .link-hover__graphic--arc path { transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1); } .link-hover:is(:hover, :focus-visible) .link-hover__graphic--arc path { transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1); transition-duration: 0.3s; } } /* Scribble */ .link-hover--scribble::before { display: none; } .link-hover__graphic--scribble { top: 100%; } /* The stroke-draw pair (`--arc` and `--scribble`) animates `stroke-dashoffset`, which is neither opacity nor transform — a named, long-standing exception for SVG line drawing. Under reduced motion the guard drops the transition and the resting `stroke-dashoffset: 1` snaps straight to `0`, so the stroke is fully drawn, just not drawn *for* you. */ @media (prefers-reduced-motion: no-preference) { .link-hover__graphic--scribble path { transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.3, 1); } .link-hover:is(:hover, :focus-visible) .link-hover__graphic--scribble path { transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1); transition-duration: 0.3s; } } /* Ink */ .link-hover--ink::before { height: 2px; } .link-hover--ink:focus-visible { transform: translate3d(-1px, -1px, 0); } @media (hover: hover) { .link-hover--ink:hover { transform: translate3d(-1px, -1px, 0); } } 51:["$","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,["$","$L52",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"react/src/components/line-hover-link/LineHoverLink.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/line-hover-link/LineHoverLink.tsx"},{"path":"react/src/components/line-hover-link/index.ts","content":"\"use client\";\n\nexport { LineHoverLink } from \"./LineHoverLink\";\nexport type { LineHoverLinkProps, LineHoverVariant } from \"./LineHoverLink\";\n","type":"registry:ui","target":"@ui/fancy/components/line-hover-link/index.ts"},{"path":"react/src/components/line-hover-link/line-hover-link.css","content":"$55","type":"registry:ui","target":"@ui/fancy/components/line-hover-link/line-hover-link.css"}],"className":"h-[70svh] min-h-80"}]]}]