4e:T4d66,"use client"; import React, { useRef, useCallback, useEffect } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; import { cn } from "@/lib/utils"; if (typeof window !== "undefined") { gsap.registerPlugin(useGSAP); } export type PixelCardVariant = | "default" | "blue" | "yellow" | "pink" | "purple" | "emerald"; export type PixelCardPattern = "wave" | "matrix" | "scan" | "cross"; export interface PixelCardProps extends React.HTMLAttributes { variant?: PixelCardVariant; pattern?: PixelCardPattern; noise?: number; gap?: number; speed?: number; colors?: string; noFocus?: boolean; enableTilt?: boolean; maxTilt?: number; enableSpotlight?: boolean; spotlightColor?: string; enableGlare?: boolean; children?: React.ReactNode; className?: string; } interface PixelData { x: number; y: number; color: string; size: number; alpha: number; maxSize: number; phase: number; } interface VariantConfig { activeColor: string; spotlight: string; borderColor: string; gap: number; speed: number; colors: string; noFocus: boolean; } const VARIANTS: Record = { default: { activeColor: "rgba(56, 189, 248, 0.08)", spotlight: "rgba(56, 189, 248, 0.07)", borderColor: "rgba(56, 189, 248, 0.25)", gap: 6, speed: 25, colors: "#f8fafc,#cbd5e1,#94a3b8,#38bdf8", noFocus: false, }, blue: { activeColor: "rgba(14, 165, 233, 0.1)", spotlight: "rgba(56, 189, 248, 0.09)", borderColor: "rgba(56, 189, 248, 0.3)", gap: 7, speed: 22, colors: "#e0f2fe,#7dd3fc,#38bdf8,#0ea5e9", noFocus: false, }, yellow: { activeColor: "rgba(234, 179, 8, 0.08)", spotlight: "rgba(250, 204, 21, 0.07)", borderColor: "rgba(250, 204, 21, 0.28)", gap: 6, speed: 20, colors: "#fef08a,#fde047,#facc15,#eab308", noFocus: false, }, pink: { activeColor: "rgba(244, 63, 94, 0.1)", spotlight: "rgba(244, 63, 94, 0.08)", borderColor: "rgba(251, 113, 133, 0.28)", gap: 6, speed: 30, colors: "#fecdd3,#fda4af,#fb7185,#f43f5e", noFocus: true, }, purple: { activeColor: "rgba(168, 85, 247, 0.1)", spotlight: "rgba(192, 132, 252, 0.08)", borderColor: "rgba(192, 132, 252, 0.28)", gap: 6, speed: 24, colors: "#f3e8ff,#d8b4fe,#c084fc,#a855f7", noFocus: false, }, emerald: { activeColor: "rgba(16, 185, 129, 0.1)", spotlight: "rgba(52, 211, 153, 0.08)", borderColor: "rgba(52, 211, 153, 0.28)", gap: 6, speed: 22, colors: "#d1fae5,#6ee7b7,#34d399,#10b981", noFocus: false, }, }; export const PixelCard = React.forwardRef( ( { variant = "default", pattern = "wave", noise = 0, gap, speed, colors, noFocus, enableTilt = true, maxTilt = 6, enableSpotlight = true, spotlightColor, enableGlare = true, className, children, onMouseMove, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }, ref, ) => { const containerRef = useRef(null); const canvasRef = useRef(null); const pixelsRef = useRef([]); const isHoveredRef = useRef(false); const animatingRef = useRef(false); const pointerRef = useRef({ x: 0, y: 0, entryTime: 0, }); const targetPointerRef = useRef({ x: 0, y: 0, }); const rotXRef = useRef(null); const rotYRef = useRef(null); const scaleRef = useRef(null); const isReducedMotion = useRef( typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, ).current; const variantCfg = VARIANTS[variant] || VARIANTS.default; const finalGap = gap ?? variantCfg.gap; const finalSpeed = speed ?? variantCfg.speed; const finalColors = colors ?? variantCfg.colors; const finalNoFocus = noFocus ?? variantCfg.noFocus; const finalSpotlightColor = spotlightColor ?? variantCfg.spotlight; const initPixels = useCallback(() => { const container = containerRef.current; const canvas = canvasRef.current; if (!container || !canvas) return; const rect = container.getBoundingClientRect(); const width = Math.floor(rect.width); const height = Math.floor(rect.height); if (width <= 0 || height <= 0) return; const dpr = Math.min( typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2, ); canvas.width = Math.floor(width * dpr); canvas.height = Math.floor(height * dpr); canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; const ctx = canvas.getContext("2d"); if (!ctx) return; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const step = Math.max(4, parseInt(finalGap.toString(), 10) || 6); const cols = Math.floor(width / step); const rows = Math.floor(height / step); const xOffset = Math.floor((width - (cols - 1) * step) / 2); const yOffset = Math.floor((height - (rows - 1) * step) / 2); const colorList = finalColors .split(",") .map((c) => c.trim()) .filter(Boolean); const pixelGrid: PixelData[] = []; for (let col = 0; col < cols; col++) { for (let row = 0; row < rows; row++) { const x = xOffset + col * step; const y = yOffset + row * step; const color = colorList[Math.floor(Math.random() * colorList.length)] || "#38bdf8"; const maxSize = 1.1 + Math.random() * 1.3; pixelGrid.push({ x, y, color, size: 0, alpha: 0, maxSize, phase: Math.random() * Math.PI * 2, }); } } pixelsRef.current = pixelGrid; }, [finalColors, finalGap]); const tick = useCallback( (time: number, deltaTime: number) => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const width = parseFloat(canvas.style.width) || canvas.width; const height = parseFloat(canvas.style.height) || canvas.height; const isHovered = isHoveredRef.current; const pointer = pointerRef.current; const targetPointer = targetPointerRef.current; pointer.x += (targetPointer.x - pointer.x) * 0.15; pointer.y += (targetPointer.y - pointer.y) * 0.15; const pixels = pixelsRef.current; const dt = Math.min(deltaTime, 33.33); const factor = Math.min(1, 0.12 * (dt / 16.67)); ctx.clearRect(0, 0, width, height); let hasVisiblePixels = false; const elapsed = time - pointer.entryTime; const waveRadius = isReducedMotion ? 99999 : elapsed * 320; const effectiveSpeed = finalSpeed * 0.05; for (let i = 0; i < pixels.length; i++) { const p = pixels[i]; let targetSize = 0; let targetAlpha = 0; if (isHovered) { const dx = p.x - pointer.x; const dy = p.y - pointer.y; const dist = Math.sqrt(dx * dx + dy * dy); if (pattern === "wave") { if (dist <= waveRadius) { const waveIntensity = Math.min( 1, Math.max(0, (waveRadius - dist) / 45), ); const proximity = Math.max(0, 1 - dist / 130); const proximityBoost = proximity * proximity; const harmonicWave = Math.sin(time * effectiveSpeed + p.phase) * 0.5 + 0.5; const pulse = Math.sin(time * (effectiveSpeed * 1.2) - dist * 0.03) * 0.5 + 0.5; targetSize = p.maxSize * waveIntensity * (0.3 + 0.55 * harmonicWave + proximityBoost * 0.65); targetAlpha = Math.min( 1, 0.2 + 0.65 * pulse + proximityBoost * 0.4, ); } } else if (pattern === "matrix") { const colOffset = Math.sin(p.x * 0.08) * 120; const streamY = ((time * (effectiveSpeed * 160) + colOffset) % (height + 120)) - 60; const streamDist = Math.abs(p.y - streamY); const streamIntensity = Math.max(0, 1 - streamDist / 60); const proximity = Math.max(0, 1 - dist / 120); const pulse = Math.sin(time * (effectiveSpeed * 2) + p.phase) * 0.5 + 0.5; targetSize = p.maxSize * (0.2 + 0.8 * streamIntensity + proximity * 0.5); targetAlpha = Math.min( 1, 0.2 + 0.8 * streamIntensity * pulse + proximity * 0.4, ); } else if (pattern === "scan") { const scanAngle = time * (effectiveSpeed * 0.9); const cx = width / 2; const cy = height / 2; const relX = p.x - cx; const relY = p.y - cy; const beamDist = Math.abs( relX * Math.cos(scanAngle) + relY * Math.sin(scanAngle), ); const beamIntensity = Math.max(0, 1 - beamDist / 45); const proximity = Math.max(0, 1 - dist / 120); targetSize = p.maxSize * (0.25 + 0.75 * beamIntensity + proximity * 0.5); targetAlpha = Math.min( 1, 0.2 + 0.8 * beamIntensity + proximity * 0.4, ); } else if (pattern === "cross") { const lineDist = Math.min(Math.abs(dx), Math.abs(dy)); const lineIntensity = Math.max(0, 1 - lineDist / 32); const proximity = Math.max(0, 1 - dist / 130); const pulse = Math.sin(time * (effectiveSpeed * 1.5) - dist * 0.035) * 0.5 + 0.5; targetSize = p.maxSize * (0.25 + 0.75 * lineIntensity + proximity * 0.5); targetAlpha = Math.min( 1, 0.2 + 0.8 * lineIntensity * pulse + proximity * 0.4, ); } if (noise > 0) { const noiseSeed = Math.sin(p.x * 12.9898 + p.y * 78.233 + time * 14) * 43758.5453; const pseudoRand = noiseSeed - Math.floor(noiseSeed); const noiseDelta = (pseudoRand - 0.5) * noise * 1.1; targetSize = Math.max(0, targetSize * (1 + noiseDelta)); targetAlpha = Math.min( 1, Math.max(0, targetAlpha * (1 + noiseDelta * 0.7)), ); } } p.size += (targetSize - p.size) * factor; p.alpha += (targetAlpha - p.alpha) * factor; if (!isHovered && p.size < 0.05) { p.size = 0; p.alpha = 0; } if (p.size > 0.04 && p.alpha > 0.01) { hasVisiblePixels = true; const offset = (p.maxSize - p.size) * 0.5; ctx.globalAlpha = Math.min(1, Math.max(0, p.alpha)); ctx.fillStyle = p.color; ctx.fillRect(p.x + offset, p.y + offset, p.size, p.size); } } if (!isHovered && !hasVisiblePixels) { animatingRef.current = false; gsap.ticker.remove(tick); ctx.clearRect(0, 0, width, height); } }, [finalSpeed, isReducedMotion, noise, pattern], ); const startAnimation = useCallback(() => { if (!animatingRef.current) { animatingRef.current = true; gsap.ticker.add(tick); } }, [tick]); useGSAP( () => { const card = containerRef.current; if (!card) return; if (isReducedMotion || !enableTilt) return; rotXRef.current = gsap.quickTo(card, "rotationX", { duration: 0.45, ease: "power2.out", }); rotYRef.current = gsap.quickTo(card, "rotationY", { duration: 0.45, ease: "power2.out", }); scaleRef.current = gsap.quickTo(card, "scale", { duration: 0.45, ease: "power2.out", }); return () => { rotXRef.current = null; rotYRef.current = null; scaleRef.current = null; animatingRef.current = false; gsap.ticker.remove(tick); }; }, { scope: containerRef, dependencies: [enableTilt, isReducedMotion, tick], }, ); useEffect(() => { initPixels(); const container = containerRef.current; if (!container) return; const observer = new ResizeObserver(() => { initPixels(); }); observer.observe(container); return () => { observer.disconnect(); animatingRef.current = false; gsap.ticker.remove(tick); }; }, [initPixels, tick]); const handleMouseMove = (e: React.MouseEvent) => { const card = containerRef.current; if (!card) return; const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; targetPointerRef.current.x = x; targetPointerRef.current.y = y; card.style.setProperty("--pointer-x", `${x}px`); card.style.setProperty("--pointer-y", `${y}px`); if ( enableTilt && !isReducedMotion && rotXRef.current && rotYRef.current && scaleRef.current ) { const nx = (x - rect.width / 2) / (rect.width / 2); const ny = (y - rect.height / 2) / (rect.height / 2); const clampedX = Math.max(-1, Math.min(1, nx)); const clampedY = Math.max(-1, Math.min(1, ny)); rotXRef.current(-clampedY * maxTilt); rotYRef.current(clampedX * maxTilt); scaleRef.current(1.008); } onMouseMove?.(e); }; const handleMouseEnter = (e: React.MouseEvent) => { const card = containerRef.current; if (!card) return; const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; pointerRef.current.x = x; pointerRef.current.y = y; targetPointerRef.current.x = x; targetPointerRef.current.y = y; pointerRef.current.entryTime = gsap.ticker.time; isHoveredRef.current = true; card.style.setProperty("--pointer-x", `${x}px`); card.style.setProperty("--pointer-y", `${y}px`); card.style.setProperty("--spotlight-opacity", "1"); startAnimation(); onMouseEnter?.(e); }; const handleMouseLeave = (e: React.MouseEvent) => { isHoveredRef.current = false; const card = containerRef.current; if (card) { card.style.setProperty("--spotlight-opacity", "0"); } if ( enableTilt && !isReducedMotion && rotXRef.current && rotYRef.current && scaleRef.current ) { rotXRef.current(0); rotYRef.current(0); scaleRef.current(1); } onMouseLeave?.(e); }; const handleFocus = (e: React.FocusEvent) => { if ( finalNoFocus || (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node)) ) { return; } const card = containerRef.current; if (card) { const rect = card.getBoundingClientRect(); const cx = rect.width / 2; const cy = rect.height / 2; pointerRef.current.x = cx; pointerRef.current.y = cy; targetPointerRef.current.x = cx; targetPointerRef.current.y = cy; pointerRef.current.entryTime = gsap.ticker.time; card.style.setProperty("--pointer-x", `${cx}px`); card.style.setProperty("--pointer-y", `${cy}px`); card.style.setProperty("--spotlight-opacity", "1"); } isHoveredRef.current = true; startAnimation(); onFocus?.(e); }; const handleBlur = (e: React.FocusEvent) => { if ( finalNoFocus || (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node)) ) { return; } const card = containerRef.current; if (card) { card.style.setProperty("--spotlight-opacity", "0"); } isHoveredRef.current = false; onBlur?.(e); }; return (

{ containerRef.current = node; if (typeof ref === "function") { ref(node); } else if (ref) { ref.current = node; } }} tabIndex={finalNoFocus ? -1 : 0} onMouseMove={handleMouseMove} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onFocus={finalNoFocus ? undefined : handleFocus} onBlur={finalNoFocus ? undefined : handleBlur} className={cn( "group relative isolate flex flex-col items-center justify-center overflow-hidden rounded-2xl border border-white/8 bg-black/80 text-zinc-100 select-none", "transition-[border-color,box-shadow] duration-500 hover:border-white/20 hover:shadow-2xl hover:shadow-black/60", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-black", "transform-3d will-change-transform", className, )} {...props} > {enableSpotlight && (

)}

