@readdy/anim 0.0.21

package/animations/header/fly-in-chars/index.js

@@ -0,0 +1,46 @@
+import './style.css'
+import { splitTextIntoChars } from '../../../shared/text-split.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('fly-in-chars')
+
+const CSS_CLASS = buildAnimClass('fly-in-chars')
+const CHAR_CLASS = buildAnimClass('fly-in-char')
+
+function randomBetween(min, max) {
+  return Math.round(min + Math.random() * (max - min))
+}
+
+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 ?? 36,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 160,
+  })
+
+  const chars = el.querySelectorAll(`.${CHAR_CLASS}`)
+  for (const char of chars) {
+    char.style.setProperty('--readdy-anim-fly-in-x', `${randomBetween(-120, 120)}px`)
+    char.style.setProperty('--readdy-anim-fly-in-y', `${randomBetween(-80, 80)}px`)
+    char.style.setProperty('--readdy-anim-fly-in-rotate', `${randomBetween(-25, 25)}deg`)
+  }
+}
+
+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/fly-in-chars/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 AnimFlyInCharsProps = {
+  children: React.ReactElement
+  stagger?: number
+  maxChars?: number
+}
+
+export function AnimFlyInChars({
+  children,
+  stagger,
+  maxChars,
+}: AnimFlyInCharsProps) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (prefersReducedMotion()) return
+
+    init(el, { stagger, maxChars })
+    return () => {
+      destroy(el)
+    }
+  }, [maxChars, stagger])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/header/fly-in-chars/style.css

@@ -0,0 +1,29 @@
+@keyframes readdy-anim-fly-in-char {
+  from {
+    opacity: 0;
+    transform: translate(var(--readdy-anim-fly-in-x, 0), var(--readdy-anim-fly-in-y, 8px))
+      rotate(var(--readdy-anim-fly-in-rotate, 0deg));
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0) rotate(0deg);
+  }
+}
+
+.readdy-anim-fly-in-chars {
+  white-space: normal;
+}
+
+.readdy-anim-fly-in-chars .readdy-anim-fly-in-char {
+  display: inline-block;
+  opacity: 0;
+  animation: readdy-anim-fly-in-char 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-fly-in-chars .readdy-anim-fly-in-char {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}

package/animations/header/gradient-text/index.js

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('gradient-text')
+
+/**
+ * Gradient Text — 渐变文字
+ * 实现：CSS-only，init 给元素加 .readdy-anim-gradient-text class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('gradient-text')
+
+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/header/gradient-text/react.tsx

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+
+/**
+ * Gradient Text — 渐变文字
+ *
+ * 用法：
+ *   <AnimGradientText><p>标题文字</p></AnimGradientText>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-gradient-text class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimGradientText({ 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/header/gradient-text/style.css

@@ -0,0 +1,28 @@
+/* Gradient Text — 渐变文字 */
+
+@keyframes readdy-anim-gradient-flow {
+  from {
+    background-position: 0% center;
+  }
+
+  to {
+    background-position: 100% center;
+  }
+}
+
+.readdy-anim-gradient-text {
+  background: linear-gradient(90deg, #22d3ee 0%, #a78bfa 35%, #f472b6 50%, #a78bfa 65%, #22d3ee 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: readdy-anim-gradient-flow 3s ease-in-out infinite alternate;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-gradient-text {
+    animation: none;
+    background-position: 0 0;
+  }
+}

package/animations/header/letter-bounce/index.js

@@ -0,0 +1,33 @@
+import './style.css'
+import { splitTextIntoChars } from '../../../shared/text-split.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('letter-bounce')
+
+const CSS_CLASS = buildAnimClass('letter-bounce')
+const CHAR_CLASS = buildAnimClass('letter-bounce-char')
+
+export function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+
+  el.style.setProperty('--readdy-anim-letter-bounce-duration', `${options.duration ?? 850}ms`)
+  el.style.setProperty('--readdy-anim-letter-bounce-amplitude', `${options.amplitude ?? 6}px`)
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 60,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 160,
+  })
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-letter-bounce-duration')
+  el.style.removeProperty('--readdy-anim-letter-bounce-amplitude')
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText
+    delete el.dataset.originalText
+  }
+}

package/animations/header/letter-bounce/react.tsx

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

package/animations/header/letter-bounce/style.css

