Icon Morph

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7/** Which pair of shapes the icon travels between. */
8export type IconMorphSet = "menu" | "plus" | "play" | "chevron"
9 
10export interface IconMorphProps extends Omit<
11  React.ComponentProps<"svg">,
12  "children"
13> {
14  /** Which pair of shapes to morph between. */
15  set?: IconMorphSet
16  /** `false` shows the first shape, `true` the second. */
17  active?: boolean
18  /** Milliseconds for the morph. Set to `0` to turn it off. */
19  duration?: number
20  /** Stroke weight, in viewBox units. */
21  strokeWidth?: number
22}
23 
24/**
25 * What each `set` travels between, and what `active` means.
26 *
27 * | set       | active false | active true |
28 * | --------- | ------------ | ----------- |
29 * | `menu`    | hamburger    | close       |
30 * | `plus`    | plus         | close       |
31 * | `play`    | play         | pause       |
32 * | `chevron` | chevron      | tick        |
33 */
34 
35/**
36 * Shared by every piece that moves rather than reshapes. The duration is a
37 * custom property set on the root, so one prop reaches every part without
38 * being threaded through them.
39 *
40 * `motion-reduce:transition-none` is a class rather than an inline style on
41 * purpose: an inline `transition` would outrank it and the escape would not
42 * work.
43 */
44const SHIFT =
45  "transition-[transform,opacity] ease-out-quart [transition-duration:var(--icon-morph-duration)] motion-reduce:transition-none"
46 
47/**
48 * SVG transforms resolve against the viewBox once `transform-box` says so.
49 * Firefox and Safari have both shipped a different initial value at some
50 * point, so it is stated rather than assumed.
51 */
52function pose(
53  origin: string,
54  transform?: string,
55  opacity?: number
56): React.CSSProperties {
57  return {
58    transformBox: "view-box",
59    transformOrigin: origin,
60    transform: transform ?? "none",
61    opacity,
62  }
63}
64 
65/**
66 * Quartic ease out. `--ease-out-quart` is the cubic-bezier approximation of
67 * this curve, so driving the tween with the curve itself keeps the reshaping
68 * sets in step with the transforming ones.
69 */
70function easeOutQuart(t: number) {
71  return 1 - (1 - t) ** 4
72}
73 
74function usePrefersReducedMotion() {
75  const [reduced, setReduced] = React.useState(false)
76 
77  React.useEffect(() => {
78    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
79    const read = () => setReduced(query.matches)
80    read()
81    query.addEventListener("change", read)
82    return () => query.removeEventListener("change", read)
83// … truncated