@readdy/anim 0.0.21

package/animations/card/pop-in-stack/react.tsx

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

package/animations/card/pop-in-stack/style.css

@@ -0,0 +1,25 @@
+@keyframes readdy-anim-stack-pop {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--readdy-anim-pop-offset, 18px)) scale(var(--readdy-anim-pop-scale-start, 0.88));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.readdy-anim-pop-in-stack {
+  position: relative;
+  animation: readdy-anim-stack-pop var(--readdy-anim-pop-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: var(--readdy-anim-pop-delay, 0ms);
+  will-change: transform, opacity;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-pop-in-stack {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}

package/animations/card/reveal-from-top/index.js

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('reveal-from-top')
+
+/**
+ * Reveal From Top — 卡片从顶部揭示
+ * 实现：CSS-only，init 给元素加 .readdy-anim-reveal-from-top class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('reveal-from-top')
+
+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/card/reveal-from-top/react.tsx

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+
+/**
+ * Reveal From Top — 卡片从顶部揭示
+ *
+ * 用法：
+ *   <AnimRevealFromTop><div className="card">内容</div></AnimRevealFromTop>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-reveal-from-top class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimRevealFromTop({ 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/card/reveal-from-top/style.css

@@ -0,0 +1,28 @@
+/* Reveal From Top — 卡片从顶部揭示 */
+
+@keyframes readdy-anim-reveal-from-top {
+  from {
+    opacity: 0;
+    transform: translateY(-28px);
+    clip-path: inset(0 0 100% 0 round 20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    clip-path: inset(0 0 0 0 round 20px);
+  }
+}
+
+.readdy-anim-reveal-from-top {
+  animation: readdy-anim-reveal-from-top 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  will-change: opacity, transform, clip-path;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-reveal-from-top {
+    animation: none;
+    opacity: 1;
+    transform: none;
+    clip-path: inset(0 0 0 0 round 20px);
+  }
+}

package/animations/card/rgb-split-glitch/index.js

@@ -0,0 +1,28 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('rgb-split-glitch')
+
+/**
+ * RGB Split Glitch — 卡片 RGB 色散故障效果
+ * 实现：CSS-only，init 给元素加 .readdy-anim-rgb-split-glitch class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('rgb-split-glitch')
+
+export function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+
+  el.style.setProperty('--readdy-anim-rgb-glitch-duration', `${options.duration ?? 1100}ms`)
+  el.style.setProperty('--readdy-anim-rgb-glitch-shift', `${options.shift ?? 3}px`)
+  el.style.setProperty('--readdy-anim-rgb-glitch-shadow', `${options.shadowOffset ?? 2}px`)
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-rgb-glitch-duration')
+  el.style.removeProperty('--readdy-anim-rgb-glitch-shift')
+  el.style.removeProperty('--readdy-anim-rgb-glitch-shadow')
+}

package/animations/card/rgb-split-glitch/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'
+
+/**
+ * RGB Split Glitch — 卡片 RGB 色散故障效果
+ *
+ * 用法：
+ *   <AnimRgbSplitGlitch><div className="card">内容</div></AnimRgbSplitGlitch>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-rgb-split-glitch class
+ * 必须恰好包裹一个子元素
+ */
+type AnimRgbSplitGlitchProps = {
+  children: React.ReactElement
+  duration?: number
+  shift?: number
+  shadowOffset?: number
+}
+
+export function AnimRgbSplitGlitch({
+  children,
+  duration,
+  shift,
+  shadowOffset,
+}: AnimRgbSplitGlitchProps) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (prefersReducedMotion()) return
+
+    init(el, { duration, shift, shadowOffset })
+    return () => {
+      destroy(el)
+    }
+  }, [duration, shift, shadowOffset])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/card/rgb-split-glitch/style.css

@@ -0,0 +1,33 @@
+/* RGB Split Glitch — 卡片 RGB 色散故障效果 */
+
+@keyframes readdy-anim-rgb-glitch {
+  0%, 100% { transform: translate(0); filter: none; }
+  20% {
+    transform: translate(calc(var(--readdy-anim-rgb-glitch-shift, 3px) * -1), calc(var(--readdy-anim-rgb-glitch-shift, 3px) * 0.3333));
+    filter:
+      drop-shadow(var(--readdy-anim-rgb-glitch-shadow, 2px) 0 red)
+      drop-shadow(calc(var(--readdy-anim-rgb-glitch-shadow, 2px) * -1) 0 cyan);
+  }
+  40% {
+    transform: translate(var(--readdy-anim-rgb-glitch-shift, 3px), calc(var(--readdy-anim-rgb-glitch-shift, 3px) * -0.3333));
+    filter:
+      drop-shadow(calc(var(--readdy-anim-rgb-glitch-shadow, 2px) * -1) 0 blue)
+      drop-shadow(var(--readdy-anim-rgb-glitch-shadow, 2px) 0 lime);
+  }
+  60% {
+    transform: translate(calc(var(--readdy-anim-rgb-glitch-shift, 3px) * -0.6667), calc(var(--readdy-anim-rgb-glitch-shift, 3px) * 0.6667));
+    filter:
+      drop-shadow(var(--readdy-anim-rgb-glitch-shadow, 2px) 0 red)
+      drop-shadow(calc(var(--readdy-anim-rgb-glitch-shadow, 2px) * -1) 0 cyan);
+  }
+}
+
+.readdy-anim-rgb-split-glitch {
+  animation: readdy-anim-rgb-glitch var(--readdy-anim-rgb-glitch-duration, 1100ms) steps(2) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-rgb-split-glitch {
+    animation: none;
+  }
+}

package/animations/card/tilted-card/index.js

@@ -0,0 +1,64 @@
+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('tilted-card')
+
+const CSS_CLASS = buildAnimClass('tilted-card')
+const stateMap = new WeakMap()
+
+function reset(el) {
+  el.style.setProperty('--readdy-anim-card-tilt-x', '0deg')
+  el.style.setProperty('--readdy-anim-card-tilt-y', '0deg')
+  el.style.setProperty('--readdy-anim-card-scale', '1')
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  el.classList.add(CSS_CLASS)
+  reset(el)
+
+  const perspective = options.perspective ?? 900
+  const duration = options.duration ?? 550
+  el.style.setProperty('--readdy-anim-card-tilt-perspective', `${perspective}px`)
+  el.style.setProperty('--readdy-anim-card-tilt-duration', `${duration}ms`)
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const maxTilt = options.maxTilt ?? 10
+  const scale = options.scale ?? 1.02
+
+  const onMove = (event, context) => {
+    const { relativeX, relativeY } = getPointerMetrics(context.rect, event)
+
+    el.style.setProperty('--readdy-anim-card-tilt-x', `${relativeY * -maxTilt * 2}deg`)
+    el.style.setProperty('--readdy-anim-card-tilt-y', `${relativeX * maxTilt * 2}deg`)
+    el.style.setProperty('--readdy-anim-card-scale', `${scale}`)
+  }
+
+  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-card-tilt-x')
+  el.style.removeProperty('--readdy-anim-card-tilt-y')
+  el.style.removeProperty('--readdy-anim-card-scale')
+  el.style.removeProperty('--readdy-anim-card-tilt-perspective')
+  el.style.removeProperty('--readdy-anim-card-tilt-duration')
+}

package/animations/card/tilted-card/react.tsx

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

package/animations/card/tilted-card/style.css

@@ -0,0 +1,27 @@
+.readdy-anim-tilted-card {
+  transform:
+    perspective(var(--readdy-anim-card-tilt-perspective, 900px))
+    rotateX(var(--readdy-anim-card-tilt-x, 0deg))
+    rotateY(var(--readdy-anim-card-tilt-y, 0deg))
+    scale(var(--readdy-anim-card-scale, 1));
+  transform-style: preserve-3d;
+  transition:
+    transform var(--readdy-anim-card-tilt-duration, 550ms) cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow var(--readdy-anim-card-tilt-duration, 550ms) ease;
+  will-change: transform;
+}
+
+.readdy-anim-tilted-card:hover {
+  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-tilted-card {
+    transform: none;
+    transition: none;
+  }
+
+  .readdy-anim-tilted-card:hover {
+    box-shadow: none;
+  }
+}

package/animations/header/anime-splittext/index.js

@@ -0,0 +1,108 @@
+import './style.css'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('anime-splittext')
+
+const CSS_CLASS = buildAnimClass('anime-splittext')
+const WORD_CLASS = buildAnimClass('anime-word')
+const WORD_INNER_CLASS = buildAnimClass('anime-word-inner')
+const CHAR_CLASS = buildAnimClass('anime-char')
+
+function splitAnimatedUnits(text) {
+  if (/\s/.test(text)) {
+    return text.split(/(\s+)/).filter(Boolean)
+  }
+
+  return Array.from(text)
+}
+
+function buildWordFragment(word, wordIndex, stagger, duration) {
+  const outer = document.createElement('span')
+  outer.className = WORD_CLASS
+  outer.style.setProperty('--readdy-anim-word-offset', wordIndex % 2 === 0 ? '110%' : '-110%')
+
+  const inner = document.createElement('span')
+  inner.className = WORD_INNER_CLASS
+  inner.style.setProperty('--readdy-anim-word-delay', `${wordIndex * stagger}ms`)
+  inner.style.setProperty('--readdy-anim-word-loop-delay', `${duration + 20 + wordIndex * stagger}ms`)
+
+  ;[...word].forEach((char, charIndex) => {
+    const charSpan = document.createElement('span')
+    charSpan.className = CHAR_CLASS
+    charSpan.textContent = char
+    charSpan.style.setProperty(
+      '--readdy-anim-char-delay',
+      `${Math.round(duration * 0.6) + wordIndex * stagger + charIndex * 36}ms`
+    )
+    inner.appendChild(charSpan)
+  })
+
+  outer.appendChild(inner)
+  return outer
+}
+
+function wrapWordsInTextNode(textNode, getWordIndex, stagger, duration) {
+  const text = textNode.textContent ?? ''
+  if (!text.trim()) {
+    return
+  }
+
+  const parts = splitAnimatedUnits(text)
+  const fragment = document.createDocumentFragment()
+
+  for (const part of parts) {
+    if (!part) continue
+
+    if (/^\s+$/.test(part)) {
+      fragment.appendChild(document.createTextNode(part))
+      continue
+    }
+
+    fragment.appendChild(buildWordFragment(part, getWordIndex(), stagger, duration))
+  }
+
+  textNode.parentNode?.replaceChild(fragment, textNode)
+}
+
+function splitWords(el, options = {}) {
+  if (!el.dataset.originalText) {
+    el.dataset.originalText = el.innerHTML
+  }
+
+  const stagger = options.stagger ?? 120
+  const duration = options.duration ?? 700
+
+  let wordIndex = 0
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
+  const textNodes = []
+  let node = walker.nextNode()
+
+  while (node) {
+    textNodes.push(node)
+    node = walker.nextNode()
+  }
+
+  for (const textNode of textNodes) {
+    wrapWordsInTextNode(textNode, () => wordIndex++, stagger, duration)
+  }
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+
+  el.style.setProperty('--readdy-anim-anime-word-duration', `${options.duration ?? 700}ms`)
+  splitWords(el, options)
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-anime-word-duration')
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText
+    delete el.dataset.originalText
+  }
+}

