{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "watch-frame", "title": "Watch Frame", "author": "Ballmac ", "description": "A smartwatch drawn in CSS: rounded aluminum case, digital crown and side button, curved glass and a fading strap in sport, loop or leather. The screen is always dark and children render scaled to fit.", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/watch-frame.tsx", "content": "// Ballmac UI: Watch Frame. https://ui.ballmac.com/components/watch-frame\n\"use client\"\n\nimport * as React from \"react\"\nimport { useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Media } from \"@/components/ballmac/media\"\n\ntype WatchFrameProps = Omit, \"children\"> & {\n /** Screen content. Ignored when `src` or `videoSrc` is set. Defaults to a dark screen. */\n children?: React.ReactNode\n /** Finish of the aluminum case. \"auto\" is silver in light mode and black in dark mode. */\n variant?: \"auto\" | \"silver\" | \"black\" | \"gold\"\n /** Strap style and color. */\n band?: \"sport\" | \"loop\" | \"leather\" | \"none\"\n /** Strap color, taken from the theme's chart colors. */\n bandTone?: \"blue\" | \"teal\" | \"orange\" | \"purple\" | \"graphite\" | \"red\"\n /** Image shown on the screen, cropped to fill it. */\n src?: string\n /** Alternative text for `src`. */\n alt?: string\n /** Video shown on the screen: muted, looping, and paused under reduced motion. */\n videoSrc?: string\n /** Poster image for `videoSrc`. */\n poster?: string\n /**\n * Width in CSS pixels that the screen content is laid out at (208 matches a 46 mm watch);\n * it is then scaled to fit. Omit to lay content out at the frame's actual size.\n */\n screenWidth?: number\n /** Class names for the screen element. */\n screenClassName?: string\n}\n\nconst SILVER =\n \"[--wf-hi:color-mix(in_oklch,white_96%,black)] [--wf-mid:color-mix(in_oklch,white_80%,black)] [--wf-lo:color-mix(in_oklch,white_58%,black)]\"\nconst BLACK =\n \"[--wf-hi:color-mix(in_oklch,white_32%,black)] [--wf-mid:color-mix(in_oklch,white_16%,black)] [--wf-lo:color-mix(in_oklch,white_8%,black)]\"\nconst BLACK_DARK =\n \"dark:[--wf-hi:color-mix(in_oklch,white_32%,black)] dark:[--wf-mid:color-mix(in_oklch,white_16%,black)] dark:[--wf-lo:color-mix(in_oklch,white_8%,black)]\"\nconst GOLD =\n \"[--wf-hi:color-mix(in_oklch,var(--chart-3)_35%,white)] [--wf-mid:color-mix(in_oklch,var(--chart-3)_60%,white)] [--wf-lo:color-mix(in_oklch,var(--chart-3)_75%,black)]\"\n\nconst TONES = {\n blue: \"[--wf-band:color-mix(in_oklch,var(--chart-1)_92%,black)]\",\n teal: \"[--wf-band:color-mix(in_oklch,var(--chart-2)_92%,black)]\",\n orange: \"[--wf-band:color-mix(in_oklch,var(--chart-5)_92%,black)]\",\n purple: \"[--wf-band:color-mix(in_oklch,var(--chart-4)_92%,black)]\",\n red: \"[--wf-band:color-mix(in_oklch,var(--destructive)_92%,black)]\",\n graphite: \"[--wf-band:color-mix(in_oklch,white_26%,black)]\",\n}\n\nfunction useScreenScale(screenWidth: number | undefined) {\n const ref = React.useRef(null)\n React.useEffect(() => {\n const screen = ref.current\n if (!screen || !screenWidth) return\n const measure = () => screen.style.setProperty(\"--screen-scale\", String(screen.clientWidth / screenWidth))\n measure()\n const observer = new ResizeObserver(measure)\n observer.observe(screen)\n return () => observer.disconnect()\n }, [screenWidth])\n return ref\n}\n\n/**\n * A smartwatch drawn in CSS: rounded case with a brushed highlight, digital crown, side button, curved glass and a strap\n * that fades out above and below. The screen is always dark. Children render as the screen, laid out at a watch resolution and scaled to fit.\n */\nfunction WatchFrame({\n variant = \"auto\",\n band = \"sport\",\n bandTone = \"graphite\",\n src,\n alt = \"\",\n videoSrc,\n poster,\n screenWidth,\n screenClassName,\n className,\n children,\n ...props\n}: WatchFrameProps) {\n const media = !!(src || videoSrc)\n const viewportRef = useScreenScale(media ? undefined : screenWidth)\n const reduceMotion = !!useReducedMotion()\n const strap = (side: \"top\" | \"bottom\") => (\n \n {band === \"sport\" && side === \"bottom\" && (\n <>\n \n \n \n \n )}\n {band === \"leather\" && }\n \n )\n\n return (\n \n {band !== \"none\" && (\n <>\n {strap(\"top\")}\n {strap(\"bottom\")}\n \n )}\n\n {/* Digital crown and side button */}\n \n \n\n {/* Case */}\n \n
\n \n {media ? (\n videoSrc ? (\n \n ) : (\n // eslint-disable-next-line @next/next/no-img-element\n \n )\n ) : (\n
\n {screenWidth ? (\n \n {children}\n
\n ) : (\n children\n )}\n
\n )}\n {/* Curved glass */}\n \n \n \n \n \n )\n}\n\nexport { WatchFrame, type WatchFrameProps }\n", "type": "registry:ui", "target": "@components/ballmac/watch-frame.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "mockup", "device", "watch", "apple-watch", "wearable", "hero" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " renders children as the watch screen at 208 CSS px wide, scaled to fit. Set the width with className (about w-40).", "whenToUse": [ "Wearable app showcases", "Device lineups next to phone-frame" ], "whenNotToUse": [ "Large UI that needs a normal screen (phone-frame)" ], "composesWith": [ "phone-frame", "tablet-frame", "progress-ring" ], "a11y": [ { "keys": "Static", "action": "Purely visual: no focusable elements from the frame" }, { "keys": "Reduced motion", "action": "Video on the screen is not autoplayed" } ], "customization": [ "variant: auto | silver | black | gold", "band: sport | loop | leather | none", "bandTone: blue | teal | orange | purple | graphite | red", "screenWidth: virtual width in CSS px", "src/alt or videoSrc/poster instead of children" ] }, "examples": [ "watch-frame-demo", "watch-frame-workout" ], "url": "https://ui.ballmac.com/components/watch-frame" }, "categories": [ "devices" ], "type": "registry:ui" }