@readdy/anim 0.0.21

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

@@ -0,0 +1,48 @@
+@keyframes readdy-anim-confetti-burst {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0) rotate(0deg) scale(0.4);
+  }
+  12% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--readdy-anim-confetti-x), var(--readdy-anim-confetti-y))
+      rotate(var(--readdy-anim-confetti-rotate)) scale(1);
+  }
+}
+
+.readdy-anim-confetti-button {
+  position: relative;
+  overflow: visible;
+  isolation: isolate;
+}
+
+.readdy-anim-confetti-button .readdy-anim-confetti-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.readdy-anim-confetti-button .readdy-anim-confetti-piece {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.42rem;
+  height: 0.8rem;
+  border-radius: 999px;
+  opacity: 0;
+  transform-origin: center;
+  animation: readdy-anim-confetti-burst 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: var(--readdy-anim-confetti-delay, 0ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-confetti-button .readdy-anim-confetti-piece {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}

package/animations/button/glow-cta/index.js

@@ -0,0 +1,69 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { attachPointerFollow } from '../../../shared/pointer-follow.js'
+export const ANIMATION_ID = buildAnimId('glow-cta')
+
+/**
+ * Glow CTA — 按钮发光CTA
+ * 实现：dom-restructure，pointermove 更新 glow 中心位置，destroy 清理事件
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('glow-cta')
+const ACTIVE_CLASS = buildAnimClass('glow-cta-active')
+const cleanups = new WeakMap()
+const GLOW_X_VAR = '--readdy-anim-glow-cta-x'
+const GLOW_Y_VAR = '--readdy-anim-glow-cta-y'
+
+export function init(el, options = {}) {
+  if (cleanups.has(el)) return
+
+  el.classList.add(CSS_CLASS)
+  el.style.setProperty(GLOW_X_VAR, '50%')
+  el.style.setProperty(GLOW_Y_VAR, '50%')
+  el.style.setProperty('--readdy-anim-glow-cta-scale', `${options.scale ?? 1.05}`)
+  el.style.setProperty('--readdy-anim-glow-cta-padding', options.arrowPadding ?? 'calc(2rem + 1.2em)')
+  el.style.setProperty('--readdy-anim-glow-cta-idle-opacity', `${options.idleOpacity ?? 0.2}`)
+  el.style.setProperty('--readdy-anim-glow-cta-active-opacity', `${options.activeOpacity ?? 0.6}`)
+  el.style.setProperty('--readdy-anim-glow-cta-inset', `${options.inset ?? -8}px`)
+
+  if (prefersReducedMotion()) {
+    cleanups.set(el, () => {})
+    return
+  }
+
+  const cleanup = attachPointerFollow(el, {
+    onMove(event, context) {
+      const { rect } = context.getMetrics(event)
+      const x = rect.width ? ((event.clientX - rect.left) / rect.width) * 100 : 50
+      const y = rect.height ? ((event.clientY - rect.top) / rect.height) * 100 : 50
+
+      el.style.setProperty(GLOW_X_VAR, `${Math.max(0, Math.min(100, x))}%`)
+      el.style.setProperty(GLOW_Y_VAR, `${Math.max(0, Math.min(100, y))}%`)
+      el.classList.add(ACTIVE_CLASS)
+    },
+    onLeave() {
+      el.classList.remove(ACTIVE_CLASS)
+      el.style.setProperty(GLOW_X_VAR, '50%')
+      el.style.setProperty(GLOW_Y_VAR, '50%')
+    },
+  })
+
+  cleanups.set(el, cleanup)
+}
+
+export function destroy(el) {
+  cleanups.get(el)?.()
+  cleanups.delete(el)
+
+  el.classList.remove(CSS_CLASS)
+  el.classList.remove(ACTIVE_CLASS)
+  el.style.removeProperty(GLOW_X_VAR)
+  el.style.removeProperty(GLOW_Y_VAR)
+  el.style.removeProperty('--readdy-anim-glow-cta-scale')
+  el.style.removeProperty('--readdy-anim-glow-cta-padding')
+  el.style.removeProperty('--readdy-anim-glow-cta-idle-opacity')
+  el.style.removeProperty('--readdy-anim-glow-cta-active-opacity')
+  el.style.removeProperty('--readdy-anim-glow-cta-inset')
+}

package/animations/button/glow-cta/react.tsx

@@ -0,0 +1,45 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+
+/**
+ * Glow CTA — 按钮发光CTA
+ *
+ * 用法：
+ *   <AnimGlowCta><button>点击</button></AnimGlowCta>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，并调用底层 init/destroy
+ * 必须恰好包裹一个子元素
+ */
+type AnimGlowCtaProps = {
+  children: React.ReactElement
+  scale?: number
+  arrowPadding?: string
+  idleOpacity?: number
+  activeOpacity?: number
+  inset?: number
+}
+
+export function AnimGlowCta({
+  children,
+  scale,
+  arrowPadding,
+  idleOpacity,
+  activeOpacity,
+  inset,
+}: AnimGlowCtaProps) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (prefersReducedMotion()) return
+
+    init(el, { scale, arrowPadding, idleOpacity, activeOpacity, inset })
+    return () => {
+      destroy(el)
+    }
+  }, [scale, arrowPadding, idleOpacity, activeOpacity, inset])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/button/glow-cta/style.css

