{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "line-fill-text", "type": "registry:block", "title": "Line Fill Text", "description": "A line texture text effect for React. Bold type is cut from one field of fine concentric lines that sweep diagonally through the word, flow outward continuously and bend around the cursor. It stays real, selectable text.", "author": "Wensity ", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [], "files": [ { "path": "registry/wensity/lib/utils.ts", "type": "registry:lib", "target": "@lib/utils.ts", "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n" }, { "path": "registry/wensity/line-fill-text.tsx", "type": "registry:component", "target": "@components/wensity/line-fill-text.tsx", "content": "\"use client\";\n\n/**\n * LineFillText\n * ────────────\n * Type filled with flowing linework. Every letter is cut from one field of\n * fine concentric lines, so the strokes sweep diagonally through the word and\n * bend as they cross it. The field flows outward continuously, its focal point\n * drifts to keep the curvature changing, and the pointer can pull the centre\n * of the field so the lines wrap round the cursor.\n *\n * Rendering\n * A `repeating-radial-gradient` clipped to the glyphs with\n * `background-clip: text`. The text stays real text: it lays itself out, it\n * is selectable, and screen readers read it. Motion is three registered\n * custom properties animated by CSS (flow phase, focal drift) plus one\n * pointer position written on move and eased by a CSS transition. No\n * canvas, no measuring, no per-frame JavaScript.\n */\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ─── Public types ───────────────────────────────────────────────────── */\n\nexport interface LineFillTextProps\n extends Omit, \"children\"> {\n /** The text to fill. `\\n` forces a line break. */\n text: string;\n /** Lines per em of type, clamped to 5–30. Default 16. */\n density?: number;\n /** Line thickness as a share of the gap between lines, 0.1–0.8. Default 0.38. */\n weight?: number;\n /** Lines flowing past a point per second. 0 stops the flow. Default 1. */\n speed?: number;\n /** Seconds for one slow drift of the focal point. 0 stops the drift. Default 16. */\n driftSeconds?: number;\n /**\n * Focal point of the line field, relative to the text box. Points outside\n * the box give gentle diagonal sweeps; points inside give tight rings.\n * Default `{ x: -15, y: 130 }` (percent), below and left of the text.\n */\n origin?: { x: number; y: number };\n /** Let the pointer pull the focal point while it is over the text. Default true. */\n interactive?: boolean;\n}\n\n/* ─── Component ──────────────────────────────────────────────────────── */\n\nconst clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));\n\nexport function LineFillText({\n text,\n density = 16,\n weight = 0.38,\n speed = 1,\n driftSeconds = 16,\n origin = { x: -15, y: 130 },\n interactive = true,\n className,\n style,\n onPointerMove,\n onPointerLeave,\n ...spanProps\n}: LineFillTextProps) {\n const ref = React.useRef(null);\n\n const setFocus = (x: number, y: number) => {\n const el = ref.current;\n if (!el) return;\n el.style.setProperty(\"--wlf-fx\", `${x}%`);\n el.style.setProperty(\"--wlf-fy\", `${y}%`);\n };\n\n const flowSeconds = speed > 0 ? 1 / speed : 0;\n\n const vars = {\n \"--wlf-pitch\": `${1 / clamp(density, 5, 30)}em`,\n \"--wlf-weight\": clamp(weight, 0.1, 0.8),\n \"--wlf-fx\": `${origin.x}%`,\n \"--wlf-fy\": `${origin.y}%`,\n \"--wlf-flow\": flowSeconds ? `${flowSeconds}s` : \"0s\",\n \"--wlf-drift\": driftSeconds > 0 ? `${driftSeconds}s` : \"0s\",\n } as React.CSSProperties;\n\n return (\n <>\n \n 0 ? \"\" : undefined}\n style={{ ...vars, ...style }}\n onPointerMove={(e) => {\n if (interactive && e.pointerType !== \"touch\") {\n const r = e.currentTarget.getBoundingClientRect();\n setFocus(\n ((e.clientX - r.left) / r.width) * 100,\n ((e.clientY - r.top) / r.height) * 100\n );\n }\n onPointerMove?.(e);\n }}\n onPointerLeave={(e) => {\n if (interactive) setFocus(origin.x, origin.y);\n onPointerLeave?.(e);\n }}\n {...spanProps}\n >\n {text}\n \n \n );\n}\n\n/* ─── Styles ─────────────────────────────────────────────────────────── */\n\nconst STYLES = `\n@property --wlf-phase {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n@property --wlf-dx {\n syntax: \"\";\n inherits: false;\n initial-value: 0%;\n}\n@property --wlf-dy {\n syntax: \"\";\n inherits: false;\n initial-value: 0%;\n}\n@property --wlf-fx {\n syntax: \"\";\n inherits: false;\n initial-value: -15%;\n}\n@property --wlf-fy {\n syntax: \"\";\n inherits: false;\n initial-value: 130%;\n}\n\n.wlf {\n --wlf-o: calc(var(--wlf-phase) * var(--wlf-pitch));\n --wlf-w: calc(var(--wlf-pitch) * var(--wlf-weight));\n /* Half a pixel of feather keeps curved lines smooth instead of stair-stepped. */\n --wlf-aa: 0.6px;\n\n display: inline-block;\n white-space: pre-line;\n background-image: repeating-radial-gradient(\n circle at calc(var(--wlf-fx) + var(--wlf-dx)) calc(var(--wlf-fy) + var(--wlf-dy)),\n transparent calc(var(--wlf-o) - var(--wlf-aa)),\n currentColor var(--wlf-o),\n currentColor calc(var(--wlf-o) + var(--wlf-w)),\n transparent calc(var(--wlf-o) + var(--wlf-w) + var(--wlf-aa)),\n transparent calc(var(--wlf-o) + var(--wlf-pitch) - var(--wlf-aa))\n );\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n /* The pointer moves the focal point; the transition makes the lines re-wrap smoothly. */\n transition: --wlf-fx 900ms cubic-bezier(0.22, 1, 0.36, 1), --wlf-fy 900ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.wlf[data-flow] {\n animation: wlf-flow var(--wlf-flow) linear infinite;\n}\n.wlf[data-drift] {\n animation: wlf-drift var(--wlf-drift) ease-in-out infinite alternate;\n}\n.wlf[data-flow][data-drift] {\n animation:\n wlf-flow var(--wlf-flow) linear infinite,\n wlf-drift var(--wlf-drift) ease-in-out infinite alternate;\n}\n\n/* Rings travel outward by exactly one line per cycle, so the loop is seamless. */\n@keyframes wlf-flow {\n from { --wlf-phase: 0; }\n to { --wlf-phase: 1; }\n}\n\n/* A slow figure-of-eight wander keeps the curvature alive. */\n@keyframes wlf-drift {\n 0% { --wlf-dx: 0%; --wlf-dy: 0%; }\n 25% { --wlf-dx: 14%; --wlf-dy: -18%; }\n 50% { --wlf-dx: 26%; --wlf-dy: 6%; }\n 75% { --wlf-dx: 10%; --wlf-dy: 22%; }\n 100% { --wlf-dx: -8%; --wlf-dy: 4%; }\n}\n\n.wlf::selection {\n -webkit-text-fill-color: currentColor;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wlf { animation: none !important; transition: none; }\n}\n\n@media (forced-colors: active) {\n .wlf {\n background: none;\n -webkit-text-fill-color: CanvasText;\n }\n}\n`;\n" } ], "cssVars": { "theme": { "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)", "font-display": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)", "font-heading": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)", "color-background": "var(--background)", "color-foreground": "var(--foreground)", "color-surface": "var(--surface)", "color-surface-muted": "var(--surface-muted)", "color-border": "var(--border)", "color-border-strong": "var(--border-strong)", "color-muted": "var(--muted)", "color-muted-foreground": "var(--muted-foreground)", "color-ring": "var(--ring)", "color-chili-50": "#fff1ee", "color-chili-100": "#ffe2db", "color-chili-200": "#ffa896", "color-chili-300": "#ff8a73", "color-chili-400": "#f15a45", "color-chili-500": "#cd1c18", "color-chili-600": "#b31614", "color-chili-700": "#9b1313", "color-chili-800": "#6a0d0e", "color-chili-900": "#38000a", "color-chili-950": "#1f0006", "color-primitive-surface-elevated": "var(--primitive-surface-elevated)", "color-primitive-surface-overlay": "var(--primitive-surface-overlay)", "color-primitive-surface-hover": "var(--primitive-surface-hover)", "color-primitive-surface-active": "var(--primitive-surface-active)", "color-primitive-surface-selected": "var(--primitive-surface-selected)", "color-primitive-border-subtle": "var(--primitive-border-subtle)", "color-primitive-ring": "var(--primitive-ring)", "color-primitive-text-secondary": "var(--primitive-text-secondary)", "color-primitive-text-placeholder": "var(--primitive-text-placeholder)", "color-primitive-text-inverse": "var(--primitive-text-inverse)", "color-primitive-destructive": "var(--primitive-destructive)", "color-primitive-destructive-hover": "var(--primitive-destructive-hover)", "color-primitive-destructive-active": "var(--primitive-destructive-active)", "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)", "color-primitive-destructive-surface": "var(--primitive-destructive-surface)", "color-primitive-destructive-border": "var(--primitive-destructive-border)", "color-primitive-success": "var(--primitive-success)", "color-primitive-warning": "var(--primitive-warning)", "color-primitive-info": "var(--primitive-info)", "color-primitive-control-solid": "var(--primitive-control-solid)", "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)", "color-primitive-control-solid-active": "var(--primitive-control-solid-active)", "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)", "color-primitive-chart-1": "var(--primitive-chart-1)", "color-primitive-chart-2": "var(--primitive-chart-2)", "color-primitive-chart-3": "var(--primitive-chart-3)", "color-primitive-chart-4": "var(--primitive-chart-4)", "color-primitive-chart-5": "var(--primitive-chart-5)", "color-primitive-chart-6": "var(--primitive-chart-6)", "radius-primitive": "var(--primitive-radius)", "radius-primitive-control": "var(--primitive-radius-control)", "radius-primitive-control-sm": "var(--primitive-radius-control-sm)", "radius-primitive-surface": "var(--primitive-radius-surface)", "radius-primitive-popup": "var(--primitive-radius-popup)", "radius-primitive-item": "var(--primitive-radius-item)", "font-primitive-sans": "var(--primitive-font-sans)", "font-primitive-display": "var(--primitive-font-display)", "font-primitive-mono": "var(--primitive-font-mono)", "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)", "spacing-primitive-control-height-md": "var(--primitive-control-height-md)", "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)" }, "light": { "background": "#fafafa", "foreground": "#0a0a0a", "surface": "#ffffff", "surface-muted": "#f4f4f5", "border": "rgba(10, 10, 10, 0.08)", "border-strong": "rgba(10, 10, 10, 0.16)", "muted": "#f4f4f5", "muted-foreground": "#52525b", "ring": "#cd1c18", "pattern-fg": "rgba(10, 10, 10, 0.07)", "llb-primary": "#18181b", "llb-primary-fg": "#ffffff", "llb-success": "#1f883d", "llb-error": "#cf222e", "primitive-surface-elevated": "#ffffff", "primitive-surface-overlay": "#ffffff", "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)", "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)", "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)", "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)", "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)", "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)", "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)", "primitive-radius": "0.75rem", "primitive-font-sans": "var(--font-sans)", "primitive-font-display": "var(--font-display)", "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", "primitive-control-solid": "#24292d", "primitive-control-solid-hover": "#2c3237", "primitive-control-solid-active": "#1e2326", "primitive-control-solid-foreground": "#ffffff", "primitive-chart-1": "#2a78d6", "primitive-chart-2": "#1baf7a", "primitive-chart-3": "#eda100", "primitive-chart-4": "#008300", "primitive-chart-5": "#4a3aa7", "primitive-chart-6": "#e34948", "primitive-text-inverse": "#ffffff", "primitive-text-hint": "0.6875rem", "primitive-destructive": "#dc2626", "primitive-destructive-hover": "#b91c1c", "primitive-destructive-active": "#991b1b", "primitive-destructive-foreground": "#ffffff", "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)", "primitive-destructive-border": "rgba(220, 38, 38, 0.45)", "primitive-success": "#047857", "primitive-success-surface": "rgba(4, 120, 87, 0.10)", "primitive-success-border": "rgba(4, 120, 87, 0.45)", "primitive-warning": "#b45309", "primitive-warning-surface": "rgba(180, 83, 9, 0.10)", "primitive-warning-border": "rgba(180, 83, 9, 0.45)", "primitive-info": "#0369a1", "primitive-info-surface": "rgba(3, 105, 161, 0.10)", "primitive-info-border": "rgba(3, 105, 161, 0.45)", "primitive-radius-control": "var(--primitive-radius)", "primitive-radius-control-sm": "min(calc(var(--primitive-radius) * 0.8), 12px)", "primitive-radius-surface": "calc(var(--primitive-radius) * 1.4)", "primitive-radius-popup": "var(--primitive-radius)", "primitive-radius-item": "calc(var(--primitive-radius) * 0.8)", "primitive-control-height-sm": "2rem", "primitive-control-height-md": "2.25rem", "primitive-control-height-lg": "2.5rem", "primitive-shadow-raised": "0 1px 1px -0.5px rgba(10, 10, 10, 0.08), 0 2px 6px -2px rgba(10, 10, 10, 0.08)", "primitive-shadow-overlay": "0 2px 4px -1px rgba(10, 10, 10, 0.06), 0 8px 16px -4px rgba(10, 10, 10, 0.08), 0 16px 32px -8px rgba(10, 10, 10, 0.14)", "primitive-shadow-modal": "0 4px 8px -2px rgba(10, 10, 10, 0.06), 0 16px 32px -8px rgba(10, 10, 10, 0.12), 0 32px 64px -16px rgba(10, 10, 10, 0.2)", "primitive-edge": "rgba(10, 10, 10, 0.1)", "primitive-catchlight": "rgba(10, 10, 10, 0.06)", "primitive-groove-shadow": "rgba(10, 10, 10, 0.08)", "primitive-groove-highlight": "rgba(255, 255, 255, 0.85)", "primitive-shadow-drop": "0 1px 1px -0.5px rgba(10, 10, 10, 0.1), 0 2px 4px -1px rgba(10, 10, 10, 0.06)", "primitive-shadow-recess": "inset 0 2px 3px -1px rgba(10, 10, 10, 0.1)", "primitive-control-face": "var(--primitive-surface-elevated)", "primitive-field-face": "var(--primitive-surface-elevated)", "primitive-well": "rgba(10, 10, 10, 0.045)", "primitive-shadow-well": "inset 0 1px 2px 0 rgba(10, 10, 10, 0.06)", "primitive-tint-hover": "rgba(10, 10, 10, 0.045)", "primitive-tint-press": "rgba(10, 10, 10, 0.06)", "primitive-footer": "color-mix(in srgb, var(--primitive-surface-elevated) 97%, black)", "primitive-overlay-face": "var(--primitive-surface-overlay)", "primitive-frame-face": "color-mix(in srgb, var(--primitive-surface-elevated) 97%, black)", "primitive-z-overlay": "100", "primitive-z-popover": "130", "primitive-z-toast": "140", "primitive-backdrop": "rgba(0, 0, 0, 0.6)", "primitive-motion-fast": "80ms", "primitive-motion-fast-exit": "60ms", "primitive-motion-moderate": "160ms", "primitive-motion-moderate-exit": "120ms", "primitive-motion-slow": "240ms", "primitive-motion-slow-exit": "160ms", "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)" }, "dark": { "background": "#0a0a0b", "foreground": "#f5f5f6", "surface": "#111113", "surface-muted": "#18181b", "border": "rgba(255, 255, 255, 0.08)", "border-strong": "rgba(255, 255, 255, 0.14)", "muted": "#1c1c1f", "muted-foreground": "#a1a1aa", "ring": "#cd1c18", "pattern-fg": "rgba(255, 255, 255, 0.06)", "llb-primary": "#f5f5f6", "llb-primary-fg": "#0a0a0b", "llb-success": "#2da44e", "llb-error": "#f85149", "primitive-surface-elevated": "#0f0f10", "primitive-surface-overlay": "#141415", "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)", "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)", "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)", "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)", "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)", "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)", "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)", "primitive-radius": "0.75rem", "primitive-font-sans": "var(--font-sans)", "primitive-font-display": "var(--font-display)", "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", "primitive-control-solid": "#f5f3ee", "primitive-control-solid-hover": "#ffffff", "primitive-control-solid-active": "#e8e4da", "primitive-control-solid-foreground": "#151719", "primitive-chart-1": "#3987e5", "primitive-chart-2": "#199e70", "primitive-chart-3": "#c98500", "primitive-chart-4": "#008300", "primitive-chart-5": "#9085e9", "primitive-chart-6": "#e66767", "primitive-text-inverse": "#151719", "primitive-text-hint": "0.6875rem", "primitive-destructive": "#e11d2e", "primitive-destructive-hover": "#c1121f", "primitive-destructive-active": "#a4161a", "primitive-destructive-foreground": "#ffffff", "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)", "primitive-destructive-border": "rgba(225, 29, 46, 0.52)", "primitive-success": "#34d399", "primitive-success-surface": "rgba(52, 211, 153, 0.12)", "primitive-success-border": "rgba(52, 211, 153, 0.45)", "primitive-warning": "#fbbf24", "primitive-warning-surface": "rgba(251, 191, 36, 0.12)", "primitive-warning-border": "rgba(251, 191, 36, 0.45)", "primitive-info": "#38bdf8", "primitive-info-surface": "rgba(56, 189, 248, 0.12)", "primitive-info-border": "rgba(56, 189, 248, 0.45)", "primitive-radius-control": "var(--primitive-radius)", "primitive-radius-control-sm": "min(calc(var(--primitive-radius) * 0.8), 12px)", "primitive-radius-surface": "calc(var(--primitive-radius) * 1.4)", "primitive-radius-popup": "var(--primitive-radius)", "primitive-radius-item": "calc(var(--primitive-radius) * 0.8)", "primitive-control-height-sm": "2rem", "primitive-control-height-md": "2.25rem", "primitive-control-height-lg": "2.5rem", "primitive-shadow-raised": "inset 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.5)", "primitive-shadow-overlay": "inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.45), 0 16px 32px -8px rgba(0, 0, 0, 0.65)", "primitive-shadow-modal": "inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 16px 32px -8px rgba(0, 0, 0, 0.55), 0 32px 64px -16px rgba(0, 0, 0, 0.75)", "primitive-edge": "rgba(255, 255, 255, 0.09)", "primitive-catchlight": "rgba(255, 255, 255, 0.16)", "primitive-groove-shadow": "rgba(0, 0, 0, 0.55)", "primitive-groove-highlight": "rgba(255, 255, 255, 0.05)", "primitive-shadow-drop": "0 1px 1px -0.5px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4)", "primitive-shadow-recess": "inset 0 2px 3px -1px rgba(0, 0, 0, 0.5)", "primitive-control-face": "var(--primitive-frame-face)", "primitive-field-face": "var(--primitive-frame-face)", "primitive-well": "rgba(0, 0, 0, 0.35)", "primitive-shadow-well": "inset 0 1px 2px 0 rgba(0, 0, 0, 0.45)", "primitive-tint-hover": "rgba(255, 255, 255, 0.06)", "primitive-tint-press": "rgba(0, 0, 0, 0.2)", "primitive-footer": "color-mix(in srgb, var(--primitive-surface-elevated) 97%, white)", "primitive-overlay-face": "color-mix(in srgb, var(--primitive-surface-overlay) 94%, white)", "primitive-frame-face": "color-mix(in srgb, var(--primitive-surface-elevated) 97%, white)", "primitive-z-overlay": "100", "primitive-z-popover": "130", "primitive-z-toast": "140", "primitive-backdrop": "rgba(0, 0, 0, 0.6)", "primitive-motion-fast": "80ms", "primitive-motion-fast-exit": "60ms", "primitive-motion-moderate": "160ms", "primitive-motion-moderate-exit": "120ms", "primitive-motion-slow": "240ms", "primitive-motion-slow-exit": "160ms", "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)" } }, "css": { "@layer components": { "[data-surface]": { "--surface-tint": "transparent", "border-width": "1px", "border-style": "solid", "border-color": "var(--surface-rim)", "border-top-color": "var(--surface-rim-top)", "background-color": "var(--surface-face)", "background-image": "linear-gradient(var(--surface-tint), var(--surface-tint))", "--tw-shadow": "var(--surface-depth)", "box-shadow": "var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" }, "[data-surface=\"control\"]": { "--surface-face": "var(--primitive-control-face)", "--surface-rim": "var(--primitive-edge)", "--surface-rim-top": "var(--primitive-catchlight)", "--surface-depth": "var(--primitive-shadow-drop)" }, "[data-surface=\"field\"]": { "--surface-face": "var(--primitive-field-face)", "--surface-rim": "var(--primitive-edge)", "--surface-rim-top": "var(--primitive-catchlight)", "--surface-depth": "var(--primitive-shadow-drop)" }, "[data-surface=\"fill\"]": { "--surface-face": "var(--primitive-control-solid)", "--surface-rim": "color-mix(in srgb, var(--surface-face) 88%, black)", "--surface-rim-top": "color-mix(in srgb, var(--surface-face) 80%, white)", "--surface-depth": "var(--primitive-shadow-drop)" }, "[data-surface=\"flat\"], [data-surface=\"toggle\"], [data-surface=\"toggle-fill\"]": { "--surface-face": "transparent", "--surface-rim": "transparent", "--surface-rim-top": "transparent", "--surface-depth": "0 0 #0000" }, "[data-surface=\"toggle\"]:is([data-pressed]:not([data-pressed=\"false\"]), [aria-pressed=\"true\"])": { "--surface-face": "var(--primitive-control-face)", "--surface-rim": "var(--primitive-edge)", "--surface-rim-top": "var(--primitive-catchlight)", "--surface-depth": "var(--primitive-shadow-drop)" }, "[data-surface=\"toggle-fill\"]:is([data-pressed]:not([data-pressed=\"false\"]), [aria-pressed=\"true\"])": { "--surface-face": "var(--primitive-control-solid)", "--surface-rim": "color-mix(in srgb, var(--surface-face) 88%, black)", "--surface-rim-top": "color-mix(in srgb, var(--surface-face) 80%, white)", "--surface-depth": "var(--primitive-shadow-drop)" }, "[data-surface=\"well\"]": { "--surface-face": "var(--primitive-well)", "--surface-rim": "transparent", "--surface-rim-top": "transparent", "--surface-depth": "var(--primitive-shadow-well)" }, "[data-surface=\"frame\"]": { "--surface-face": "var(--primitive-frame-face)", "--surface-rim": "var(--primitive-edge)", "--surface-rim-top": "var(--primitive-catchlight)", "--surface-depth": "0 0 #0000" }, "[data-surface=\"panel\"]": { "--surface-face": "var(--primitive-surface-elevated)", "--surface-rim": "var(--primitive-edge)", "--surface-rim-top": "var(--primitive-edge)", "--surface-depth": "var(--primitive-shadow-raised)" }, "[data-surface=\"overlay\"]": { "--surface-face": "var(--primitive-overlay-face)", "--surface-rim": "var(--primitive-edge)", "--surface-rim-top": "var(--primitive-edge)", "--surface-depth": "var(--primitive-shadow-overlay)" }, "[data-surface=\"modal\"]": { "--surface-face": "var(--primitive-surface-elevated)", "--surface-rim": "var(--primitive-edge)", "--surface-rim-top": "var(--primitive-edge)", "--surface-depth": "var(--primitive-shadow-modal)" }, "[data-surface=\"footer\"]": { "--surface-face": "var(--primitive-footer)", "--surface-rim": "transparent", "--surface-rim-top": "transparent", "--surface-depth": "0 0 #0000", "border-width": "0", "background-image": "linear-gradient(to bottom, var(--primitive-groove-shadow) 0 1px, var(--primitive-groove-highlight) 1px 2px)", "background-size": "100% 2px", "background-repeat": "no-repeat", "background-position": "top" }, "@media (hover: hover)": { "[data-surface]:where(button, a[href], summary, label, [role=\"button\"], [role=\"tab\"], [role=\"combobox\"], [role=\"option\"], [role=\"menuitem\"]):where(:not(:disabled, [data-disabled], [aria-disabled=\"true\"])):hover": { "--surface-tint": "var(--primitive-tint-hover)" }, ":is([data-surface=\"control\"], [data-surface=\"field\"]):is([data-pressed]:not([data-pressed=\"false\"]), [aria-pressed=\"true\"]):where(:not(:disabled, [data-disabled], [aria-disabled=\"true\"])):hover": { "--surface-tint": "var(--primitive-tint-hover)" } }, ":is([data-surface=\"control\"], [data-surface=\"field\"]):is([data-pressed]:not([data-pressed=\"false\"]), [aria-pressed=\"true\"])": { "--surface-tint": "var(--primitive-tint-press)", "--surface-rim-top": "var(--surface-rim)", "--surface-depth": "var(--primitive-shadow-recess)" }, ":is([data-surface=\"control\"], [data-surface=\"field\"], [data-surface=\"fill\"], [data-surface=\"toggle\"], [data-surface=\"toggle-fill\"]):is([aria-expanded=\"true\"], [data-popup-open]):not(input, textarea)": { "--surface-tint": "var(--primitive-tint-press)", "--surface-rim-top": "var(--surface-rim)", "--surface-depth": "var(--primitive-shadow-recess)" }, ":is([data-surface=\"control\"], [data-surface=\"field\"], [data-surface=\"fill\"], [data-surface=\"toggle\"], [data-surface=\"toggle-fill\"]):where(button, a[href], summary, [role=\"button\"], [role=\"tab\"]):where(:not(:disabled, [data-disabled], [aria-disabled=\"true\"])):active": { "--surface-tint": "var(--primitive-tint-press)", "--surface-rim-top": "var(--surface-rim)", "--surface-depth": "var(--primitive-shadow-recess)" }, "[data-surface=\"flat\"]:where(button, a[href], summary, [role=\"button\"], [role=\"tab\"]):where(:not(:disabled, [data-disabled], [aria-disabled=\"true\"])):active": { "--surface-tint": "var(--primitive-tint-press)" }, "[data-surface]:is([aria-invalid=\"true\"], :has(> :is(input, textarea)[aria-invalid=\"true\"]))": { "--surface-rim": "var(--primitive-destructive-border)", "--surface-rim-top": "var(--primitive-destructive-border)" }, "[data-surface][data-surface]:is(:disabled, [data-disabled], [aria-disabled=\"true\"])": { "--surface-tint": "transparent", "--surface-rim-top": "var(--surface-rim)", "--surface-depth": "0 0 #0000" }, "[data-groove]": { "flex-shrink": "0", "border-width": "0", "background-image": "linear-gradient(var(--groove-direction, to bottom), var(--primitive-groove-shadow) 0 1px, var(--primitive-groove-highlight) 1px 2px)" }, "[data-groove=\"horizontal\"]": { "height": "2px" }, "[data-groove=\"vertical\"]": { "--groove-direction": "to right", "width": "2px", "align-self": "stretch" }, "[data-carve]": { "background-image": "linear-gradient(to bottom, var(--primitive-groove-shadow) 0 1px, var(--primitive-groove-highlight) 1px 2px)", "background-repeat": "no-repeat", "background-size": "100% 2px" }, "[data-carve=\"top\"]": { "background-position": "top" }, "[data-carve=\"bottom\"]": { "background-position": "bottom" } }, "@layer base": { ":where([data-wensity-primitive])": { "font-family": "var(--primitive-font-sans)" } }, "@utility scrollbar-hidden": { "scrollbar-width": "none", "-ms-overflow-style": "none", "&::-webkit-scrollbar": { "display": "none" } }, "@keyframes wensity-marquee-x": { "from": { "transform": "translate3d(0, 0, 0)" }, "to": { "transform": "translate3d(-50%, 0, 0)" } }, "@keyframes wensity-marquee-x-reverse": { "from": { "transform": "translate3d(-50%, 0, 0)" }, "to": { "transform": "translate3d(0, 0, 0)" } }, "@keyframes wensity-morph-rot-cw": { "from": { "transform": "rotate(0deg)" }, "to": { "transform": "rotate(360deg)" } }, "@keyframes wensity-morph-rot-ccw": { "from": { "transform": "rotate(0deg)" }, "to": { "transform": "rotate(-360deg)" } } }, "docs": "Free Wensity component. Installs to @components/wensity/line-fill-text.tsx. For Pro components and updates, use pnpm dlx wensity@latest add line-fill-text.", "categories": [ "Text Animations", "wensity", "free" ], "meta": { "wensity": { "slug": "line-fill-text", "access": "free", "category": "Text Animations", "kind": "component", "componentUrl": "https://ui.wensity.com/components/line-fill-text", "shadcnUrl": "https://ui.wensity.com/r/line-fill-text", "cliInstall": "pnpm dlx wensity@latest add line-fill-text" } } }