package/animations/header/anime-splittext/react.tsx

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

package/animations/header/anime-splittext/style.css

@@ -0,0 +1,71 @@
+@keyframes readdy-anim-anime-word-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--readdy-anim-word-offset, 110%));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes readdy-anim-anime-word-loop {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(calc(var(--readdy-anim-word-offset, 110%) * 0.12));
+  }
+  50% {
+    transform: translateY(calc(var(--readdy-anim-word-offset, 110%) * -0.08));
+  }
+  75% {
+    transform: translateY(calc(var(--readdy-anim-word-offset, 110%) * 0.06));
+  }
+}
+
+@keyframes readdy-anim-anime-char-wiggle {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  35% {
+    transform: translateY(-0.12em);
+  }
+  65% {
+    transform: translateY(0.05em);
+  }
+}
+
+.readdy-anim-anime-splittext {
+  white-space: normal;
+}
+
+.readdy-anim-anime-splittext .readdy-anim-anime-word {
+  display: inline-block;
+  overflow: hidden;
+}
+
+.readdy-anim-anime-splittext .readdy-anim-anime-word-inner {
+  display: inline-block;
+  opacity: 0;
+  animation:
+    readdy-anim-anime-word-in var(--readdy-anim-anime-word-duration, 700ms) cubic-bezier(0.16, 1, 0.3, 1) forwards,
+    readdy-anim-anime-word-loop 3.6s ease-in-out infinite;
+  animation-delay: var(--readdy-anim-word-delay, 0ms), var(--readdy-anim-word-loop-delay, 720ms);
+}
+
+.readdy-anim-anime-splittext .readdy-anim-anime-char {
+  display: inline-block;
+  animation: readdy-anim-anime-char-wiggle 1.25s ease-in-out infinite;
+  animation-delay: var(--readdy-anim-char-delay, 420ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-anime-splittext .readdy-anim-anime-word-inner,
+  .readdy-anim-anime-splittext .readdy-anim-anime-char {
+    animation: none;
+    opacity: 1;
+  }
+}

package/animations/header/bounce-in-down/index.js

@@ -0,0 +1,40 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('bounce-in-down')
+
+/**
+ * Bounce In Down — 从上方弹入
+ * 实现：按字符拆分并错峰 bounceInDown
+ */
+
+import './style.css'
+import { splitTextIntoChars } from '../../../shared/text-split.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+
+const CSS_CLASS = buildAnimClass('bounce-in-down')
+const CHAR_CLASS = buildAnimClass('bounce-in-down-char')
+
+export function init(el, options = {}) {
+  if (el.classList.contains(CSS_CLASS)) {
+    return
+  }
+
+  el.classList.add(CSS_CLASS)
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 40,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 160,
+  })
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText
+    delete el.dataset.originalText
+  }
+}