@@ -0,0 +1,78 @@
+/* Glow CTA — 按钮发光CTA */
+
+.readdy-anim-glow-cta {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  transition:
+    transform 0.35s ease,
+    padding-right 0.35s ease;
+}
+
+.readdy-anim-glow-cta::before {
+  content: "";
+  position: absolute;
+  inset: var(--readdy-anim-glow-cta-inset, -8px);
+  background: radial-gradient(
+    circle at var(--readdy-anim-glow-cta-x, 50%) var(--readdy-anim-glow-cta-y, 50%),
+    rgba(251, 146, 60, 0.48) 0%,
+    rgba(251, 146, 60, 0.24) 24%,
+    rgba(59, 130, 246, 0.16) 42%,
+    transparent 72%
+  );
+  opacity: var(--readdy-anim-glow-cta-idle-opacity, 0.2);
+  transition: opacity 0.35s ease;
+  z-index: -1;
+  border-radius: inherit;
+}
+
+.readdy-anim-glow-cta::after {
+  content: '→';
+  position: absolute;
+  top: 50%;
+  right: 1rem;
+  transform: translate(-10px, -50%);
+  opacity: 0;
+  font-size: 0.95em;
+  line-height: 1;
+  transition:
+    transform 0.35s ease,
+    opacity 0.35s ease;
+}
+
+.readdy-anim-glow-cta:hover {
+  transform: scale(var(--readdy-anim-glow-cta-scale, 1.05));
+  padding-right: var(--readdy-anim-glow-cta-padding, calc(2rem + 1.2em));
+}
+
+.readdy-anim-glow-cta:hover::before,
+.readdy-anim-glow-cta.readdy-anim-glow-cta-active::before {
+  opacity: var(--readdy-anim-glow-cta-active-opacity, 0.6);
+}
+
+.readdy-anim-glow-cta:hover::after {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-glow-cta,
+  .readdy-anim-glow-cta::before,
+  .readdy-anim-glow-cta::after {
+    transition: none;
+  }
+
+  .readdy-anim-glow-cta:hover {
+    transform: none;
+    padding-right: inherit;
+  }
+
+  .readdy-anim-glow-cta:hover::before {
+    opacity: 0.2;
+  }
+
+  .readdy-anim-glow-cta:hover::after {
+    opacity: 0;
+    transform: translate(-10px, -50%);
+  }
+}

package/animations/button/magnetic-hover/index.js

