@readdy/anim 0.0.21

package/animations/button/3d-flip/index.js

@@ -0,0 +1,60 @@
+import './style.css'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { attachPointerFollow, getPointerMetrics } from '../../../shared/pointer-follow.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('3d-flip')
+
+const CSS_CLASS = buildAnimClass('3d-flip')
+const stateMap = new WeakMap()
+
+function reset(el) {
+  el.style.setProperty('--readdy-anim-3d-rotate-x', '0deg')
+  el.style.setProperty('--readdy-anim-3d-rotate-y', '0deg')
+  el.style.setProperty('--readdy-anim-3d-translate-x', '0px')
+  el.style.setProperty('--readdy-anim-3d-translate-y', '0px')
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  el.classList.add(CSS_CLASS)
+  reset(el)
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const tilt = options.maxTilt ?? 12
+  const travel = options.translate ?? 8
+
+  const onMove = (event, context) => {
+    const { relativeX, relativeY } = getPointerMetrics(context.rect, event)
+
+    el.style.setProperty('--readdy-anim-3d-rotate-x', `${relativeY * -tilt * 2}deg`)
+    el.style.setProperty('--readdy-anim-3d-rotate-y', `${relativeX * tilt * 2}deg`)
+    el.style.setProperty('--readdy-anim-3d-translate-x', `${relativeX * travel * 2}px`)
+    el.style.setProperty('--readdy-anim-3d-translate-y', `${relativeY * travel * 2}px`)
+  }
+
+  const onLeave = () => {
+    reset(el)
+  }
+
+  const cleanup = attachPointerFollow(el, { onMove, onLeave })
+  stateMap.set(el, { cleanup })
+}
+
+export function destroy(el) {
+  const state = stateMap.get(el)
+  if (state) {
+    state.cleanup()
+    stateMap.delete(el)
+  }
+
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-3d-rotate-x')
+  el.style.removeProperty('--readdy-anim-3d-rotate-y')
+  el.style.removeProperty('--readdy-anim-3d-translate-x')
+  el.style.removeProperty('--readdy-anim-3d-translate-y')
+}

package/animations/button/3d-flip/react.tsx

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

package/animations/button/3d-flip/style.css

@@ -0,0 +1,17 @@
+.readdy-anim-3d-flip {
+  transform:
+    perspective(600px)
+    translate3d(var(--readdy-anim-3d-translate-x, 0), var(--readdy-anim-3d-translate-y, 0), 0)
+    rotateX(var(--readdy-anim-3d-rotate-x, 0deg))
+    rotateY(var(--readdy-anim-3d-rotate-y, 0deg));
+  transform-style: preserve-3d;
+  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-3d-flip {
+    transform: none;
+    transition: none;
+  }
+}