{enableGlare && (

)}

); }, ); PixelCard.displayName = "PixelCard"; export default PixelCard; 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":"mac-slider","name":"Mac Slider","description":"Liquid glass slider with squircle normal map refraction, specular rim sheen, and tactile spring physics.","summary":"A native-feeling macOS slider component built with physics-based liquid glass optics and damped harmonic oscillator springs. Features real-time squircle normal-map displacement, specular edge reflections, and dynamic transparency that shifts from solid white at rest to optical glass when dragged, coupled with responsive track scrubbing, multiple sizes, materials, and keyboard navigation.","category":"apple-ui","tags":["slider","range","liquid-glass","refraction","macos","physics","spring","apple"],"dependencies":["clsx","tailwind-merge","motion"],"version":"1.0.0","createdDate":"2026-09-24","updatedDate":"2026-09-24","interactive":true,"supportsColor":false,"highlights":["Ultra-smooth pointer-capture tracking with zero-latency MotionValue synchronization","Real-time squircle normal-map refraction distortion using SVG feDisplacementMap","Dynamic specular lighting highlights along the 16px convex squircle lens bezel","Damped harmonic spring dynamics (stiffness: 400, damping: 30) for tactile drag expansion","Fluid state morphing from solid white pill at rest to translucent liquid glass under drag","Accurate sub-pixel track fill tracking the exact optical center of the thumb","Three size variants (sm, md, lg) and three glass materials (liquid, frosted, clear)","Seven color themes including macOS System Blue, Emerald, Violet, Amber, Rose, Cyan, and Graphite","Full keyboard accessibility with Arrow keys, PageUp/Down, Home, End, and ARIA slider semantics","Live interactive parameter sliders driven by MotionValues with zero React re-render overhead"],"anatomy":[" (Track shell with role=\"slider\", ARIA value attributes, and focus ring)"," (Active progress fill bar tracking thumb center)"," (Scoped SVG filter with normal map, feGaussianBlur, feDisplacementMap, feSpecularLighting, feColorMatrix)"," (Draggable thumb pill with spring-driven scale, liquid background, and specular sheen)"],"physics":{"engine":"Harmonic Damped Spring Oscillator & SVG Refraction Shader","description":"Analytical spring integration driving scale expansion, backdrop opacity, and track seek animations, coupled with GPU-accelerated displacement mapping.","parameters":[{"label":"Rest Scale","value":"0.6 (54px × 36px)"},{"label":"Drag Scale","value":"1.0 (90px × 60px)"},{"label":"Scale Stiffness","value":"400"},{"label":"Scale Damping","value":"30"},{"label":"Seek Stiffness","value":"450"},{"label":"Seek Damping","value":"32"},{"label":"Bezel Width","value":"12px - 20px convex squircle"}]},"accessibility":{"role":"slider","aria":"Standard role=\"slider\" with aria-valuenow, aria-valuemin, aria-valuemax, and focus-visible ring.","reducedMotion":"Instant state transitions and graceful settling when motion is reduced.","keyboard":[{"key":"ArrowLeft / ArrowDown","description":"Decrease value by 1 step."},{"key":"ArrowRight / ArrowUp","description":"Increase value by 1 step."},{"key":"PageDown / PageUp","description":"Decrease or increase value by 10 steps."},{"key":"Home / End","description":"Jump to minimum or maximum value."}]},"guidelines":{"recommended":["Audio volume controls, brightness adjustments, and media scrubber interfaces","Control Center style settings panels where authentic macOS tactile feel is desired","Creative tool sliders and shader parameter controllers"],"bestPractices":["Position over visually rich backgrounds to showcase the optical refraction effect","Ensure sufficient contrast between the track background and active progress fill","Provide explicit min, max, and onChange callbacks for controlled state integration"]},"props":[{"name":"value","type":"number","defaultValue":"undefined","description":"Controlled slider value between min and max."},{"name":"defaultValue","type":"number","defaultValue":"10","description":"Initial value for uncontrolled slider usage."},{"name":"min","type":"number","defaultValue":"0","description":"Minimum value of the slider range."},{"name":"max","type":"number","defaultValue":"100","description":"Maximum value of the slider range."},{"name":"step","type":"number","defaultValue":"1","description":"Stepping increment for the slider value."},{"name":"color","type":"\"blue\" | \"emerald\" | \"violet\" | \"amber\" | \"rose\" | \"cyan\" | \"monochrome\"","defaultValue":"\"blue\"","description":"Theme accent color for the active progress bar and ambient glow."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","defaultValue":"\"md\"","description":"Size preset controlling track width, height, and thumb scale."},{"name":"material","type":"\"liquid\" | \"frosted\" | \"clear\"","defaultValue":"\"liquid\"","description":"Glass optical material for the thumb lens."},{"name":"forceActive","type":"boolean","defaultValue":"false","description":"Whether the thumb lens is forcefully expanded."},{"name":"specularOpacity","type":"number","defaultValue":"0.4","description":"Intensity of the specular light reflection (0 - 1)."},{"name":"specularSaturation","type":"number","defaultValue":"6","description":"Specular color saturation multiplier (0 - 50)."},{"name":"refractionLevel","type":"number","defaultValue":"0.28","description":"Refractive normal map displacement factor (0 - 1)."},{"name":"blurLevel","type":"number","defaultValue":"0","description":"Gaussian blur standard deviation in pixels (0 - 40)."},{"name":"onChange","type":"(value: number) => void","defaultValue":"undefined","description":"Callback invoked when the slider value changes."},{"name":"disabled","type":"boolean","defaultValue":"false","description":"Disables interaction with the slider."},{"name":"className","type":"string","defaultValue":"undefined","description":"Additional CSS class names for outer container."}],"files":[{"name":"mac-slider.tsx","path":"registry/ui/mac-slider.tsx","code":"$f","content":"$10","type":"registry:ui","target":"@ui/mac-slider.tsx"}],"type":"registry:ui","$schema":"https://ui.shadcn.com/schema/registry-item.json","title":"Mac Slider"},"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":["