@readdy/anim 0.0.21

package/animations/button/bubble-button/index.js

@@ -0,0 +1,317 @@
+import './style.css'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { buildAnimClass, buildAnimDomId, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('bubble-button')
+
+const CSS_CLASS = buildAnimClass('bubble-button')
+const ACTIVE_CLASS = buildAnimClass('bubble-button-active')
+const HOVER_CLASS = buildAnimClass('bubble-button-hover')
+const FALLBACK_CLASS = buildAnimClass('bubble-button-fallback')
+const CONTAINER_CLASS = buildAnimClass('bubble-button-container')
+const EFFECT_CONTAINER_CLASS = buildAnimClass('bubble-button-effect-container')
+const EFFECT_BUTTON_CLASS = buildAnimClass('bubble-button-effect-button')
+const CIRCLE_CLASS = buildAnimClass('bubble-button-circle')
+const FILTER_ID = buildAnimDomId('bubble-goo')
+const FILTER_ROOT_ID = buildAnimDomId('bubble-goo-root')
+
+const stateMap = new WeakMap()
+let gooFilterRefCount = 0
+
+function ensureGooFilter() {
+  gooFilterRefCount += 1
+  if (document.getElementById(FILTER_ID)) {
+    return
+  }
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.id = FILTER_ROOT_ID
+  svg.setAttribute('aria-hidden', 'true')
+  svg.style.position = 'absolute'
+  svg.style.width = '0'
+  svg.style.height = '0'
+  svg.style.pointerEvents = 'none'
+
+  svg.innerHTML = `
+    <defs>
+      <filter id="${FILTER_ID}">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+        <feColorMatrix
+          in="blur"
+          mode="matrix"
+          values="
+            1 0 0 0 0
+            0 1 0 0 0
+            0 0 1 0 0
+            0 0 0 19 -9
+          "
+          result="goo"
+        />
+        <feComposite in="SourceGraphic" in2="goo" />
+      </filter>
+    </defs>
+  `
+
+  document.body.appendChild(svg)
+}
+
+function releaseGooFilter() {
+  gooFilterRefCount = Math.max(gooFilterRefCount - 1, 0)
+  if (gooFilterRefCount === 0) {
+    document.getElementById(FILTER_ROOT_ID)?.remove()
+  }
+}
+
+function createCircle(position, slot) {
+  const circle = document.createElement('span')
+  circle.className = `${CIRCLE_CLASS} ${CIRCLE_CLASS}-${position} ${CIRCLE_CLASS}-${position}-${slot}`
+  return circle
+}
+
+function ensureStructure(el) {
+  let container = el.parentElement
+
+  if (!container?.classList.contains(CONTAINER_CLASS)) {
+    container = document.createElement('span')
+    container.className = CONTAINER_CLASS
+    el.parentNode?.insertBefore(container, el)
+    container.appendChild(el)
+  }
+
+  let effectContainer = container.querySelector(`.${EFFECT_CONTAINER_CLASS}`)
+  if (!effectContainer) {
+    effectContainer = document.createElement('span')
+    effectContainer.className = EFFECT_CONTAINER_CLASS
+    effectContainer.style.filter = `url(#${FILTER_ID})`
+    effectContainer.style.webkitFilter = `url(#${FILTER_ID})`
+
+    effectContainer.appendChild(createCircle('top-left', 1))
+    effectContainer.appendChild(createCircle('top-left', 2))
+    effectContainer.appendChild(createCircle('top-left', 3))
+
+    const effectButton = document.createElement('span')
+    effectButton.className = EFFECT_BUTTON_CLASS
+    effectContainer.appendChild(effectButton)
+
+    effectContainer.appendChild(createCircle('bottom-right', 1))
+    effectContainer.appendChild(createCircle('bottom-right', 2))
+    effectContainer.appendChild(createCircle('bottom-right', 3))
+
+    container.appendChild(effectContainer)
+  }
+
+  return {
+    container,
+    effectContainer,
+    effectButton: effectContainer.querySelector(`.${EFFECT_BUTTON_CLASS}`),
+    circlesTopLeft: Array.from(effectContainer.querySelectorAll(`.${CIRCLE_CLASS}-top-left`)),
+    circlesBottomRight: Array.from(effectContainer.querySelectorAll(`.${CIRCLE_CLASS}-bottom-right`)),
+  }
+}
+
+function setAccent(container, el) {
+  const computed = window.getComputedStyle(el)
+  const backgroundColor = computed.backgroundColor
+  const accent = backgroundColor && backgroundColor !== 'rgba(0, 0, 0, 0)' ? backgroundColor : '#4f6bff'
+  container.style.setProperty('--readdy-anim-bubble-accent', accent)
+}
+
+function clearAnimations(state) {
+  state.animations.forEach((animation) => {
+    animation.cancel()
+  })
+  state.animations = []
+}
+
+function trackAnimation(state, animation) {
+  if (!animation) {
+    return
+  }
+
+  state.animations.push(animation)
+  const forget = () => {
+    state.animations = state.animations.filter((item) => item !== animation)
+  }
+  animation.addEventListener('finish', forget, { once: true })
+  animation.addEventListener('cancel', forget, { once: true })
+}
+
+function clearInlineState(state) {
+  const nodes = [
+    state.effectButton,
+    ...state.circlesTopLeft,
+    ...state.circlesBottomRight,
+  ].filter(Boolean)
+
+  nodes.forEach((node) => {
+    node.style.opacity = ''
+    node.style.transform = ''
+  })
+}
+
+function resetState(state) {
+  clearAnimations(state)
+  state.container.classList.remove(ACTIVE_CLASS)
+  state.container.classList.remove(HOVER_CLASS)
+  clearInlineState(state)
+}
+
+function hasWAAPI() {
+  return typeof Element.prototype.animate === 'function'
+}
+
+function playBurst(state) {
+  const { container, effectButton, circlesTopLeft, circlesBottomRight } = state
+
+  container.classList.remove(ACTIVE_CLASS)
+  void container.offsetWidth
+  container.classList.add(HOVER_CLASS)
+  container.classList.add(ACTIVE_CLASS)
+
+  if (!state.supportsWAAPI) {
+    return
+  }
+
+  clearAnimations(state)
+
+  trackAnimation(
+    state,
+    effectButton?.animate(
+      [
+        { transform: 'translateY(-50%) scaleY(1)', opacity: 1 },
+        { transform: 'translateY(-50%) scaleY(1.1)', opacity: 1, offset: 0.34 },
+        { transform: 'translateY(-50%) scale(1)', opacity: 1 },
+      ],
+      {
+        duration: 1000,
+        easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        fill: 'forwards',
+      }
+    )
+  )
+
+  const topFrames = [
+    [
+      { transform: 'translate(0, 0) rotate(-45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(-25px, -25px) rotate(-45deg) scale(1, 2)', opacity: 1, offset: 0.5 },
+      { transform: 'translate(-19px, -27px) rotate(-45deg) scale(0.2)', opacity: 0.95, offset: 0.58 },
+      { transform: 'translate(-24px, -42px) rotate(-45deg) scale(0)', opacity: 0 },
+    ],
+    [
+      { transform: 'translate(0, 0) rotate(-45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(-25px, -25px) rotate(-45deg) scale(1, 2)', opacity: 1, offset: 0.5 },
+      { transform: 'translate(-35px, -32px) rotate(-45deg) scale(1, 0.8)', opacity: 0.95, offset: 0.58 },
+      { transform: 'translate(-45px, -42px) rotate(-45deg) scale(0.4)', opacity: 0 },
+    ],
+    [
+      { transform: 'translate(0, 0) rotate(-45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(-25px, -25px) rotate(-45deg) scale(1, 2)', opacity: 1, offset: 0.5 },
+      { transform: 'translate(-40px, -19px) rotate(-45deg) scale(0.2)', opacity: 0.95, offset: 0.58 },
+      { transform: 'translate(-55px, -14px) rotate(-45deg) scale(0)', opacity: 0 },
+    ],
+  ]
+
+  const bottomFrames = [
+    [
+      { transform: 'translate(0, 0) rotate(45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(30px, 30px) rotate(45deg) scale(1)', opacity: 1, offset: 0.48 },
+      { transform: 'translate(24px, 33px) rotate(45deg) scale(0.2)', opacity: 0.95, offset: 0.56 },
+      { transform: 'translate(29px, 48px) rotate(45deg) scale(0)', opacity: 0 },
+    ],
+    [
+      { transform: 'translate(0, 0) rotate(45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(30px, 30px) rotate(45deg) scale(1)', opacity: 1, offset: 0.48 },
+      { transform: 'translate(37px, 33px) rotate(45deg) scale(0.8)', opacity: 0.95, offset: 0.56 },
+      { transform: 'translate(44px, 40px) rotate(45deg) scale(0.4)', opacity: 0 },
+    ],
+    [
+      { transform: 'translate(0, 0) rotate(45deg) scale(1)', opacity: 1 },
+      { transform: 'translate(30px, 30px) rotate(45deg) scale(1)', opacity: 1, offset: 0.48 },
+      { transform: 'translate(45px, 24px) rotate(45deg) scale(0.2)', opacity: 0.95, offset: 0.56 },
+      { transform: 'translate(60px, 19px) rotate(45deg) scale(0)', opacity: 0 },
+    ],
+  ]
+
+  circlesTopLeft.forEach((circle, index) => {
+    trackAnimation(
+      state,
+      circle.animate(topFrames[index], {
+        duration: 1200,
+        easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        fill: 'forwards',
+      })
+    )
+  })
+
+  circlesBottomRight.forEach((circle, index) => {
+    trackAnimation(
+      state,
+      circle.animate(bottomFrames[index], {
+        duration: 1100,
+        easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        fill: 'forwards',
+      })
+    )
+  })
+}
+
+export function init(el) {
+  destroy(el)
+  el.classList.add(CSS_CLASS)
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  ensureGooFilter()
+  const structure = ensureStructure(el)
+  setAccent(structure.container, el)
+
+  const state = {
+    ...structure,
+    animations: [],
+    supportsWAAPI: hasWAAPI(),
+    onEnter: () => {},
+    onLeave: () => {},
+  }
+
+  state.onEnter = () => {
+    playBurst(state)
+  }
+
+  state.onLeave = () => {
+    resetState(state)
+  }
+
+  state.container.addEventListener('mouseenter', state.onEnter)
+  state.container.addEventListener('mouseleave', state.onLeave)
+  state.container.classList.toggle(FALLBACK_CLASS, !state.supportsWAAPI)
+  stateMap.set(el, state)
+}
+
+export function destroy(el) {
+  const state = stateMap.get(el)
+  if (state) {
+    state.container.removeEventListener('mouseenter', state.onEnter)
+    state.container.removeEventListener('mouseleave', state.onLeave)
+    resetState(state)
+    releaseGooFilter()
+    stateMap.delete(el)
+  }
+
+  el.classList.remove(CSS_CLASS)
+
+  const container = el.parentElement?.classList.contains(CONTAINER_CLASS) ? el.parentElement : null
+  if (container) {
+    container.classList.remove(ACTIVE_CLASS)
+    container.classList.remove(HOVER_CLASS)
+    container.classList.remove(FALLBACK_CLASS)
+    container.style.removeProperty('--readdy-anim-bubble-accent')
+    if (container.parentNode) {
+      container.parentNode.insertBefore(el, container)
+    } else {
+      container.removeChild(el)
+    }
+    container.remove()
+  }
+}

package/animations/button/bubble-button/react.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect, useRef } from 'react'
+import { init, destroy } from './index.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+
+export function AnimBubbleButton({ children }: { children: React.ReactElement }) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el || prefersReducedMotion()) return
+
+    init(el)
+    return () => {
+      destroy(el)
+    }
+  }, [])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/button/bubble-button/style.css

