4f:T2c85,"use client"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { Moon, Sun } from "lucide-react"; import { flushSync } from "react-dom"; import { cn } from "@/lib/utils"; export type TransitionVariant = | "circle" | "square" | "triangle" | "diamond" | "hexagon" | "rectangle" | "star"; export interface ThemeToggleProps extends React.ComponentPropsWithoutRef<"button"> { duration?: number; variant?: TransitionVariant; fromCenter?: boolean; candy?: boolean; theme?: "light" | "dark"; onThemeChange?: (theme: "light" | "dark") => void; } function polygonCollapsed(point: string, vertexCount: number): string { const pairs = Array.from({ length: vertexCount }, () => point).join(", "); return `polygon(${pairs})`; } function getThemeTransitionClipPaths( variant: TransitionVariant, cx: number, cy: number, maxRadius: number, viewportWidth: number, viewportHeight: number, ): [string, string] { const toX = (x: number) => `${(x / viewportWidth) * 100}%`; const toY = (y: number) => `${(y / viewportHeight) * 100}%`; const point = (x: number, y: number) => `${toX(x)} ${toY(y)}`; const toRadius = (r: number) => `${(r / (Math.hypot(viewportWidth, viewportHeight) / Math.SQRT2)) * 100}%`; switch (variant) { case "circle": return [ `circle(0% at ${point(cx, cy)})`, `circle(${toRadius(maxRadius)} at ${point(cx, cy)})`, ]; case "square": { const halfW = Math.max(cx, viewportWidth - cx); const halfH = Math.max(cy, viewportHeight - cy); const halfSide = Math.max(halfW, halfH) * 1.05; const end = [ point(cx - halfSide, cy - halfSide), point(cx + halfSide, cy - halfSide), point(cx + halfSide, cy + halfSide), point(cx - halfSide, cy + halfSide), ].join(", "); return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`]; } case "rectangle": { const w = Math.max(cx, viewportWidth - cx) * 1.05; const h = Math.max(cy, viewportHeight - cy) * 1.05; const end = [ point(cx - w, cy - h), point(cx + w, cy - h), point(cx + w, cy + h), point(cx - w, cy + h), ].join(", "); return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`]; } case "triangle": { const R = maxRadius * 1.5; const start = [ point(cx, cy), point(cx, cy), point(cx, cy), ].join(", "); const end = [ point(cx, cy - R), point(cx + R * Math.cos(Math.PI / 6), cy + R * Math.sin(Math.PI / 6)), point(cx - R * Math.cos(Math.PI / 6), cy + R * Math.sin(Math.PI / 6)), ].join(", "); return [`polygon(${start})`, `polygon(${end})`]; } case "diamond": { const R = maxRadius * 1.1; const end = [ point(cx, cy - R), point(cx + R, cy), point(cx, cy + R), point(cx - R, cy), ].join(", "); return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`]; } case "hexagon": { const R = maxRadius * 1.1; const verts: string[] = []; for (let i = 0; i < 6; i++) { const a = (i * Math.PI) / 3 - Math.PI / 6; verts.push(point(cx + R * Math.cos(a), cy + R * Math.sin(a))); } return [polygonCollapsed(point(cx, cy), 6), `polygon(${verts.join(", ")})`]; } case "star": { const R = maxRadius * 1.25; const innerRatio = 0.42; const starPolygon = (radius: number) => { const verts: string[] = []; for (let i = 0; i < 5; i++) { const outerA = (i * 2 * Math.PI) / 5 - Math.PI / 2; const innerA = outerA + Math.PI / 5; verts.push( point(cx + radius * Math.cos(outerA), cy + radius * Math.sin(outerA)), ); verts.push( point( cx + radius * innerRatio * Math.cos(innerA), cy + radius * innerRatio * Math.sin(innerA), ), ); } return `polygon(${verts.join(", ")})`; }; const startR = Math.max(2, R * 0.025); return [starPolygon(startR), starPolygon(R)]; } default: return [ `circle(0% at ${point(cx, cy)})`, `circle(${toRadius(maxRadius)} at ${point(cx, cy)})`, ]; } } export const ThemeToggle = ({ className, duration = 450, variant, fromCenter = false, candy = false, theme, onThemeChange, ...props }: ThemeToggleProps) => { const shape = variant ?? "circle"; const isControlled = theme !== undefined; const [internalIsDark, setInternalIsDark] = useState(true); const isDark = isControlled ? theme === "dark" : internalIsDark; const buttonRef = useRef(null); const isTransitioningRef = useRef(false); const activeAnimRef = useRef(null); const cancelAnim = useCallback(() => { activeAnimRef.current?.cancel(); activeAnimRef.current = null; }, []); useEffect(() => { return () => { cancelAnim(); const root = document.documentElement; if (root.dataset.magicuiThemeVt !== "active") return; delete root.dataset.magicuiThemeVt; root.style.removeProperty("--magicui-theme-toggle-vt-duration"); root.style.removeProperty("--magicui-theme-vt-clip-from"); }; }, [cancelAnim]); useEffect(() => { if (isControlled) return; const updateTheme = () => { setInternalIsDark(document.documentElement.classList.contains("dark")); }; updateTheme(); const observer = new MutationObserver(updateTheme); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); const handleStorage = (e: StorageEvent) => { if (e.key === "theme") { updateTheme(); } }; window.addEventListener("storage", handleStorage); return () => { observer.disconnect(); window.removeEventListener("storage", handleStorage); }; }, [isControlled]); const toggleTheme = useCallback(() => { const button = buttonRef.current; if ( !button || isTransitioningRef.current || document.documentElement.dataset.magicuiThemeVt === "active" ) return; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; let cx: number; let cy: number; if (fromCenter) { cx = viewportWidth / 2; cy = viewportHeight / 2; } else { const rect = button.getBoundingClientRect(); cx = rect.left + rect.width / 2; cy = rect.top + rect.height / 2; } const maxRadius = Math.hypot( Math.max(cx, viewportWidth - cx), Math.max(cy, viewportHeight - cy), ); const clipPath = getThemeTransitionClipPaths( shape, cx, cy, maxRadius, viewportWidth, viewportHeight, ); const applyTheme = () => { const isCurrentlyDark = document.documentElement.classList.contains("dark"); const nextIsDark = !isCurrentlyDark; if (nextIsDark) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } if (isControlled) { onThemeChange?.(nextIsDark ? "dark" : "light"); } try { localStorage.setItem("theme", nextIsDark ? "dark" : "light"); } catch {} window.dispatchEvent( new StorageEvent("storage", { key: "theme", newValue: nextIsDark ? "dark" : "light", }), ); }; if ( typeof document === "undefined" || !("startViewTransition" in document) || window.matchMedia("(prefers-reduced-motion: reduce)").matches ) { applyTheme(); return; } cancelAnim(); const root = document.documentElement; root.dataset.magicuiThemeVt = "active"; root.style.setProperty( "--magicui-theme-toggle-vt-duration", `${duration}ms`, ); root.style.setProperty("--magicui-theme-vt-clip-from", clipPath[0]); const cleanup = () => { isTransitioningRef.current = false; delete root.dataset.magicuiThemeVt; root.style.removeProperty("--magicui-theme-toggle-vt-duration"); root.style.removeProperty("--magicui-theme-vt-clip-from"); cancelAnim(); }; isTransitioningRef.current = true; const transition = document.startViewTransition(() => { flushSync(applyTheme); }); if (typeof transition?.finished?.finally === "function") { transition.finished.finally(cleanup).catch(() => {}); } else { cleanup(); } const ready = transition?.ready; if (ready && typeof ready.then === "function") { ready .then(() => { const anim = document.documentElement.animate( { clipPath, }, { duration, easing: shape === "star" ? "linear" : "ease-in-out", fill: "forwards", pseudoElement: "::view-transition-new(root)", }, ); activeAnimRef.current = anim; }) .catch(() => {}); } }, [shape, fromCenter, duration, isControlled, onThemeChange, cancelAnim]); const candyClasses = candy ? "relative inline-flex items-center justify-center font-medium leading-none tracking-[0.01em] select-none overflow-hidden cursor-pointer transition-all duration-200 ease-out active:scale-[0.98] active:brightness-95 hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 bg-[radial-gradient(120%_80%_at_50%_70%,#3f3f46_0%,#18181b_100%)] text-zinc-100 border border-white/10 shadow-[0px_4px_20px_-6px_rgba(0,0,0,0.4),inset_0px_1px_3px_0px_rgba(255,255,255,0.25),inset_0px_-2px_4px_0px_rgba(0,0,0,0.2)] hover:shadow-[0px_6px_24px_-4px_rgba(0,0,0,0.5),inset_0px_1px_3px_0px_rgba(255,255,255,0.35),inset_0px_-2px_4px_0px_rgba(0,0,0,0.2)] after:absolute after:top-0 after:left-[15%] after:right-[15%] after:h-px after:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent)] after:pointer-events-none" : ""; return ( ); }; export const AnimatedThemeToggler = ThemeToggle; export default ThemeToggle; 50:T2c85,"use client"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { Moon, Sun } from "lucide-react"; import { flushSync } from "react-dom"; import { cn } from "@/lib/utils"; export type TransitionVariant = | "circle" | "square" | "triangle" | "diamond" | "hexagon" | "rectangle" | "star"; export interface ThemeToggleProps extends React.ComponentPropsWithoutRef<"button"> { duration?: number; variant?: TransitionVariant; fromCenter?: boolean; candy?: boolean; theme?: "light" | "dark"; onThemeChange?: (theme: "light" | "dark") => void; } function polygonCollapsed(point: string, vertexCount: number): string { const pairs = Array.from({ length: vertexCount }, () => point).join(", "); return `polygon(${pairs})`; } function getThemeTransitionClipPaths( variant: TransitionVariant, cx: number, cy: number, maxRadius: number, viewportWidth: number, viewportHeight: number, ): [string, string] { const toX = (x: number) => `${(x / viewportWidth) * 100}%`; const toY = (y: number) => `${(y / viewportHeight) * 100}%`; const point = (x: number, y: number) => `${toX(x)} ${toY(y)}`; const toRadius = (r: number) => `${(r / (Math.hypot(viewportWidth, viewportHeight) / Math.SQRT2)) * 100}%`; switch (variant) { case "circle": return [ `circle(0% at ${point(cx, cy)})`, `circle(${toRadius(maxRadius)} at ${point(cx, cy)})`, ]; case "square": { const halfW = Math.max(cx, viewportWidth - cx); const halfH = Math.max(cy, viewportHeight - cy); const halfSide = Math.max(halfW, halfH) * 1.05; const end = [ point(cx - halfSide, cy - halfSide), point(cx + halfSide, cy - halfSide), point(cx + halfSide, cy + halfSide), point(cx - halfSide, cy + halfSide), ].join(", "); return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`]; } case "rectangle": { const w = Math.max(cx, viewportWidth - cx) * 1.05; const h = Math.max(cy, viewportHeight - cy) * 1.05; const end = [ point(cx - w, cy - h), point(cx + w, cy - h), point(cx + w, cy + h), point(cx - w, cy + h), ].join(", "); return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`]; } case "triangle": { const R = maxRadius * 1.5; const start = [ point(cx, cy), point(cx, cy), point(cx, cy), ].join(", "); const end = [ point(cx, cy - R), point(cx + R * Math.cos(Math.PI / 6), cy + R * Math.sin(Math.PI / 6)), point(cx - R * Math.cos(Math.PI / 6), cy + R * Math.sin(Math.PI / 6)), ].join(", "); return [`polygon(${start})`, `polygon(${end})`]; } case "diamond": { const R = maxRadius * 1.1; const end = [ point(cx, cy - R), point(cx + R, cy), point(cx, cy + R), point(cx - R, cy), ].join(", "); return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`]; } case "hexagon": { const R = maxRadius * 1.1; const verts: string[] = []; for (let i = 0; i < 6; i++) { const a = (i * Math.PI) / 3 - Math.PI / 6; verts.push(point(cx + R * Math.cos(a), cy + R * Math.sin(a))); } return [polygonCollapsed(point(cx, cy), 6), `polygon(${verts.join(", ")})`]; } case "star": { const R = maxRadius * 1.25; const innerRatio = 0.42; const starPolygon = (radius: number) => { const verts: string[] = []; for (let i = 0; i < 5; i++) { const outerA = (i * 2 * Math.PI) / 5 - Math.PI / 2; const innerA = outerA + Math.PI / 5; verts.push( point(cx + radius * Math.cos(outerA), cy + radius * Math.sin(outerA)), ); verts.push( point( cx + radius * innerRatio * Math.cos(innerA), cy + radius * innerRatio * Math.sin(innerA), ), ); } return `polygon(${verts.join(", ")})`; }; const startR = Math.max(2, R * 0.025); return [starPolygon(startR), starPolygon(R)]; } default: return [ `circle(0% at ${point(cx, cy)})`, `circle(${toRadius(maxRadius)} at ${point(cx, cy)})`, ]; } } export const ThemeToggle = ({ className, duration = 450, variant, fromCenter = false, candy = false, theme, onThemeChange, ...props }: ThemeToggleProps) => { const shape = variant ?? "circle"; const isControlled = theme !== undefined; const [internalIsDark, setInternalIsDark] = useState(true); const isDark = isControlled ? theme === "dark" : internalIsDark; const buttonRef = useRef(null); const isTransitioningRef = useRef(false); const activeAnimRef = useRef(null); const cancelAnim = useCallback(() => { activeAnimRef.current?.cancel(); activeAnimRef.current = null; }, []); useEffect(() => { return () => { cancelAnim(); const root = document.documentElement; if (root.dataset.magicuiThemeVt !== "active") return; delete root.dataset.magicuiThemeVt; root.style.removeProperty("--magicui-theme-toggle-vt-duration"); root.style.removeProperty("--magicui-theme-vt-clip-from"); }; }, [cancelAnim]); useEffect(() => { if (isControlled) return; const updateTheme = () => { setInternalIsDark(document.documentElement.classList.contains("dark")); }; updateTheme(); const observer = new MutationObserver(updateTheme); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); const handleStorage = (e: StorageEvent) => { if (e.key === "theme") { updateTheme(); } }; window.addEventListener("storage", handleStorage); return () => { observer.disconnect(); window.removeEventListener("storage", handleStorage); }; }, [isControlled]); const toggleTheme = useCallback(() => { const button = buttonRef.current; if ( !button || isTransitioningRef.current || document.documentElement.dataset.magicuiThemeVt === "active" ) return; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; let cx: number; let cy: number; if (fromCenter) { cx = viewportWidth / 2; cy = viewportHeight / 2; } else { const rect = button.getBoundingClientRect(); cx = rect.left + rect.width / 2; cy = rect.top + rect.height / 2; } const maxRadius = Math.hypot( Math.max(cx, viewportWidth - cx), Math.max(cy, viewportHeight - cy), ); const clipPath = getThemeTransitionClipPaths( shape, cx, cy, maxRadius, viewportWidth, viewportHeight, ); const applyTheme = () => { const isCurrentlyDark = document.documentElement.classList.contains("dark"); const nextIsDark = !isCurrentlyDark; if (nextIsDark) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } if (isControlled) { onThemeChange?.(nextIsDark ? "dark" : "light"); } try { localStorage.setItem("theme", nextIsDark ? "dark" : "light"); } catch {} window.dispatchEvent( new StorageEvent("storage", { key: "theme", newValue: nextIsDark ? "dark" : "light", }), ); }; if ( typeof document === "undefined" || !("startViewTransition" in document) || window.matchMedia("(prefers-reduced-motion: reduce)").matches ) { applyTheme(); return; } cancelAnim(); const root = document.documentElement; root.dataset.magicuiThemeVt = "active"; root.style.setProperty( "--magicui-theme-toggle-vt-duration", `${duration}ms`, ); root.style.setProperty("--magicui-theme-vt-clip-from", clipPath[0]); const cleanup = () => { isTransitioningRef.current = false; delete root.dataset.magicuiThemeVt; root.style.removeProperty("--magicui-theme-toggle-vt-duration"); root.style.removeProperty("--magicui-theme-vt-clip-from"); cancelAnim(); }; isTransitioningRef.current = true; const transition = document.startViewTransition(() => { flushSync(applyTheme); }); if (typeof transition?.finished?.finally === "function") { transition.finished.finally(cleanup).catch(() => {}); } else { cleanup(); } const ready = transition?.ready; if (ready && typeof ready.then === "function") { ready .then(() => { const anim = document.documentElement.animate( { clipPath, }, { duration, easing: shape === "star" ? "linear" : "ease-in-out", fill: "forwards", pseudoElement: "::view-transition-new(root)", }, ); activeAnimRef.current = anim; }) .catch(() => {}); } }, [shape, fromCenter, duration, isControlled, onThemeChange, cancelAnim]); const candyClasses = candy ? "relative inline-flex items-center justify-center font-medium leading-none tracking-[0.01em] select-none overflow-hidden cursor-pointer transition-all duration-200 ease-out active:scale-[0.98] active:brightness-95 hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 bg-[radial-gradient(120%_80%_at_50%_70%,#3f3f46_0%,#18181b_100%)] text-zinc-100 border border-white/10 shadow-[0px_4px_20px_-6px_rgba(0,0,0,0.4),inset_0px_1px_3px_0px_rgba(255,255,255,0.25),inset_0px_-2px_4px_0px_rgba(0,0,0,0.2)] hover:shadow-[0px_6px_24px_-4px_rgba(0,0,0,0.5),inset_0px_1px_3px_0px_rgba(255,255,255,0.35),inset_0px_-2px_4px_0px_rgba(0,0,0,0.2)] after:absolute after:top-0 after:left-[15%] after:right-[15%] after:h-px after:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent)] after:pointer-events-none" : ""; return ( ); }; export const AnimatedThemeToggler = ThemeToggle; export default ThemeToggle; 4:["$","div",null,{"className":"h-screen w-screen bg-background text-foreground transition-colors duration-200 overflow-hidden","children":["$","$Le",null,{"component":{"slug":"file-tree","name":"File Tree","description":"Smooth, interactive file tree component with guide lines, nested folder expansion, selection, and keyboard navigation.","summary":"A clean, high-performance file tree component designed for developer tools, file explorers, IDE sidebars, and hierarchical directory structures. Built with framer-motion layout transitions, pixel-aligned guide lines, smooth chevron rotation, single and multi-selection support, and full keyboard accessibility.","category":"navigation","tags":["file-tree","tree","navigation","directory","explorer","sidebar","motion","interactive"],"dependencies":["clsx","tailwind-merge","motion","lucide-react"],"version":"1.0.0","createdDate":"2026-09-22","updatedDate":"2026-09-22","interactive":true,"supportsColor":false,"highlights":["Smooth height expansion and spring-calibrated chevron rotation","Pixel-aligned vertical guide lines for deep tree hierarchies","Clean borderless design optimized for dark and light theme sidebars","Controlled and uncontrolled node expansion and selection states","Full keyboard accessibility with arrow key folder navigation and Space/Enter selection"],"anatomy":[" (Root container managing tree state, keyboard handlers, and layout)"," (Hierarchical node item rendering chevrons, icons, labels, and children)"],"physics":{"engine":"Framer Motion Layout & Height Transitions","description":"Height expansion curves [0.16, 1, 0.3, 1] with 150ms chevron rotation.","parameters":[{"label":"Height Expansion","value":"200ms cubic-bezier(0.16, 1, 0.3, 1)"},{"label":"Chevron Rotation","value":"150ms ease-in-out"},{"label":"Row Hover Feedback","value":"150ms transition-colors"},{"label":"Indentation Step","value":"16px default pitch"}]},"accessibility":{"role":"tree","aria":"Uses role='tree' and role='treeitem' with live aria-expanded and aria-selected state management.","reducedMotion":"Instantaneous node expansion without motion delay when prefers-reduced-motion is active.","keyboard":[{"key":"ArrowRight","description":"Expand focused folder node."},{"key":"ArrowLeft","description":"Collapse focused folder node."},{"key":"Enter / Space","description":"Select focused node or toggle folder state."}]},"guidelines":{"recommended":["IDE sidebars, project file browsers, and file manager interfaces","Hierarchical documentation tables of contents and nested category trees","Directory structure visualization in developer toolkits"],"bestPractices":["Set expandOnFolderClick=true for intuitive folder opening experience","Provide unique id properties for each node in the data tree","Use showLines=true to aid visual depth tracking in multi-level trees"]},"props":[{"name":"data","type":"TreeNode[]","required":true,"description":"Array of tree nodes representing files, folders, and nested children."},{"name":"showLines","type":"boolean","defaultValue":"true","description":"Render vertical guide lines for visual depth tracking."},{"name":"showIcons","type":"boolean","defaultValue":"true","description":"Display folder and file icons next to node labels."},{"name":"selectable","type":"boolean","defaultValue":"true","description":"Enable node selection on click."},{"name":"multiSelect","type":"boolean","defaultValue":"false","description":"Allow selecting multiple nodes with Ctrl/Cmd key."},{"name":"indent","type":"number","defaultValue":"16","description":"Indentation width in pixels per level."},{"name":"animateExpand","type":"boolean","defaultValue":"true","description":"Enable smooth motion animation during folder expansion."}],"files":[{"name":"file-tree.tsx","path":"registry/ui/file-tree.tsx","code":"$f","content":"$10","type":"registry:ui","target":"@ui/file-tree.tsx"}],"type":"registry:ui","$schema":"https://ui.shadcn.com/schema/registry-item.json","title":"File Tree"},"allComponents":[{"slug":"scales","name":"Scales & Borders","description":"Symmetric repeating linear gradient borders and geometric scale dividers.","summary":"Technical boundary elements and geometric scale dividers engineered to replace generic horizontal rules with architectural, sci-fi, and developer console aesthetics. Built entirely with pure CSS repeating linear gradients (315deg angle with 14px pitch and 1px sub-pixel line calibration) and theme-driven CSS custom properties (--pattern-line, --pattern), delivering high-density boundary aesthetics with zero JavaScript runtime overhead.","category":"scales","tags":["borders","scales","divider","linear-gradient","geometric","pattern"],"dependencies":["clsx","tailwind-merge"],"version":"1.0.0","createdDate":"2026-09-10","updatedDate":"2026-09-10","interactive":true,"supportsColor":false,"highlights":["Pure CSS repeating-linear-gradient shader rendering with zero JavaScript overhead","Zero cumulative layout shift (CLS 0.0) with GPU-accelerated compositing","Three specialized geometric layout variants: HorizontalScale, VerticalScale, and Lines","Themeable token variables (--pattern-line, --pattern) for seamless light/dark adaptation","Sub-pixel calibrated 14px repeating tile pitch with 1px hairline boundary strokes"],"anatomy":[" (40px horizontal ribbon with diagonal 315° repeating hatch marks)"," (40px vertical divider with diagonal 315° repeating hatch marks)"," (56px horizontal scanline guide with high-density repeating lines)"],"physics":{"engine":"CSS Repeating Gradient Shader","description":"Zero-runtime GPU rasterized gradient stripes calculated via repeating linear-gradient geometry without layout repaints.","parameters":[{"label":"Shader Angle","value":"315deg diagonal"},{"label":"Tile Pitch","value":"14px × 14px repeat"},{"label":"Hairline Weight","value":"1px stroke (var(--pattern-line))"},{"label":"Horizontal Height","value":"40px (h-10)"},{"label":"Lines Height","value":"56px (h-14)"},{"label":"Runtime Overhead","value":"0ms / Pure CSS"}]},"accessibility":{"role":"separator","aria":"aria-hidden='true' when purely decorative, or role='separator' with aria-orientation when separating semantic document regions.","reducedMotion":"Static CSS background gradient pattern; completely unaffected by motion preferences."},"guidelines":{"recommended":["Technical panel dividers in developer tools, IDE views, and engineering dashboards","Header and footer section breaks in technical documentation sites","Visual framing boundaries around code editors, telemetry viewers, and terminal displays"],"bestPractices":["Define --pattern-line and --pattern in your theme root for consistent contrast across light and dark modes","Use VerticalScale inside flex containers with h-full for crisp column separation","Apply h-auto or custom height classes to adapt the scale to your layout grid"]},"props":[{"name":"className","type":"string","defaultValue":"undefined","description":"Additional CSS classes to customize dimensions, border colors, or pattern line token overrides."}],"files":[{"name":"scales.tsx","path":"registry/ui/scales.tsx","code":"$11","content":"$12","type":"registry:ui","target":"@ui/scales.tsx"}],"type":"registry:ui","$schema":"https://ui.shadcn.com/schema/registry-item.json","title":"Scales & Borders"},{"slug":"animated-button","name":"Animated Button","description":"Multi-variant interactive button with shimmering effects and micro-interactions.","summary":"A high-impact call-to-action button supporting four distinct visual styles (primary, secondary, outline, and shimmer). Engineered with fluid cubic-bezier micro-interactions, hardware-accelerated transform scaling on active press (scale-[0.96]), an automated looping CSS keyframe linear gradient shimmer sweep, and dynamic icon translation with group-hover mechanics.","category":"buttons","tags":["button","shimmer","interaction","animation","cta","micro-interactions"],"dependencies":["clsx","tailwind-merge","@radix-ui/react-icons"],"version":"1.0.0","createdDate":"2026-09-10","updatedDate":"2026-09-10","interactive":true,"supportsColor":true,"highlights":["Four production-ready visual variants tuned for dark-mode interfaces","Infinite 2-second linear-gradient shimmer light sweep with zero CPU overhead","Tactile cubic-bezier timing curve (cubic-bezier(0.16, 1, 0.3, 1)) for snappy feedback","Forwarded ref support with full HTML button attribute inheritance","Automatic hover translation on accessory directional icons with group-hover"],"anatomy":["