4f: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"] 50: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"] 51:T3baa,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { useEffect, useId, useRef, useState } from "react"; import { DemoFrame } from "../lib/demo-frame"; import { enter, fade, snappy, swap, swapIn, swapOut, swapShown } from "../lib/motion"; import { press } from "../lib/press"; import { Frame, FrameInner } from "./concentric-frame"; // Fixed geometry of the player, mirrored by the guides so they draw the rendered curves. const BORDER = 1; const GROUP_PAD = 4; const BUTTON_H = 36; const GROUP_H = BUTTON_H + GROUP_PAD * 2; const MIN = 2; // the Frame's default inner-radius floor // What computes: outer − padding − border, floored at MIN, never above the outer. const nested = (outer: number, pad: number, border: number) => Math.min(outer, Math.max(MIN, outer - pad - border)); export function ConcentricFrameDemo() { const [radius, setRadius] = useState(24); const [pad, setPad] = useState(10); const [naive, setNaive] = useState(false); const [playing, setPlaying] = useState(true); // Guides show while a thumb is held, while the pointer is over the card, and briefly after keys. const [dragging, setDragging] = useState(false); const [hovering, setHovering] = useState(false); const [pulsing, setPulsing] = useState(false); const pulseTimer = useRef(0); const pulse = (ms = 900) => { setPulsing(true); window.clearTimeout(pulseTimer.current); pulseTimer.current = window.setTimeout(() => setPulsing(false), ms); }; useEffect(() => () => window.clearTimeout(pulseTimer.current), []); useEffect(() => { if (!dragging) return; const up = () => setDragging(false); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); return () => { window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); }; }, [dragging]); const raw = radius - pad - BORDER; const inner = naive ? radius : nested(radius, pad, BORDER); const formula = naive ? "= outer radius" : raw < MIN ? `= max(${MIN}, ${radius} − ${pad} − 1)` : `= ${radius} − ${pad} − 1`; return ( Inner radius px {/* The formula is a bonus; narrow tiles drop it rather than truncate it. */} {formula}

} actions={ { setNaive(v); pulse(1400); }} /> } >

e.pointerType === "mouse" && setHovering(true)} onPointerLeave={() => setHovering(false)} className="relative flex w-full max-w-72 flex-col gap-3 border-line-subtle bg-surface" >

Slow Light

Halden Rowe

2:14 / 3:48

setPlaying((p) => !p)}> {playing ? : }

setDragging(true)} onKey={() => pulse()} /> setDragging(true)} onKey={() => pulse()} />

); } /* ---------- Guides: each corner's arc and centre, so concentricity is visible ---------- */ type Arc = { c: number; r: number }; function Guides({ radius, pad, naive, visible }: { radius: number; pad: number; naive: boolean; visible: boolean }) { // Rendered radii: the browser shrinks any radius past half the box, so the guides do too. const inner = naive ? radius : nested(radius, pad, BORDER); const group = Math.min(inner, GROUP_H / 2); const button = Math.min(naive ? radius : nested(inner, GROUP_PAD, 0), BUTTON_H / 2); // Centres measured from the padding box, which is what this overlay fills. const outer: Arc = { c: radius - BORDER, r: radius }; const top = [outer, { c: pad + inner, r: inner }]; const bottom = [outer, { c: pad + group, r: group }, { c: pad + GROUP_PAD + button, r: button }]; return ( ); } function Corner({ arcs, className }: { arcs: Arc[]; className: string }) { return ( ); } /* ---------- Controls ---------- */ function Slider({ label, min, max, value, onChange, onGrab, onKey, }: { label: string; min: number; max: number; value: number; onChange: (v: number) => void; onGrab: () => void; onKey: () => void; }) { const id = useId(); const pct = (value - min) / (max - min); return (

{label} {value} px

{/* The native range owns input, keys and a11y; its 16px thumb matches the drawn one. */} onChange(Number(e.target.value))} onPointerDown={onGrab} onKeyDown={onKey} className="absolute inset-x-0 top-1/2 z-10 h-11 w-full -translate-y-1/2 cursor-pointer appearance-none bg-transparent opacity-0 [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:border-0 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none" />

{/* A fixed cap plus a scaled run, so the fill ends under the thumb's centre. */}

); } function NaiveSwitch({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) { return ( ); } /* ---------- Rolling digits ---------- */ function RollingNumber({ value }: { value: number }) { const tens = Math.floor(value / 10) % 10; return ( <> {value} ); } function Digit({ digit, hidden = false }: { digit: number; hidden?: boolean }) { return ( ); } /* ---------- Player parts ---------- */ function PlayerButton({ label, primary = false, onClick, children, }: { label: string; primary?: boolean; onClick?: () => void; children: React.ReactNode; }) { return ( {children} ); } function Cover() { const id = useId().replace(/[^\w-]/g, ""); // safe inside url(#…) return ( ); } function SkipIcon({ className = "" }: { className?: string }) { return ( ); } function PlayIcon() { // Drawn ~1.5px right of centre so the triangle reads optically centred. return ( ); } function PauseIcon() { return ( ); } 4e:["$","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","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@eased","registryDependencies":["https://eased.dev/r/concentric-frame.json","https://eased.dev/r/eased-demo-frame.json","https://eased.dev/r/eased-motion.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/eased/concentric-frame/concentric-frame-demo.tsx","content":"$51","type":"registry:example","target":"@components/eased/concentric-frame/concentric-frame-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]