@@ -0,0 +1,245 @@
+@keyframes readdy-anim-bubble-top-left-1 {
+  0% {
+    transform: translate(0, 0) rotate(-45deg) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(-25px, -25px) rotate(-45deg) scaleY(2);
+    opacity: 1;
+  }
+  58% {
+    transform: translate(-19px, -27px) rotate(-45deg) scale(0.2);
+    opacity: 0.95;
+  }
+  100% {
+    transform: translate(-24px, -42px) rotate(-45deg) scale(0);
+    opacity: 0;
+  }
+}
+
+@keyframes readdy-anim-bubble-top-left-2 {
+  0% {
+    transform: translate(0, 0) rotate(-45deg) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(-25px, -25px) rotate(-45deg) scaleY(2);
+    opacity: 1;
+  }
+  58% {
+    transform: translate(-35px, -32px) rotate(-45deg) scale(1, 0.8);
+    opacity: 0.95;
+  }
+  100% {
+    transform: translate(-45px, -42px) rotate(-45deg) scale(0.4);
+    opacity: 0;
+  }
+}
+
+@keyframes readdy-anim-bubble-top-left-3 {
+  0% {
+    transform: translate(0, 0) rotate(-45deg) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(-25px, -25px) rotate(-45deg) scaleY(2);
+    opacity: 1;
+  }
+  58% {
+    transform: translate(-40px, -19px) rotate(-45deg) scale(0.2);
+    opacity: 0.95;
+  }
+  100% {
+    transform: translate(-55px, -14px) rotate(-45deg) scale(0);
+    opacity: 0;
+  }
+}
+
+@keyframes readdy-anim-bubble-bottom-right-1 {
+  0% {
+    transform: translate(0, 0) rotate(45deg) scale(1);
+    opacity: 1;
+  }
+  48% {
+    transform: translate(30px, 30px) rotate(45deg) scale(1);
+    opacity: 1;
+  }
+  56% {
+    transform: translate(24px, 33px) rotate(45deg) scale(0.2);
+    opacity: 0.95;
+  }
+  100% {
+    transform: translate(29px, 48px) rotate(45deg) scale(0);
+    opacity: 0;
+  }
+}
+
+@keyframes readdy-anim-bubble-bottom-right-2 {
+  0% {
+    transform: translate(0, 0) rotate(45deg) scale(1);
+    opacity: 1;
+  }
+  48% {
+    transform: translate(30px, 30px) rotate(45deg) scale(1);
+    opacity: 1;
+  }
+  56% {
+    transform: translate(37px, 33px) rotate(45deg) scale(0.8);
+    opacity: 0.95;
+  }
+  100% {
+    transform: translate(44px, 40px) rotate(45deg) scale(0.4);
+    opacity: 0;
+  }
+}
+
+@keyframes readdy-anim-bubble-bottom-right-3 {
+  0% {
+    transform: translate(0, 0) rotate(45deg) scale(1);
+    opacity: 1;
+  }
+  48% {
+    transform: translate(30px, 30px) rotate(45deg) scale(1);
+    opacity: 1;
+  }
+  56% {
+    transform: translate(45px, 24px) rotate(45deg) scale(0.2);
+    opacity: 0.95;
+  }
+  100% {
+    transform: translate(60px, 19px) rotate(45deg) scale(0);
+    opacity: 0;
+  }
+}
+
+@keyframes readdy-anim-bubble-core {
+  0% {
+    transform: translateY(-50%) scaleY(1);
+    opacity: 1;
+  }
+  34% {
+    transform: translateY(-50%) scaleY(1.1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
+}
+
+.readdy-anim-bubble-button-container {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  isolation: isolate;
+  --readdy-anim-bubble-accent: #4f6bff;
+}
+
+.readdy-anim-bubble-button-container > .readdy-anim-bubble-button {
+  position: relative;
+  z-index: 2;
+}
+
+.readdy-anim-bubble-button-container > .readdy-anim-bubble-button-effect-container {
+  position: absolute;
+  display: block;
+  width: 200%;
+  height: 400%;
+  top: -150%;
+  left: -50%;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 120ms ease, visibility 120ms ease, transform 100ms ease-out;
+  z-index: 1;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-hover
+  > .readdy-anim-bubble-button-effect-container {
+  opacity: 1;
+  visibility: visible;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-hover:active
+  > .readdy-anim-bubble-button-effect-container {
+  transform: scale(0.95);
+}
+
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-effect-button,
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-circle {
+  position: absolute;
+  background: var(--readdy-anim-bubble-accent);
+}
+
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-circle {
+  width: 14px;
+  height: 14px;
+  border-radius: 15px;
+  opacity: 0;
+}
+
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-circle-top-left-1,
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-circle-top-left-2,
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-circle-top-left-3 {
+  top: 40%;
+  left: 27%;
+}
+
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-circle-bottom-right-1,
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-circle-bottom-right-2,
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-circle-bottom-right-3 {
+  bottom: 40%;
+  right: 27%;
+}
+
+.readdy-anim-bubble-button-container .readdy-anim-bubble-button-effect-button {
+  width: 50%;
+  height: 25%;
+  top: 50%;
+  left: 25%;
+  z-index: 1;
+  transform: translateY(-50%);
+  border-radius: 999px;
+  opacity: 1;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-fallback.readdy-anim-bubble-button-active
+  .readdy-anim-bubble-button-effect-button {
+  animation: readdy-anim-bubble-core 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-fallback.readdy-anim-bubble-button-active
+  .readdy-anim-bubble-button-circle-top-left-1 {
+  animation: readdy-anim-bubble-top-left-1 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-fallback.readdy-anim-bubble-button-active
+  .readdy-anim-bubble-button-circle-top-left-2 {
+  animation: readdy-anim-bubble-top-left-2 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-fallback.readdy-anim-bubble-button-active
+  .readdy-anim-bubble-button-circle-top-left-3 {
+  animation: readdy-anim-bubble-top-left-3 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-fallback.readdy-anim-bubble-button-active
+  .readdy-anim-bubble-button-circle-bottom-right-1 {
+  animation: readdy-anim-bubble-bottom-right-1 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-fallback.readdy-anim-bubble-button-active
+  .readdy-anim-bubble-button-circle-bottom-right-2 {
+  animation: readdy-anim-bubble-bottom-right-2 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.readdy-anim-bubble-button-container.readdy-anim-bubble-button-fallback.readdy-anim-bubble-button-active
+  .readdy-anim-bubble-button-circle-bottom-right-3 {
+  animation: readdy-anim-bubble-bottom-right-3 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-bubble-button-container > .readdy-anim-bubble-button-effect-container {
+    display: none;
+  }
+}

package/animations/button/confetti-button/index.js

@@ -0,0 +1,66 @@
+import './style.css'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('confetti-button')
+
+const CSS_CLASS = buildAnimClass('confetti-button')
+const LAYER_CLASS = buildAnimClass('confetti-layer')
+const PIECE_CLASS = buildAnimClass('confetti-piece')
+const stateMap = new WeakMap()
+
+function createBurst(el, options) {
+  const layer = document.createElement('span')
+  layer.className = LAYER_CLASS
+  el.appendChild(layer)
+
+  const colors = options.colors ?? ['#22d3ee', '#a78bfa', '#f472b6', '#facc15', '#34d399']
+  const pieces = options.pieces ?? 18
+
+  for (let index = 0; index < pieces; index += 1) {
+    const piece = document.createElement('span')
+    piece.className = PIECE_CLASS
+    piece.style.setProperty('--readdy-anim-confetti-x', `${(Math.random() - 0.5) * 180}px`)
+    piece.style.setProperty('--readdy-anim-confetti-y', `${-40 - Math.random() * 90}px`)
+    piece.style.setProperty('--readdy-anim-confetti-rotate', `${Math.random() * 360}deg`)
+    piece.style.setProperty('--readdy-anim-confetti-delay', `${index * 14}ms`)
+    piece.style.background = colors[index % colors.length]
+    layer.appendChild(piece)
+  }
+
+  return window.setTimeout(() => {
+    layer.remove()
+  }, 1100)
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  el.classList.add(CSS_CLASS)
+
+  const onClick = () => {
+    if (prefersReducedMotion()) {
+      return
+    }
+    const timeoutId = createBurst(el, options)
+    const state = stateMap.get(el)
+    if (state) {
+      state.timeoutIds.push(timeoutId)
+    }
+  }
+
+  el.addEventListener('click', onClick)
+  stateMap.set(el, { onClick, timeoutIds: [] })
+}
+
+export function destroy(el) {
+  const state = stateMap.get(el)
+  if (state) {
+    el.removeEventListener('click', state.onClick)
+    state.timeoutIds.forEach((timeoutId) => window.clearTimeout(timeoutId))
+    stateMap.delete(el)
+  }
+
+  el.classList.remove(CSS_CLASS)
+  el.querySelectorAll(`.${LAYER_CLASS}`).forEach((node) => node.remove())
+}

package/animations/button/confetti-button/react.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react'
+import { init, destroy } from './index.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+
+type AnimConfettiButtonProps = {
+  children: React.ReactElement
+  pieces?: number
+  colors?: string[]
+}
+
+export function AnimConfettiButton({
+  children,
+  pieces,
+  colors,
+}: AnimConfettiButtonProps) {
+  const ref = useRef<HTMLElement>(null)
+  const colorsKey = colors?.join('\u0001') ?? ''
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el || prefersReducedMotion()) return
+
+    init(el, { pieces, colors })
+    return () => {
+      destroy(el)
+    }
+  }, [colorsKey, pieces])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}