@@ -0,0 +1,61 @@
+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('magnetic-hover')
+
+const CSS_CLASS = buildAnimClass('magnetic-hover')
+const stateMap = new WeakMap()
+
+function resetTransform(el) {
+  el.style.setProperty('--readdy-anim-magnetic-x', '0px')
+  el.style.setProperty('--readdy-anim-magnetic-y', '0px')
+  el.style.setProperty('--readdy-anim-magnetic-scale', '1')
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  el.classList.add(CSS_CLASS)
+  resetTransform(el)
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const padding = options.padding ?? 150
+  const strength = options.strength ?? 3
+
+  const onMove = (event, context) => {
+    const { rect, deltaX, deltaY } = getPointerMetrics(context.rect, event)
+
+    if (Math.abs(deltaX) > rect.width / 2 + padding || Math.abs(deltaY) > rect.height / 2 + padding) {
+      return
+    }
+
+    el.style.setProperty('--readdy-anim-magnetic-x', `${deltaX / strength}px`)
+    el.style.setProperty('--readdy-anim-magnetic-y', `${deltaY / strength}px`)
+    el.style.setProperty('--readdy-anim-magnetic-scale', '1.05')
+  }
+
+  const onLeave = () => {
+    resetTransform(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-magnetic-x')
+  el.style.removeProperty('--readdy-anim-magnetic-y')
+  el.style.removeProperty('--readdy-anim-magnetic-scale')
+}

package/animations/button/magnetic-hover/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 AnimMagneticHoverProps = {
+  children: React.ReactElement
+  padding?: number
+  strength?: number
+}
+
+export function AnimMagneticHover({
+  children,
+  padding,
+  strength,
+}: AnimMagneticHoverProps) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el || prefersReducedMotion()) return
+
+    init(el, { padding, strength })
+    return () => {
+      destroy(el)
+    }
+  }, [padding, strength])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/button/magnetic-hover/style.css

@@ -0,0 +1,18 @@
+.readdy-anim-magnetic-hover {
+  transform: translate3d(var(--readdy-anim-magnetic-x, 0), var(--readdy-anim-magnetic-y, 0), 0)
+    scale(var(--readdy-anim-magnetic-scale, 1));
+  transition: transform 0.3s ease-out;
+  will-change: transform;
+}
+
+.readdy-anim-magnetic-hover:not(:hover) {
+  transition-duration: 0.6s;
+  transition-timing-function: ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-magnetic-hover {
+    transform: none;
+    transition: none;
+  }
+}

