Spotify Icon

52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:Ted0b,"use client" /** * Apple Studio Display–style hero: aluminum frame, glass stack, screen bezel, * camera / “recording” LED, optional built-in demos, and a magnifying macOS dock. * Click the screen (not the dock) to cycle demos unless `screenContent` is set. */ import type { CSSProperties, ReactNode, SVGProps } from "react" import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react" import Image from "next/image" import { IconDownload } from "@tabler/icons-react" import { motion, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue, } from "motion/react" import { cn } from "@/lib/utils" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/registry/default/ui/base-tooltip" // --------------------------------------------------------------------------- // Scene + frame tokens // --------------------------------------------------------------------------- /** Fills the cable-management cutout so the hole reads as depth, not transparency */ const SCENE_BG = "#000000" /** Brush-metal bezel, chamfers, and hardware accents */ const ALUMINUM = { brushLo: "#c2c2c4", brushHi: "#d8d8da", chamfer: "#e8e8ea", bezel: "#000000", cameraDot: "#1a1a1a", led: "#30d158", } /** Outer shell padding; pairs with `R_*` for nested rounded rects */ const FRAME_PX = 5 const R_OUTER = 10 const R_GLASS = 8 const R_SCREEN = 6 /** Black inner frame insets (asymmetric bottom clears “chin” / dock visual) */ const BEZEL = { top: 11, side: 7, bottom: 16 } /** Drop-shadow tint on hover; index aligns with `MODES` / `modeIndex` */ const SCREEN_GLOW = [ "rgba(196, 72, 58, 0.35)", "rgba(88, 140, 220, 0.32)", "rgba(210, 170, 90, 0.3)", "rgba(150, 110, 230, 0.34)", ] as const // --------------------------------------------------------------------------- // Dock icons (inline SVG; Finder uses `useId` for unique gradient IDs) // --------------------------------------------------------------------------- const SpotifyIcon = (props: SVGProps) => ( ) const SafariIcon = (props: SVGProps) => ( ) const AppStoreIcon = (props: SVGProps) => ( ) const DiscordIcon = (props: SVGProps) => ( ) const ClaudeAIIcon = (props: SVGProps) => ( ) const FigmaIcon = (props: SVGProps) => ( ) const GoogleCalendarIcon = (props: SVGProps) => ( ) const ZoomIcon = (props: SVGProps) => ( ) /** macOS Finder tile; gradient IDs must be unique when multiple instances exist */ function FinderDockIcon(props: SVGProps) { const gradId = useId().replaceAll(":", "") return ( ) } /** Left-to-right dock order; `color` seeds each tile’s gradient */ const dockApps = [ { name: "Finder", icon: FinderDockIcon, color: "#0076FF" }, { name: "Google Calendar", icon: GoogleCalendarIcon, color: "#ffffff" }, { name: "Safari", icon: SafariIcon, color: "#ffffff" }, { name: "Claude Code", icon: ClaudeAIIcon, color: "#E96A45" }, { name: "Zoom", icon: ZoomIcon, color: "#0066F7" }, { name: "Figma", icon: FigmaIcon, color: "#ffffff" }, { name: "Spotify", icon: SpotifyIcon, color: "#ffffff" }, { name: "Discord", icon: DiscordIcon, color: "#737DF8" }, { name: "App Store", icon: AppStoreIcon, color: "#ffffff" }, ] as const const STUDIO_DOCK_MAGNET_PX = 118 const STUDIO_DOCK_MAX_EXTRA_SCALE = 0.44 /** Smoothstep curve: 1px baseline → up ~44% larger at cursor, falloff by `STUDIO_DOCK_MAGNET_PX` */ function studioDockScaleFromDistance(distancePx: number): number { const d = Math.abs(distancePx) if (d >= STUDIO_DOCK_MAGNET_PX) { return 1 } const t = 1 - d / STUDIO_DOCK_MAGNET_PX return 1 + STUDIO_DOCK_MAX_EXTRA_SCALE * t * t * (3 - 2 * t) } interface StudioDockContextValue { /** Viewport X from `mousemove`; `Infinity` when pointer left the dock */ mouseX: MotionValue reduceMotion: boolean } const StudioDockContext = createContext(null) function useStudioDock() { const ctx = useContext(StudioDockContext) if (!ctx) { throw new Error("Studio dock context missing") } return ctx } /** Wraps the dock: tracks cursor X and resets to “idle” scale when mouse leaves */ function StudioDock({ children, className, style, ariaLabel, reduceMotion, }: { children: ReactNode className?: string style?: CSSProperties ariaLabel: string reduceMotion: boolean }) { const mouseX = useMotionValue(Number.POSITIVE_INFINITY) const value = useMemo( () => ({ mouseX, reduceMotion }), [mouseX, reduceMotion] ) return ( mouseX.set(Number.POSITIVE_INFINITY)} onMouseMove={(e) => mouseX.set(e.clientX)} style={style} > {children} ) } /** Single dock tile: magnet scale from distance to nav `mouseX`, lift + z-index when enlarged */ function StudioDockIcon({ label, children, showRunningDot, }: { label: string children: ReactNode showRunningDot?: boolean }) { const { mouseX, reduceMotion } = useStudioDock() const ref = useRef(null) const scaleSync = useTransform(mouseX, (mx) => { if (!Number.isFinite(mx)) { return 1 } const el = ref.current if (!el) { return 1 } const b = el.getBoundingClientRect() const dist = mx - b.left - b.width / 2 return studioDockScaleFromDistance(dist) }) const scale = useSpring(scaleSync, { mass: 0.12, stiffness: reduceMotion ? 8000 : 380, damping: reduceMotion ? 160 : 26, }) const y = useTransform(scale, (s) => -Math.max(0, s - 1) * 14) const z = useTransform(scale, (s) => (s > 1.025 ? 10 : 1)) return (

