50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T3056,"use client"; import * as React from "react"; import { animate, motion, useMotionValue, useReducedMotion, type Transition, } from "motion/react"; import { cn } from "@/lib/utils"; // YouTube's play button is one `` whose `d` is rewritten frame by frame, // and the shape of that data is the whole trick: the play triangle is split // down x=17 into two sub-paths, each written as a four-corner rounded quad. // The pause icon is the same two quads with different corners, so the morph is // a straight lerp of eight points instead of a path diff — the triangle's left // half straightens into the first bar while its tip unfolds into the second. // // The play numbers below are recovered from the player's own path data: the // corner vertices sit at (7.5, 3) / (7.5, 33) with a 3.93 tangent length, and // the tip is a degenerate corner pair at (33, 18). const ICON_VIEW_BOX = 36; const EPSILON = 1e-4; type Point = readonly [number, number]; type Corner = { readonly point: Point; readonly radius: number }; /** Corners run top-left → bottom-left → bottom-right → top-right. */ type Shape = readonly Corner[]; const PLAY_SHAPES: readonly [Shape, Shape] = [ [ { point: [7.5, 3], radius: 3.93 }, { point: [7.5, 33], radius: 3.93 }, { point: [17, 27.4], radius: 0 }, { point: [17, 8.6], radius: 0 }, ], [ { point: [17, 8.6], radius: 0 }, { point: [17, 27.4], radius: 0 }, { point: [33, 18], radius: 0 }, { point: [33, 18], radius: 0 }, ], ]; const PAUSE_SHAPES: readonly [Shape, Shape] = [ [ { point: [8.5, 4.5], radius: 2.5 }, { point: [8.5, 31.5], radius: 2.5 }, { point: [15.5, 31.5], radius: 2.5 }, { point: [15.5, 4.5], radius: 2.5 }, ], [ { point: [20.5, 4.5], radius: 2.5 }, { point: [20.5, 31.5], radius: 2.5 }, { point: [27.5, 31.5], radius: 2.5 }, { point: [27.5, 4.5], radius: 2.5 }, ], ]; // A morph is only a lerp while both icons keep the same corner count. if ( process.env.NODE_ENV !== "production" && PLAY_SHAPES.some((shape, index) => shape.length !== PAUSE_SHAPES[index].length) ) { throw new Error("play-button: play and pause shapes must share a corner count."); } function lerp(from: number, to: number, progress: number) { return from + (to - from) * progress; } function round(value: number) { return Math.round(value * 100) / 100; } function coords([x, y]: Point) { return `${round(x)} ${round(y)}`; } /** * Offset, as a fraction of the tangent length, that turns a corner fillet into * a true circular arc. `interior` is the angle between the two edges meeting at * the corner; the player's own control points fall out of this exactly. */ function arcControlFraction(interior: number) { return ( 1 - (4 / 3) * Math.tan((Math.PI - interior) / 4) * Math.tan(interior / 2) ); } type Fillet = { entry: Point; control1: Point; control2: Point; exit: Point; }; function filletCorner(previous: Point, corner: Corner, next: Point): Fillet { const [vx, vy] = corner.point; const inX = previous[0] - vx; const inY = previous[1] - vy; const outX = next[0] - vx; const outY = next[1] - vy; const inLength = Math.hypot(inX, inY); const outLength = Math.hypot(outX, outY); // Neighbouring fillets must not overlap, and mid-morph an edge can collapse // to nothing (the play tip is two coincident corners), so clamp before use. const tangent = Math.min(corner.radius, inLength / 2, outLength / 2); const degenerate: Fillet = { entry: corner.point, control1: corner.point, control2: corner.point, exit: corner.point, }; if (tangent <= EPSILON) return degenerate; const ux = inX / inLength; const uy = inY / inLength; const wx = outX / outLength; const wy = outY / outLength; const interior = Math.acos(Math.min(1, Math.max(-1, ux * wx + uy * wy))); // Folded back on itself, or straight through: no corner left to round. if (interior <= EPSILON || interior >= Math.PI - EPSILON) return degenerate; const pull = tangent * arcControlFraction(interior); return { entry: [vx + ux * tangent, vy + uy * tangent], control1: [vx + ux * pull, vy + uy * pull], control2: [vx + wx * pull, vy + wy * pull], exit: [vx + wx * tangent, vy + wy * tangent], }; } function shapeToPath(shape: Shape) { const count = shape.length; const fillets = shape.map((corner, index) => filletCorner( shape[(index + count - 1) % count].point, corner, shape[(index + 1) % count].point, ), ); let path = `M ${coords(fillets[count - 1].exit)}`; for (const fillet of fillets) { path += ` L ${coords(fillet.entry)} C ${coords(fillet.control1)} ${coords( fillet.control2, )} ${coords(fillet.exit)}`; } return `${path} Z`; } function lerpShape(from: Shape, to: Shape, progress: number): Shape { return from.map((corner, index) => ({ point: [ lerp(corner.point[0], to[index].point[0], progress), lerp(corner.point[1], to[index].point[1], progress), ] as Point, radius: lerp(corner.radius, to[index].radius, progress), })); } /** `0` draws the play triangle, `1` draws the pause bars. */ export function playPauseIconPath(progress: number) { const clamped = Math.min(1, Math.max(0, progress)); return PLAY_SHAPES.map((shape, index) => shapeToPath(lerpShape(shape, PAUSE_SHAPES[index], clamped)), ).join(" "); } // The glyph is already on screen and changes shape in place, so it eases in and // out rather than out-only. 200ms is long enough to read the unfold and short // enough to stay under the press. const MORPH_TRANSITION: Transition = { duration: 0.2, ease: [0.65, 0, 0.35, 1], }; // The player's bezel: a disc that leaves the button on every toggle. It exits, // so it eases out, and it runs past the 300ms UI ceiling on purpose — nothing // waits on it, and cutting it short reads as a flicker instead of a pulse. // // It has to ramp in over the first frames instead of arriving at full strength. // On the ghost surface the disc is currentColor against the page, so appearing // at peak in a single frame reads as a flash rather than a ripple. const PULSE_PEAK_OPACITY = 0.14; const PULSE_RAMP = 0.08; const PULSE_TRANSITION: Transition = { duration: 0.5, ease: [0.16, 1, 0.3, 1], times: [0, PULSE_RAMP, 1], }; // Matches the expanding slider's control box: a 24px glyph in a 40px surface. // The icon is sized as a ratio so overriding `--play-button-size` scales both. const SURFACE_SIZE = 40; const ICON_SIZE = 24; const ICON_RATIO = `${(ICON_SIZE / SURFACE_SIZE) * 100}%`; const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect; export type PlayButtonProps = Omit< React.ComponentPropsWithoutRef<"button">, "aria-label" | "children" > & { /** Controlled playing state. */ playing?: boolean; /** Initial playing state for uncontrolled usage. */ defaultPlaying?: boolean; /** Called after the button requests a playing-state change. */ onPlayingChange?: (playing: boolean) => void; /** Diameter in px, also published as `--play-button-size` for CSS overrides. */ size?: number; /** Accessible name while paused. */ playLabel?: string; /** Accessible name while playing. */ pauseLabel?: string; /** Opt into the player's bezel: a disc that expands off the button on every toggle. */ pulseOnToggle?: boolean; /** `ghost` sits on the page; `frosted` is the player's over-video glass. */ surface?: "ghost" | "frosted"; }; export const PlayButton = React.forwardRef( function PlayButton( { playing, defaultPlaying = false, onPlayingChange, size = SURFACE_SIZE, playLabel = "Play", pauseLabel = "Pause", pulseOnToggle = false, surface = "ghost", className, style, type = "button", disabled, onClick, ...props }, ref, ) { const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying); const [pulseKey, setPulseKey] = React.useState(0); const pathRef = React.useRef(null); const shouldReduceMotion = useReducedMotion(); const controlled = playing !== undefined; const isPlaying = controlled ? playing : internalPlaying; const progress = useMotionValue(isPlaying ? 1 : 0); // React must never re-patch `d`, or a toggle would snap to the end state // for a frame before the animation picked it up. Render the mount-time path // for SSR and hand the attribute to the motion value from then on. const initialPath = React.useRef(undefined); initialPath.current ??= playPauseIconPath(isPlaying ? 1 : 0); useIsomorphicLayoutEffect( () => progress.on("change", (value) => { pathRef.current?.setAttribute("d", playPauseIconPath(value)); }), [progress], ); useIsomorphicLayoutEffect(() => { const target = isPlaying ? 1 : 0; if (shouldReduceMotion) { progress.set(target); return; } // Animating the motion value (not a fresh tween) means a double-tap picks // up from wherever the morph currently is instead of jumping. const controls = animate(progress, target, MORPH_TRANSITION); return () => controls.stop(); }, [isPlaying, progress, shouldReduceMotion]); const handleClick = React.useCallback( (event: React.MouseEvent) => { onClick?.(event); if (event.defaultPrevented || disabled) return; const nextPlaying = !isPlaying; if (!controlled) { setInternalPlaying(nextPlaying); } if (pulseOnToggle) { setPulseKey((key) => key + 1); } onPlayingChange?.(nextPlaying); }, [ controlled, disabled, isPlaying, onClick, onPlayingChange, pulseOnToggle, ], ); const frosted = surface === "frosted"; return ( ); }, ); 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://ui.ericts.com/r/play-button.json","proxyUrl":"https://shadcnregistry.com/r/ericts/play-button","itemId":"@ericts/play-button"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/base/ui/play-button.tsx","content":"$53","type":"registry:ui","target":"components/ui/play-button.tsx"}]}]]}],"$L54"]}]

Play Button

Installation

Files

components

Styles