{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sheen", "type": "registry:ui", "title": "Sheen", "description": "A shimmer-sweep button. A white-silver light periodically crosses the face and brightens the rim, settling through a subtle neutral afterglow back to matte. Pure CSS, zero dependencies.", "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/default/buttons/sheen/sheen.tsx", "type": "registry:ui", "target": "components/crucible/sheen.tsx", "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface SheenProps extends React.ComponentPropsWithoutRef<\"button\"> {\n /** Peak color of the light pass, at its brightest. Any CSS color. @default white */\n color?: string;\n /** Color the rim decays through as the pass lingers and fades. @default neutral-400 */\n afterglowColor?: string;\n /** Seconds between the start of each pass. @default 3.5 */\n interval?: number;\n /** Border radius in px. @default 10 */\n radius?: number;\n /** Freeze the animation, holding the current frame. @default false */\n paused?: boolean;\n}\n\n/**\n * Sheen — a shimmer-sweep button on a brushed-metal cap. Pure CSS, zero\n * dependencies. The face is a machined metal plate — a fine brushed grain\n * over a vertical light-to-shadow gradient, capped by a crisp top rim\n * highlight — that reads dimensional at rest. A soft specular highlight\n * periodically crosses it: a blurred, chromatically dispersed ramp (warm\n * silver leading edge → white core → cool blue-white trail) that accelerates\n * through the middle of its travel, with a narrow micro-glint trailing a beat\n * behind, while the rim flashes and settles through a neutral afterglow back\n * to matte. Between passes a faint slow idle sheen drifts across the plate so\n * it never sits fully dead. Honors prefers-reduced-motion by freezing on a\n * designed static rim glow with the idle sheen pinned mid-plate.\n */\nexport function Sheen({\n color = \"#ffffff\",\n afterglowColor = \"#a3a3a3\",\n interval = 3.5,\n radius = 10,\n paused = false,\n className,\n style,\n disabled,\n children,\n ...rest\n}: SheenProps) {\n return (\n \n \n\n {/* Idle sheen: a broad, faint soft-light highlight that slowly drifts\n across the plate so it has life between passes. */}\n \n\n {/* Rim: idle matte border that flashes and cools on every pass. */}\n \n\n {/* Sweep: a soft specular ramp — warm-silver leading edge, narrow white\n core, cool blue-white trail — that crosses the face, with a thinner\n micro-glint trailing it. */}\n \n \n \n \n \n\n {children}\n \n );\n}\n" } ] }