e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()} ref={ref} style={{ scale, y, zIndex: z }} type="button" > {children} } />

{showRunningDot ? ( ) : null}

{label} ) } export type StudioScreenMode = "grading" | "wallpaper" | "photo" | "gradient" export interface AppleStudioDisplayProps { className?: string /** When set, replaces built-in screen demos */ screenContent?: ReactNode /** Initial variant when using built-in content */ initialMode?: StudioScreenMode } /** Fake color grading UI (Resolve-style chrome + scopes placeholder) */ function GradingScreen() { return (

{["File", "Edit", "Trim", "Color", "Fairlight", "Deliver"].map( (t) => ( {t} ) )}

) } /** Full-bleed asset from `/public` */ function WallpaperScreen() { return (

) } /** Abstract multi-stop gradient (no raster) */ function GradientScreen() { return (

) } /** Lightroom-style Develop / Library placeholder */ function PhotoEditScreen() { return (

Develop Library

) } /** Order must match `SCREEN_GLOW` indexing for hover tint */ const MODES: StudioScreenMode[] = ["grading", "wallpaper", "photo", "gradient"] function resolveInitialModeIndex(mode: StudioScreenMode | undefined): number { const resolved = mode ?? "wallpaper" const idx = MODES.indexOf(resolved) return idx >= 0 ? idx : 0 } /** Renders one built-in demo; superseded when parent passes `screenContent` */ function DefaultScreen({ mode }: { mode: StudioScreenMode }) { if (mode === "wallpaper") { return } if (mode === "photo") { return } if (mode === "gradient") { return } return } // --------------------------------------------------------------------------- // Root: layout wrapper + hardware + interactive screen // --------------------------------------------------------------------------- export function AppleProDisplayXDR({ className, screenContent, initialMode = "wallpaper", }: AppleStudioDisplayProps) { const reduceMotion = useReducedMotion() const [modeIndex, setModeIndex] = useState(() => resolveInitialModeIndex(initialMode) ) const [hoverDisplay, setHoverDisplay] = useState(false) const [cameraHot, setCameraHot] = useState(false) // Mimics recording LED: short green pulse on camera-area hover const [ledOn, setLedOn] = useState(false) const prevInitialModeRef = useRef(initialMode) useEffect(() => { // Prop-controlled remount of initial tab when `initialMode` changes externally if (prevInitialModeRef.current !== initialMode) { prevInitialModeRef.current = initialMode setModeIndex(resolveInitialModeIndex(initialMode)) } }, [initialMode]) const mode = MODES[modeIndex] ?? "wallpaper" const glowTint = SCREEN_GLOW[modeIndex % SCREEN_GLOW.length] ?? SCREEN_GLOW[0] const cycleContent = useCallback(() => { if (screenContent) { return } setModeIndex((i) => (i + 1) % MODES.length) }, [screenContent]) const onCameraEnter = useCallback(() => { setCameraHot(true) setLedOn(true) window.setTimeout(() => setLedOn(false), 700) }, []) const onCameraLeave = useCallback(() => { setCameraHot(false) }, []) return (

{/* Display shadow */}

{/* Hover: colored glow tracks current demo (`glowTint` ↔ `MODES`) */} {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: hover tint uses non-interactive hardware wrapper */}

setHoverDisplay(true)} onMouseLeave={() => setHoverDisplay(false)} style={{ transition: "filter 0.25s ease-out", filter: hoverDisplay ? `drop-shadow(0 0 48px ${glowTint}) drop-shadow(0 0 24px ${glowTint})` : undefined, }} >

{/* Brushed aluminum enclosure + inner glass lip */}

{/* Black bezel + panel; asymmetric padding = larger bottom “chin” */}

{/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/noNoninteractiveElementInteractions: decorative LED reaction */}

{screenContent ?? }

{/* Full-area hit target; dock uses pointer-events-auto */}

{/* Contact shadow under display */}

{/* Stand: slim hinge seam, tapered column, foot with rubber feet */}

} /> Cable management

) } export default AppleProDisplayXDR 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":["https://cult-ui.com/r/base-tooltip.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/apple-pro-display-xdr.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]