@@ -0,0 +1,25 @@
+@keyframes readdy-anim-letter-wave {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(calc(var(--readdy-anim-letter-bounce-amplitude, 6px) * -1));
+  }
+}
+
+.readdy-anim-letter-bounce {
+  white-space: normal;
+}
+
+.readdy-anim-letter-bounce .readdy-anim-letter-bounce-char {
+  display: inline-block;
+  animation: readdy-anim-letter-wave var(--readdy-anim-letter-bounce-duration, 850ms) ease-in-out infinite;
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-letter-bounce .readdy-anim-letter-bounce-char {
+    animation: none;
+  }
+}

package/animations/header/roll-in/index.js

@@ -0,0 +1,40 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('roll-in')
+
+/**
+ * Roll In — 文字滚入
+ * 实现：按字符拆分并错峰 rollIn
+ */
+
+import './style.css'
+import { splitTextIntoChars } from '../../../shared/text-split.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+
+const CSS_CLASS = buildAnimClass('roll-in')
+const CHAR_CLASS = buildAnimClass('roll-in-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 ?? 45,
+    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/roll-in/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'
+
+/**
+ * Roll In — 文字滚入
+ *
+ * 用法：
+ *   <AnimRollIn><p>标题文字</p></AnimRollIn>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-roll-in class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimRollIn({ 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/roll-in/style.css

@@ -0,0 +1,31 @@
+/* Roll In — 文字滚入 */
+
+@keyframes readdy-anim-roll-in-char {
+  from {
+    opacity: 0;
+    transform: translateX(-1.1em) rotate(-110deg);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) rotate(0deg);
+  }
+}
+
+.readdy-anim-roll-in {
+  white-space: normal;
+}
+
+.readdy-anim-roll-in .readdy-anim-roll-in-char {
+  display: inline-block;
+  opacity: 0;
+  transform-origin: 50% 60%;
+  animation: readdy-anim-roll-in-char 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-roll-in .readdy-anim-roll-in-char {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}

package/animations/header/shimmer-text/index.js

@@ -0,0 +1,16 @@
+import './style.css'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('shimmer-text')
+
+const CSS_CLASS = buildAnimClass('shimmer-text')
+
+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/header/shimmer-text/react.tsx

@@ -0,0 +1,28 @@
+import React, { useRef, useEffect } from 'react'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { init, destroy } from './index.js'
+import { buildAnimClass } from '../../../shared/constants.js'
+
+const CSS_CLASS = buildAnimClass('shimmer-text')
+
+export function AnimShimmerText({ children }: { children: React.ReactElement }) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (prefersReducedMotion()) {
+      el.classList.add(CSS_CLASS)
+      return () => {
+        el.classList.remove(CSS_CLASS)
+      }
+    }
+
+    init(el)
+    return () => {
+      destroy(el)
+    }
+  }, [])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/header/shimmer-text/style.css

@@ -0,0 +1,29 @@
+@keyframes readdy-anim-shimmer-text {
+  to {
+    background-position: 200% center;
+  }
+}
+
+.readdy-anim-shimmer-text {
+  background: linear-gradient(
+    90deg,
+    #334155 0%,
+    #64748b 34%,
+    #ffffff 50%,
+    #64748b 66%,
+    #334155 100%
+  );
+  background-size: 200% 100%;
+  background-position: 0% center;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: readdy-anim-shimmer-text 2.2s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-shimmer-text {
+    animation: none;
+  }
+}

package/animations/header/shuffle/index.js