package/animations/button/blur-fade-in/index.js

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('blur-fade-in')
+
+/**
+ * Blur Fade In — 按钮模糊淡入
+ * 实现：CSS-only，init 给元素加 .readdy-anim-blur-fade-in class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('blur-fade-in')
+
+export function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+}

package/animations/button/blur-fade-in/react.tsx

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+
+/**
+ * Blur Fade In — 按钮模糊淡入
+ *
+ * 用法：
+ *   <AnimBlurFadeIn><button>点击</button></AnimBlurFadeIn>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-blur-fade-in class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimBlurFadeIn({ children }: { children: React.ReactElement }) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    init(el)
+    return () => {
+      destroy(el)
+    }
+  }, [])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/button/blur-fade-in/style.css

@@ -0,0 +1,27 @@
+/* Blur Fade In — 按钮模糊淡入 */
+
+@keyframes readdy-anim-blur-fade-in {
+  from {
+    opacity: 0;
+    filter: blur(10px);
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+
+.readdy-anim-blur-fade-in {
+  animation: readdy-anim-blur-fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-blur-fade-in {
+    animation: none;
+    opacity: 1;
+    filter: none;
+    transform: none;
+  }
+}

package/animations/button/border-beam/index.js

@@ -0,0 +1,172 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('border-beam')
+
+/**
+ * Border Beam — 光束边框
+ * 实现：init 给元素加 class，并插入一层 beam overlay；destroy 清理
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('border-beam')
+const LAYER_CLASS = `${CSS_CLASS}__layer`
+const BEAM_CLASS = `${CSS_CLASS}__beam`
+const BEAM_WARM_CLASS = `${BEAM_CLASS}--warm`
+const BEAM_COOL_CLASS = `${BEAM_CLASS}--cool`
+const ANIMATION_KEY = '__readdyBorderBeamAnimation'
+const STATE_KEY = '__readdyBorderBeamState'
+const DEFAULT_SIZE = 72
+
+function ensureLayer(el) {
+  const existing = Array.from(el.children).find((child) => child.classList?.contains(LAYER_CLASS))
+  if (existing) {
+    const warmBeam = existing.querySelector(`.${BEAM_WARM_CLASS}`)
+    const coolBeam = existing.querySelector(`.${BEAM_COOL_CLASS}`)
+    if (warmBeam && coolBeam) {
+      return { layer: existing, beams: [warmBeam, coolBeam] }
+    }
+    existing.remove()
+  }
+
+  const layer = document.createElement('span')
+  layer.className = LAYER_CLASS
+  layer.setAttribute('aria-hidden', 'true')
+
+  const warmBeam = document.createElement('span')
+  warmBeam.className = `${BEAM_CLASS} ${BEAM_WARM_CLASS}`
+  layer.appendChild(warmBeam)
+
+  const coolBeam = document.createElement('span')
+  coolBeam.className = `${BEAM_CLASS} ${BEAM_COOL_CLASS}`
+  layer.appendChild(coolBeam)
+
+  el.appendChild(layer)
+
+  return { layer, beams: [warmBeam, coolBeam] }
+}
+
+function cancelAnimation(el) {
+  el[ANIMATION_KEY]?.cancel?.()
+  delete el[ANIMATION_KEY]
+}
+
+function getBeamSize(el, options) {
+  if (typeof options.size === 'number') {
+    return options.size
+  }
+
+  const { width, height } = el.getBoundingClientRect()
+  return Math.max(DEFAULT_SIZE, Math.min(Math.round((width + height) * 0.22), 160))
+}
+
+function syncLayer(el) {
+  const state = el[STATE_KEY]
+  if (!state) return
+
+  const { beams, options } = state
+  const radius = getComputedStyle(el).borderRadius || '0px'
+  const size = getBeamSize(el, options)
+
+  el.style.setProperty('--readdy-anim-border-beam-radius', radius)
+  el.style.setProperty('--readdy-anim-border-beam-duration', `${options.duration ?? 3000}ms`)
+  el.style.setProperty('--readdy-anim-border-beam-width', `${options.borderWidth ?? 1.35}px`)
+  el.style.setProperty('--readdy-anim-border-beam-glow-opacity', `${options.glowOpacity ?? 0.28}`)
+  el.style.setProperty('--readdy-anim-border-beam-size', `${size}px`)
+
+  beams.forEach((beam, index) => {
+    beam.style.width = `${size}px`
+    beam.style.offsetPath = `rect(0 auto auto 0 round ${radius})`
+    if (index === 0) {
+      beam.style.setProperty('--readdy-anim-border-beam-color-from', options.colorFrom ?? '#ff6b6b')
+      beam.style.setProperty('--readdy-anim-border-beam-color-to', options.colorTo ?? '#ffb86b')
+    } else {
+      beam.style.setProperty('--readdy-anim-border-beam-color-from', options.secondaryColorFrom ?? '#5ea0ff')
+      beam.style.setProperty('--readdy-anim-border-beam-color-to', options.secondaryColorTo ?? '#9ec5ff')
+    }
+  })
+}
+
+function runAnimation(el) {
+  const state = el[STATE_KEY]
+  if (!state) return
+
+  const { beams, options } = state
+  const initialOffset = options.initialOffset ?? 0
+  const duration = options.duration ?? 3000
+  const delay = options.delay ?? 0
+  const reverse = options.reverse ?? false
+
+  cancelAnimation(el)
+  const animations = beams
+    .map((beam, index) => {
+      if (typeof beam.animate !== 'function') return null
+
+      const beamOffset = initialOffset + index * 50
+      const from = reverse ? `${100 - beamOffset}%` : `${beamOffset}%`
+      const to = reverse ? `${-beamOffset}%` : `${100 + beamOffset}%`
+      beam.style.offsetDistance = from
+
+      return beam.animate(
+        [
+          { offsetDistance: from },
+          { offsetDistance: to },
+        ],
+        {
+          duration,
+          delay: -delay,
+          easing: 'linear',
+          iterations: Infinity,
+          fill: 'both',
+        }
+      )
+    })
+    .filter(Boolean)
+
+  if (animations.length > 0) {
+    el[ANIMATION_KEY] = {
+      cancel() {
+        animations.forEach((animation) => animation.cancel())
+      },
+    }
+  }
+}
+
+export function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+
+  const { layer, beams } = ensureLayer(el)
+  const state = el[STATE_KEY] ?? { layer, beams, options }
+
+  state.layer = layer
+  state.beams = beams
+  state.options = options
+
+  if (!state.resizeObserver && typeof ResizeObserver !== 'undefined') {
+    state.resizeObserver = new ResizeObserver(() => {
+      syncLayer(el)
+    })
+    state.resizeObserver.observe(el)
+  }
+
+  el[STATE_KEY] = state
+  syncLayer(el)
+  runAnimation(el)
+}
+
+export function destroy(el) {
+  cancelAnimation(el)
+
+  const state = el[STATE_KEY]
+  state?.resizeObserver?.disconnect()
+  state?.layer?.remove()
+  delete el[STATE_KEY]
+
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-border-beam-radius')
+  el.style.removeProperty('--readdy-anim-border-beam-duration')
+  el.style.removeProperty('--readdy-anim-border-beam-width')
+  el.style.removeProperty('--readdy-anim-border-beam-glow-opacity')
+  el.style.removeProperty('--readdy-anim-border-beam-size')
+}

package/animations/button/border-beam/react.tsx

@@ -0,0 +1,55 @@
+import React, { useRef, useEffect } from 'react'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { init, destroy } from './index.js'
+
+/**
+ * Border Beam — 光束边框
+ *
+ * 用法：
+ *   <AnimBorderBeam><button>点击</button></AnimBorderBeam>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-border-beam class
+ * 必须恰好包裹一个子元素
+ */
+type AnimBorderBeamProps = {
+  children: React.ReactElement
+  duration?: number
+  delay?: number
+  borderWidth?: number
+  glowOpacity?: number
+  size?: number
+  initialOffset?: number
+  colorFrom?: string
+  colorTo?: string
+  reverse?: boolean
+  respectReducedMotion?: boolean
+}
+
+export function AnimBorderBeam({
+  children,
+  duration,
+  delay,
+  borderWidth,
+  glowOpacity,
+  size,
+  initialOffset,
+  colorFrom,
+  colorTo,
+  reverse,
+  respectReducedMotion = true,
+}: AnimBorderBeamProps) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (respectReducedMotion && prefersReducedMotion()) return
+
+    init(el, { duration, delay, borderWidth, glowOpacity, size, initialOffset, colorFrom, colorTo, reverse })
+    return () => {
+      destroy(el)
+    }
+  }, [borderWidth, colorFrom, colorTo, delay, duration, glowOpacity, initialOffset, respectReducedMotion, reverse, size])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/button/border-beam/style.css