package/animations/header/bounce-in-down/react.tsx

@@ -0,0 +1,29 @@
+import React, { useRef, useEffect } from 'react'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { init, destroy } from './index.js'
+
+/**
+ * Bounce In Down — 从上方弹入
+ *
+ * 用法：
+ *   <AnimBounceInDown><p>标题文字</p></AnimBounceInDown>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-bounce-in-down class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimBounceInDown({ children }: { children: React.ReactElement }) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (prefersReducedMotion()) return
+
+    init(el)
+    return () => {
+      destroy(el)
+    }
+  }, [])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/header/bounce-in-down/style.css

@@ -0,0 +1,40 @@
+/* Bounce In Down — 从上方弹入 */
+
+@keyframes readdy-anim-bounce-in-down-char {
+  0% {
+    opacity: 0;
+    transform: translateY(-1.4em);
+  }
+  60% {
+    opacity: 1;
+    transform: translateY(0.16em);
+  }
+  75% {
+    transform: translateY(-0.08em);
+  }
+  90% {
+    transform: translateY(0.04em);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.readdy-anim-bounce-in-down {
+  white-space: normal;
+}
+
+.readdy-anim-bounce-in-down .readdy-anim-bounce-in-down-char {
+  display: inline-block;
+  opacity: 0;
+  animation: readdy-anim-bounce-in-down-char 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-bounce-in-down .readdy-anim-bounce-in-down-char {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}