{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "kindle", "type": "registry:ui", "title": "Kindle", "description": "A cursor-following radial spotlight card — a soft white glow that breathes gently and brightens the nearest border edge as it passes. Pure CSS, works with arbitrary children; a dimmed ghost spotlight wanders the card when untouched.", "dependencies": [], "registryDependencies": [ "https://crucibleui.com/r/use-reduced-motion.json", "https://crucibleui.com/r/use-visibility-pause.json" ], "files": [ { "path": "registry/default/cards/kindle/kindle.tsx", "type": "registry:ui", "target": "components/crucible/kindle.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { useVisibilityPause } from \"@/hooks/use-visibility-pause\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface KindleProps extends React.ComponentPropsWithoutRef<\"div\"> {\n /** Arbitrary card content. */\n children: React.ReactNode;\n /** Core color of the spotlight, any CSS color. @default soft white */\n color?: string;\n /** Outer rim / haze color, any CSS color. @default faint white */\n rimColor?: string;\n /** Spotlight radius in px. @default 240 */\n radius?: number;\n /** Brighten the border segment nearest the cursor. @default true */\n borderGlow?: boolean;\n /**\n * Idle autoplay: after 1.5s with no pointer on the card, a dimmed ghost\n * spotlight wanders the face on a slow Lissajous path. A real pointer takes\n * over instantly. Off under reduced motion; sleeps offscreen. @default true\n */\n idle?: boolean;\n}\n\nconst IDLE_MS = 1500;\n\n/** Stable per-instance phase from React's id, so sibling cards never ghost in lockstep. */\nfunction idPhase(id: string): number {\n let h = 2166136261;\n for (let i = 0; i < id.length; i++) h = Math.imul(h ^ id.charCodeAt(i), 16777619);\n return ((h >>> 0) / 4294967296) * Math.PI * 2;\n}\n\n/**\n * Kindle — a cursor-following radial spotlight card. A hot white core rides\n * inside a wider signature-hue halo and a faint conic sheen; the light tracks\n * the pointer with an eased lag and the nearest border segment blooms under\n * it. At rest the card is alive — a top-lit machined bevel, a slow breathing\n * glow, and a sheen that drifts across the face — so it never reads as a dead\n * slab. Low-opacity grain kills banding for a shader-grade surface.\n * Pure CSS + a lightweight pointer listener; works with arbitrary children.\n * Untouched, a dimmed ghost spotlight wanders the face (`idle`) until a real\n * pointer takes over. Freezes to a designed, legible static glow under\n * `prefers-reduced-motion`.\n */\nexport function Kindle({\n children,\n className,\n style,\n color = \"rgba(255,255,255,0.55)\",\n rimColor = \"rgba(255,255,255,0.3)\",\n radius = 240,\n borderGlow = true,\n idle = true,\n ...props\n}: KindleProps) {\n const reducedMotion = useReducedMotion();\n const hoverRef = React.useRef(false);\n const lastPointerRef = React.useRef(0);\n const ghostRef = React.useRef({ on: false, since: 0 });\n const phase = idPhase(React.useId());\n\n // Ghost driver: positions the spotlight on a slow Lissajous path. Its\n // presence fades in/out through CSS opacity transitions on data-hover=\"ghost\".\n // The observed element, mirrored for the rAF tick (set after commit).\n const elRef = React.useRef(null);\n const nodeRef = useVisibilityPause(\n (elapsed) => {\n const node = elRef.current;\n const g = ghostRef.current;\n if (!node || hoverRef.current) return;\n const want = performance.now() - lastPointerRef.current > IDLE_MS;\n if (want !== g.on) {\n g.on = want;\n node.setAttribute(\"data-hover\", want ? \"ghost\" : \"false\");\n }\n if (!want) return;\n const x = 50 + 34 * Math.sin(elapsed * 0.37 + phase);\n const y = 42 + 30 * Math.sin(elapsed * 0.26 + phase * 1.7 + 1.3);\n node.style.setProperty(\"--kindle-x\", `${x.toFixed(2)}%`);\n node.style.setProperty(\"--kindle-y\", `${y.toFixed(2)}%`);\n },\n { paused: !idle || reducedMotion }\n );\n\n React.useEffect(() => {\n elRef.current = nodeRef.current;\n });\n\n // Arm the idle clock at mount (the ghost waits 1.5s before appearing).\n React.useEffect(() => {\n lastPointerRef.current = performance.now();\n }, []);\n\n const handlePointerMove = React.useCallback(\n (event: React.PointerEvent) => {\n if (reducedMotion) return;\n const node = nodeRef.current;\n if (!node) return;\n lastPointerRef.current = performance.now();\n if (!hoverRef.current) {\n hoverRef.current = true;\n ghostRef.current.on = false;\n node.setAttribute(\"data-hover\", \"true\");\n }\n const rect = node.getBoundingClientRect();\n const x = ((event.clientX - rect.left) / rect.width) * 100;\n const y = ((event.clientY - rect.top) / rect.height) * 100;\n node.style.setProperty(\"--kindle-x\", `${x.toFixed(2)}%`);\n node.style.setProperty(\"--kindle-y\", `${y.toFixed(2)}%`);\n },\n [reducedMotion, nodeRef]\n );\n\n const handlePointerEnter = React.useCallback(() => {\n if (reducedMotion) return;\n hoverRef.current = true;\n ghostRef.current.on = false;\n lastPointerRef.current = performance.now();\n nodeRef.current?.setAttribute(\"data-hover\", \"true\");\n }, [reducedMotion, nodeRef]);\n\n const handlePointerLeave = React.useCallback(() => {\n hoverRef.current = false;\n ghostRef.current.on = false;\n lastPointerRef.current = performance.now();\n nodeRef.current?.setAttribute(\"data-hover\", \"false\");\n }, [nodeRef]);\n\n return (\n \n \n
\n
\n
\n
\n
\n
\n {borderGlow &&
}\n
{children}
\n
\n );\n}\n" } ] }