@@ -0,0 +1,59 @@
+.readdy-anim-border-beam {
+  position: relative;
+  isolation: isolate;
+}
+
+.readdy-anim-border-beam__layer {
+  display: block;
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  padding: var(--readdy-anim-border-beam-width, 1.35px);
+  border-radius: var(--readdy-anim-border-beam-radius, inherit);
+  pointer-events: none;
+  overflow: clip;
+  z-index: 2;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+}
+
+.readdy-anim-border-beam__beam {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  aspect-ratio: 1;
+  width: var(--readdy-anim-border-beam-size, 72px);
+  pointer-events: none;
+  border-radius: 0;
+  offset-rotate: 0deg;
+  background: linear-gradient(
+    to left,
+    var(--readdy-anim-border-beam-color-from, #ffaa40),
+    var(--readdy-anim-border-beam-color-to, #9c40ff) 55%,
+    transparent
+  );
+  filter:
+    drop-shadow(0 0 4px rgba(255, 170, 64, calc(var(--readdy-anim-border-beam-glow-opacity, 0.28) * 1.3)))
+    drop-shadow(0 0 12px rgba(156, 64, 255, calc(var(--readdy-anim-border-beam-glow-opacity, 0.28) * 0.65)));
+  will-change: offset-distance;
+}
+
+.readdy-anim-border-beam__beam--warm {
+  opacity: 0.95;
+}
+
+.readdy-anim-border-beam__beam--cool {
+  opacity: 0.88;
+  filter:
+    drop-shadow(0 0 4px rgba(94, 160, 255, calc(var(--readdy-anim-border-beam-glow-opacity, 0.28) * 1.2)))
+    drop-shadow(0 0 12px rgba(96, 165, 250, calc(var(--readdy-anim-border-beam-glow-opacity, 0.28) * 0.6)));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-border-beam__beam {
+    display: none;
+  }
+}

package/animations/button/bounce-elastic/index.js

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('bounce-elastic')
+
+/**
+ * Bounce Elastic — 按钮弹性弹入
+ * 实现：CSS-only，init 给元素加 .readdy-anim-bounce-elastic class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('bounce-elastic')
+
+export function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+}

package/animations/button/bounce-elastic/react.tsx

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+
+/**
+ * Bounce Elastic — 按钮弹性弹入
+ *
+ * 用法：
+ *   <AnimBounceElastic><button>点击</button></AnimBounceElastic>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-bounce-elastic class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimBounceElastic({ children }: { children: React.ReactElement }) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    init(el)
+    return () => {
+      destroy(el)
+    }
+  }, [])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/button/bounce-elastic/style.css

@@ -0,0 +1,31 @@
+/* Bounce Elastic — 按钮弹性弹入 */
+
+@keyframes readdy-anim-bounce-elastic {
+  0% {
+    opacity: 0;
+    transform: scale(0.6) translateY(12px);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.08) translateY(-4px);
+  }
+  80% {
+    transform: scale(0.96) translateY(2px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.readdy-anim-bounce-elastic {
+  animation: readdy-anim-bounce-elastic 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-bounce-elastic {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}