package/animations/button/pulse/index.js

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('pulse')
+
+/**
+ * Pulse — 按钮持续脉冲
+ * 实现：CSS-only，init 给元素加 .readdy-anim-pulse class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('pulse')
+
+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/pulse/react.tsx

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+
+/**
+ * Pulse — 按钮持续脉冲
+ *
+ * 用法：
+ *   <AnimPulse><button>点击</button></AnimPulse>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-pulse class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimPulse({ 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/pulse/style.css

@@ -0,0 +1,24 @@
+/* Pulse — 按钮持续脉冲 */
+
+@keyframes readdy-anim-pulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(79, 107, 255, 0.45);
+  }
+  50% {
+    transform: scale(1.06);
+    box-shadow: 0 0 0 10px rgba(79, 107, 255, 0);
+  }
+}
+
+.readdy-anim-pulse {
+  animation: readdy-anim-pulse 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-pulse {
+    animation: none;
+    transform: none;
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('rainbow-button')
+
+/**
+ * Rainbow Button — 彩虹按钮
+ * 实现：CSS-only，init 给元素加 .readdy-anim-rainbow-button class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('rainbow-button')
+
+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/rainbow-button/react.tsx

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+
+/**
+ * Rainbow Button — 彩虹按钮
+ *
+ * 用法：
+ *   <AnimRainbowButton><button>点击</button></AnimRainbowButton>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-rainbow-button class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimRainbowButton({ 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/rainbow-button/style.css

@@ -0,0 +1,54 @@
+/* Rainbow Button — 彩虹按钮 */
+
+@keyframes readdy-anim-rainbow {
+  0% {
+    background-position: 0%;
+  }
+  100% {
+    background-position: 200%;
+  }
+}
+
+.readdy-anim-rainbow-button {
+  --readdy-anim-rainbow-line: linear-gradient(90deg, #fb7185, #f59e0b, #22c55e, #38bdf8, #a78bfa, #fb7185);
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 16px 30px rgba(30, 41, 59, 0.14);
+}
+
+.readdy-anim-rainbow-button::before {
+  content: '';
+  position: absolute;
+  inset: auto 6% -1px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--readdy-anim-rainbow-line);
+  background-size: 200% 100%;
+  filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.45));
+  animation: readdy-anim-rainbow 2.4s linear infinite;
+}
+
+.readdy-anim-rainbow-button::after {
+  content: '';
+  position: absolute;
+  inset: auto 10% -14px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--readdy-anim-rainbow-line);
+  background-size: 200% 100%;
+  opacity: 0.38;
+  filter: blur(12px);
+  animation: readdy-anim-rainbow 2.4s linear infinite;
+  z-index: -1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-rainbow-button::before,
+  .readdy-anim-rainbow-button::after {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('shimmer-border')
+
+/**
+ * Shimmer Border — 闪光边框
+ * 实现：CSS-only，init 给元素加 .readdy-anim-shimmer-border class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('shimmer-border')
+
+export function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+
+  el.style.setProperty('--readdy-anim-shimmer-border-duration', `${options.duration ?? 800}ms`)
+  el.style.setProperty('--readdy-anim-shimmer-border-width', `${options.borderWidth ?? 1.5}px`)
+  el.style.setProperty('--readdy-anim-shimmer-border-opacity', `${options.opacity ?? 0.88}`)
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-shimmer-border-duration')
+  el.style.removeProperty('--readdy-anim-shimmer-border-width')
+  el.style.removeProperty('--readdy-anim-shimmer-border-opacity')
+}

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

@@ -0,0 +1,41 @@
+import React, { useRef, useEffect } from 'react'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { init, destroy } from './index.js'
+
+/**
+ * Shimmer Border — 闪光边框
+ *
+ * 用法：
+ *   <AnimShimmerBorder><button>点击</button></AnimShimmerBorder>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-shimmer-border class
+ * 必须恰好包裹一个子元素
+ */
+type AnimShimmerBorderProps = {
+  children: React.ReactElement
+  duration?: number
+  borderWidth?: number
+  opacity?: number
+}
+
+export function AnimShimmerBorder({
+  children,
+  duration,
+  borderWidth,
+  opacity,
+}: AnimShimmerBorderProps) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (prefersReducedMotion()) return
+
+    init(el, { duration, borderWidth, opacity })
+    return () => {
+      destroy(el)
+    }
+  }, [borderWidth, duration, opacity])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

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

@@ -0,0 +1,53 @@
+/* Shimmer Border — 闪光边框 */
+
+.readdy-anim-shimmer-border {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+}
+
+.readdy-anim-shimmer-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: var(--readdy-anim-shimmer-border-width, 1.5px);
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    rgba(34, 211, 238, 0.12) 0%,
+    rgba(34, 211, 238, 0.24) 18%,
+    #22d3ee 36%,
+    #a78bfa 50%,
+    #22d3ee 64%,
+    rgba(34, 211, 238, 0.24) 82%,
+    rgba(34, 211, 238, 0.12) 100%
+  );
+  background-size: 200% 100%;
+  background-position: 0 0;
+  -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;
+  pointer-events: none;
+  opacity: var(--readdy-anim-shimmer-border-opacity, 0.88);
+  transition:
+    background-position var(--readdy-anim-shimmer-border-duration, 800ms) ease,
+    opacity 0.25s ease;
+}
+
+.readdy-anim-shimmer-border:hover::before {
+  background-position: 100% 0;
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-shimmer-border::before {
+    transition: none;
+  }
+
+  .readdy-anim-shimmer-border:hover::before {
+    background-position: 0 0;
+  }
+}

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

@@ -0,0 +1,16 @@
+import './style.css'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('sketch-button')
+
+const CSS_CLASS = buildAnimClass('sketch-button')
+
+export function init(el) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+}

package/animations/button/sketch-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 AnimSketchButton({ 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 })
+}