@@ -0,0 +1,118 @@
+import './style.css'
+import { splitTextIntoChars } from '../../../shared/text-split.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('shuffle')
+
+const CSS_CLASS = buildAnimClass('shuffle')
+const CHAR_CLASS = buildAnimClass('shuffle-char')
+const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*+-?'
+const stateMap = new WeakMap()
+
+function randomGlyph() {
+  return GLYPHS[Math.floor(Math.random() * GLYPHS.length)]
+}
+
+function clearState(state) {
+  for (const intervalId of state.intervals) {
+    window.clearInterval(intervalId)
+  }
+  for (const timeoutId of state.timeouts) {
+    window.clearTimeout(timeoutId)
+  }
+  state.intervals = []
+  state.timeouts = []
+}
+
+function runShuffle(el, options = {}) {
+  const state = stateMap.get(el)
+  if (!state) return
+
+  clearState(state)
+
+  const chars = [...el.querySelectorAll(`.${CHAR_CLASS}`)]
+  chars.forEach((char, index) => {
+    const finalChar = char.dataset.finalChar ?? char.textContent ?? ''
+    const startDelay = index * (options.stagger ?? 35)
+    const frames = options.shuffleFrames ?? 7
+    const frameDelay = options.frameDelay ?? 40
+
+    char.textContent = randomGlyph()
+    char.classList.remove('is-settled')
+
+    const timeoutId = window.setTimeout(() => {
+      let frame = 0
+      const intervalId = window.setInterval(() => {
+        frame += 1
+        char.textContent = frame >= frames ? finalChar : randomGlyph()
+        char.classList.toggle('is-settled', frame >= frames)
+
+        if (frame >= frames) {
+          window.clearInterval(intervalId)
+        }
+      }, frameDelay)
+
+      state.intervals.push(intervalId)
+    }, startDelay)
+
+    state.timeouts.push(timeoutId)
+  })
+}
+
+export function init(el, options = {}) {
+  if (el.classList.contains(CSS_CLASS)) {
+    return
+  }
+
+  el.classList.add(CSS_CLASS)
+
+  el.style.setProperty('--readdy-anim-shuffle-opacity', `${options.idleOpacity ?? 0.45}`)
+  el.style.setProperty('--readdy-anim-shuffle-translate-y', options.idleOffset ?? '0.08em')
+  el.style.setProperty('--readdy-anim-shuffle-scale', `${options.idleScale ?? 0.98}`)
+  el.style.setProperty('--readdy-anim-shuffle-settle-duration', `${options.settleDuration ?? 180}ms`)
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 35,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 120,
+  })
+
+  const chars = el.querySelectorAll(`.${CHAR_CLASS}`)
+  chars.forEach((char) => {
+    char.dataset.finalChar = char.textContent ?? ''
+  })
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const state = {
+    intervals: [],
+    timeouts: [],
+    onMouseEnter: () => runShuffle(el, options),
+  }
+
+  stateMap.set(el, state)
+  el.addEventListener('mouseenter', state.onMouseEnter)
+  runShuffle(el, options)
+}
+
+export function destroy(el) {
+  const state = stateMap.get(el)
+  if (state) {
+    clearState(state)
+    el.removeEventListener('mouseenter', state.onMouseEnter)
+    stateMap.delete(el)
+  }
+
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-shuffle-opacity')
+  el.style.removeProperty('--readdy-anim-shuffle-translate-y')
+  el.style.removeProperty('--readdy-anim-shuffle-scale')
+  el.style.removeProperty('--readdy-anim-shuffle-settle-duration')
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText
+    delete el.dataset.originalText
+  }
+}

package/animations/header/shuffle/react.tsx

@@ -0,0 +1,50 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+
+type AnimShuffleProps = {
+  children: React.ReactElement
+  stagger?: number
+  shuffleFrames?: number
+  frameDelay?: number
+  maxChars?: number
+  idleOpacity?: number
+  idleOffset?: string
+  idleScale?: number
+  settleDuration?: number
+}
+
+export function AnimShuffle({
+  children,
+  stagger,
+  shuffleFrames,
+  frameDelay,
+  maxChars,
+  idleOpacity,
+  idleOffset,
+  idleScale,
+  settleDuration,
+}: AnimShuffleProps) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el || prefersReducedMotion()) return
+
+    init(el, {
+      stagger,
+      shuffleFrames,
+      frameDelay,
+      maxChars,
+      idleOpacity,
+      idleOffset,
+      idleScale,
+      settleDuration,
+    })
+    return () => {
+      destroy(el)
+    }
+  }, [frameDelay, idleOffset, idleOpacity, idleScale, maxChars, settleDuration, shuffleFrames, stagger])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

package/animations/header/shuffle/style.css

@@ -0,0 +1,25 @@
+.readdy-anim-shuffle {
+  white-space: normal;
+}
+
+.readdy-anim-shuffle .readdy-anim-shuffle-char {
+  display: inline-block;
+  min-width: 0.7ch;
+  opacity: var(--readdy-anim-shuffle-opacity, 0.45);
+  transform: translateY(var(--readdy-anim-shuffle-translate-y, 0.08em)) scale(var(--readdy-anim-shuffle-scale, 0.98));
+  transition:
+    opacity var(--readdy-anim-shuffle-settle-duration, 180ms) ease,
+    transform var(--readdy-anim-shuffle-settle-duration, 180ms) ease;
+}
+
+.readdy-anim-shuffle .readdy-anim-shuffle-char.is-settled {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-shuffle .readdy-anim-shuffle-char {
+    opacity: 1;
+    transform: none;
+  }
+}