@readdy/anim 0.0.21

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

@@ -0,0 +1,25 @@
+.readdy-anim-sketch-button {
+  background: #ffffff;
+  color: #0f172a;
+  border: 2px solid #0f172a;
+  box-shadow: 0 0 0 #0f172a;
+  transition:
+    transform 0.24s ease,
+    box-shadow 0.24s ease;
+}
+
+.readdy-anim-sketch-button:hover {
+  transform: translate(-4px, -4px);
+  box-shadow: 4px 4px 0 #0f172a;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-sketch-button {
+    transition: none;
+  }
+
+  .readdy-anim-sketch-button:hover {
+    transform: none;
+    box-shadow: 0 0 0 #0f172a;
+  }
+}

package/animations/card/blur-rise/index.js

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('blur-rise')
+
+/**
+ * Blur Rise — 卡片从模糊中升起
+ * 实现：CSS-only，init 给元素加 .readdy-anim-blur-rise class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('blur-rise')
+
+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/blur-rise/react.tsx

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+
+/**
+ * Blur Rise — 卡片从模糊中升起
+ *
+ * 用法：
+ *   <AnimBlurRise><div className="card">内容</div></AnimBlurRise>
+ *
+ * 不加 wrapper div — 通过 cloneElement 给子元素注入 ref，加/删 .readdy-anim-blur-rise class
+ * 必须恰好包裹一个子元素
+ */
+export function AnimBlurRise({ 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/blur-rise/style.css

@@ -0,0 +1,27 @@
+/* Blur Rise — 卡片从模糊中升起 */
+
+@keyframes readdy-anim-blur-rise {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+    filter: blur(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+.readdy-anim-blur-rise {
+  animation: readdy-anim-blur-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-blur-rise {
+    animation: none;
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+}

package/animations/card/bounce-in-bottom/index.js

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('bounce-in-bottom')
+
+/**
+ * Bounce In Bottom — 卡片从底部弹入
+ * 实现：CSS-only，init 给元素加 .readdy-anim-bounce-in-bottom class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('bounce-in-bottom')
+
+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/bounce-in-bottom/react.tsx

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

@@ -0,0 +1,31 @@
+/* Bounce In Bottom — 卡片从底部弹入 */
+
+@keyframes readdy-anim-bounce-in-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  65% {
+    opacity: 1;
+    transform: translateY(-6px);
+  }
+  85% {
+    transform: translateY(3px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.readdy-anim-bounce-in-bottom {
+  animation: readdy-anim-bounce-in-bottom 0.85s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-bounce-in-bottom {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}

package/animations/card/card-fan-spread/index.js

@@ -0,0 +1,146 @@
+import './style.css'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('card-fan-spread')
+
+const CSS_CLASS = buildAnimClass('card-fan-spread')
+const STACK_CLASS = buildAnimClass('card-fan-stack')
+const ITEM_CLASS = buildAnimClass('card-fan-item')
+const SURFACE_CLASS = buildAnimClass('card-fan-surface')
+const VISUAL_CLASS = buildAnimClass('card-fan-visual')
+const VISUAL_TEXT_CLASS = buildAnimClass('card-fan-visual-text')
+const stateMap = new WeakMap()
+
+function buildCardVisual(el) {
+  const visual = el.cloneNode(true)
+  visual.classList.add(VISUAL_CLASS)
+  visual.removeAttribute('id')
+  visual.removeAttribute('tabindex')
+  visual.removeAttribute('aria-labelledby')
+  visual.removeAttribute('aria-describedby')
+  visual.removeAttribute('aria-controls')
+  visual.querySelectorAll('[id]').forEach((node) => node.removeAttribute('id'))
+  visual.querySelectorAll('button, a, input, textarea, select, [tabindex]').forEach((node) => {
+    node.setAttribute('aria-hidden', 'true')
+    node.setAttribute('tabindex', '-1')
+    node.style.pointerEvents = 'none'
+  })
+  visual.querySelectorAll('video, audio').forEach((node) => {
+    node.pause?.()
+    node.removeAttribute('autoplay')
+    node.removeAttribute('controls')
+  })
+  visual.querySelectorAll('*').forEach((node) => {
+    if (node.closest(`.${buildAnimClass('card-media')}`)) return
+    if (node.children.length === 0 && (node.textContent ?? '').trim()) {
+      node.classList.add(VISUAL_TEXT_CLASS)
+    }
+  })
+  return visual
+}
+
+function buildLayer(visualTemplate, index, radius) {
+  const item = document.createElement('div')
+  item.className = ITEM_CLASS
+  item.setAttribute('aria-hidden', 'true')
+  item.style.setProperty('--readdy-anim-card-fan-index', `${index}`)
+
+  const surface = document.createElement('div')
+  surface.className = SURFACE_CLASS
+  surface.style.borderRadius = radius
+  surface.appendChild(visualTemplate.cloneNode(true))
+  item.appendChild(surface)
+  return item
+}
+
+function ensureStack(el, visual) {
+  const stack = document.createElement('div')
+  stack.className = STACK_CLASS
+  stack.setAttribute('aria-hidden', 'true')
+
+  for (let index = 0; index < 2; index += 1) {
+    stack.appendChild(buildLayer(visual.visualTemplate, index, visual.radius))
+  }
+
+  el.insertBefore(stack, el.firstChild)
+  return stack
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  el.classList.add(CSS_CLASS)
+  const spreadDistance = options.spreadDistance ?? 72
+  const spreadRotate = options.spreadRotate ?? 24
+  const depthRotate = options.depthRotate ?? 18
+  const lift = options.lift ?? 14
+  const duration = options.duration ?? 550
+
+  el.style.setProperty('--readdy-anim-card-fan-distance', `${spreadDistance}px`)
+  el.style.setProperty('--readdy-anim-card-fan-rotate', `${spreadRotate}deg`)
+  el.style.setProperty('--readdy-anim-card-fan-depth-rotate', `${depthRotate}deg`)
+  el.style.setProperty('--readdy-anim-card-fan-lift', `${lift}px`)
+  el.style.setProperty('--readdy-anim-card-fan-duration', `${duration}ms`)
+
+  const visual = {
+    visualTemplate: buildCardVisual(el),
+    radius: window.getComputedStyle(el).borderRadius || 'inherit',
+  }
+  const stack = ensureStack(el, visual)
+  const state = {
+    savedTabIndex: el.getAttribute('tabindex'),
+    toggle: null,
+    onKeyDown: null,
+    stack,
+  }
+
+  el.tabIndex = el.tabIndex >= 0 ? el.tabIndex : 0
+
+  if (prefersReducedMotion()) {
+    stateMap.set(el, state)
+    return
+  }
+
+  state.toggle = () => {
+    el.classList.toggle('is-spread')
+  }
+
+  state.onKeyDown = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      state.toggle()
+    }
+  }
+
+  el.addEventListener('click', state.toggle)
+  el.addEventListener('keydown', state.onKeyDown)
+  stateMap.set(el, state)
+}
+
+export function destroy(el) {
+  const state = stateMap.get(el)
+  if (state) {
+    if (state.toggle) {
+      el.removeEventListener('click', state.toggle)
+    }
+    if (state.onKeyDown) {
+      el.removeEventListener('keydown', state.onKeyDown)
+    }
+    if (state.savedTabIndex === null) {
+      el.removeAttribute('tabindex')
+    } else {
+      el.setAttribute('tabindex', state.savedTabIndex)
+    }
+    state.stack?.remove()
+    stateMap.delete(el)
+  }
+
+  el.classList.remove(CSS_CLASS, 'is-spread')
+  el.style.removeProperty('--readdy-anim-card-fan-distance')
+  el.style.removeProperty('--readdy-anim-card-fan-rotate')
+  el.style.removeProperty('--readdy-anim-card-fan-depth-rotate')
+  el.style.removeProperty('--readdy-anim-card-fan-lift')
+  el.style.removeProperty('--readdy-anim-card-fan-duration')
+  el.querySelector(`.${STACK_CLASS}`)?.remove()
+}

package/animations/card/card-fan-spread/react.tsx

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

package/animations/card/card-fan-spread/style.css

@@ -0,0 +1,90 @@
+.readdy-anim-card-fan-spread {
+  position: relative;
+  isolation: isolate;
+  overflow: visible;
+  cursor: pointer;
+  perspective: 900px;
+  transform-style: preserve-3d;
+}
+
+.readdy-anim-card-fan-spread::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.readdy-anim-card-fan-spread > :not(.readdy-anim-card-fan-stack) {
+  position: relative;
+  z-index: 3;
+}
+
+.readdy-anim-card-fan-spread .readdy-anim-card-fan-stack {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.readdy-anim-card-fan-spread .readdy-anim-card-fan-item {
+  position: absolute;
+  inset: 0;
+  transform-origin: 18% 85%;
+  transition: transform var(--readdy-anim-card-fan-duration, 550ms) cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+.readdy-anim-card-fan-spread .readdy-anim-card-fan-item:nth-child(1) {
+  transform: rotate(-3deg) translate(-6px, 8px) scale(0.985);
+}
+
+.readdy-anim-card-fan-spread .readdy-anim-card-fan-item:nth-child(2) {
+  transform: rotate(3deg) translate(6px, 8px) scale(0.985);
+}
+
+.readdy-anim-card-fan-spread .readdy-anim-card-fan-surface {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.16);
+  opacity: 0.86;
+}
+
+.readdy-anim-card-fan-spread .readdy-anim-card-fan-surface > * {
+  pointer-events: none !important;
+}
+
+.readdy-anim-card-fan-spread .readdy-anim-card-fan-visual-text {
+  opacity: 0.22 !important;
+  text-shadow: none !important;
+  filter: blur(0.15px);
+}
+
+.readdy-anim-card-fan-spread.is-spread .readdy-anim-card-fan-item:nth-child(1) {
+  transform:
+    rotateY(var(--readdy-anim-card-fan-depth-rotate, 18deg))
+    rotate(calc(var(--readdy-anim-card-fan-rotate, 24deg) * -1))
+    translate(
+      calc(var(--readdy-anim-card-fan-distance, 72px) * -1),
+      calc(var(--readdy-anim-card-fan-lift, 14px) * -0.714)
+    );
+}
+
+.readdy-anim-card-fan-spread.is-spread .readdy-anim-card-fan-item:nth-child(2) {
+  transform:
+    rotateY(calc(var(--readdy-anim-card-fan-depth-rotate, 18deg) * -1))
+    rotate(var(--readdy-anim-card-fan-rotate, 24deg))
+    translate(
+      var(--readdy-anim-card-fan-distance, 72px),
+      calc(var(--readdy-anim-card-fan-lift, 14px) * -0.714)
+    );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-card-fan-spread .readdy-anim-card-fan-item {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,203 @@
+import './style.css'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('card-flip')
+
+const CSS_CLASS = buildAnimClass('card-flip')
+const SCENE_CLASS = buildAnimClass('card-flip-scene')
+const INNER_CLASS = buildAnimClass('card-flip-inner')
+const FACE_CLASS = buildAnimClass('card-flip-face')
+const FRONT_CLASS = buildAnimClass('card-flip-front')
+const BACK_CLASS = buildAnimClass('card-flip-back')
+
+const stateMap = new WeakMap()
+const FACE_STYLE_PROPS = [
+  'background',
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundSize',
+  'backgroundPosition',
+  'backgroundRepeat',
+  'backgroundClip',
+  'border',
+  'borderTop',
+  'borderRight',
+  'borderBottom',
+  'borderLeft',
+  'borderRadius',
+  'boxShadow',
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'color',
+  'backdropFilter',
+  'WebkitBackdropFilter',
+]
+
+function createEl(tag, className) {
+  const el = document.createElement(tag)
+  if (className) el.className = className
+  return el
+}
+
+function collectRenderableNodes(el) {
+  return Array.from(el.childNodes).filter((node) => {
+    if (node.nodeType !== Node.TEXT_NODE) return true
+    return (node.textContent ?? '').trim().length > 0
+  })
+}
+
+function sanitizeBackFaceClone(root) {
+  if (!(root instanceof HTMLElement)) {
+    return
+  }
+
+  const nodes = [root, ...root.querySelectorAll('*')]
+
+  root.removeAttribute('id')
+  root.removeAttribute('tabindex')
+  root.removeAttribute('aria-labelledby')
+  root.removeAttribute('aria-describedby')
+  root.removeAttribute('aria-controls')
+  root.removeAttribute('for')
+
+  nodes.forEach((node) => {
+    if (node instanceof HTMLElement) {
+      node.removeAttribute('id')
+    }
+  })
+
+  nodes.forEach((node) => {
+    if (
+      !(node instanceof HTMLElement) ||
+      !node.matches(
+        'a, button, input, textarea, select, summary, [tabindex], [contenteditable], label[for]'
+      )
+    ) {
+      return
+    }
+
+      node.setAttribute('aria-hidden', 'true')
+      node.setAttribute('tabindex', '-1')
+      node.removeAttribute('for')
+      node.style.pointerEvents = 'none'
+      if (
+        node instanceof HTMLInputElement ||
+        node instanceof HTMLTextAreaElement ||
+        node instanceof HTMLSelectElement ||
+        node instanceof HTMLButtonElement
+      ) {
+        node.disabled = true
+      }
+    })
+}
+
+function buildBackFace(nodes) {
+  const back = createEl('div', `${FACE_CLASS} ${BACK_CLASS}`)
+  back.setAttribute('aria-hidden', 'true')
+  back.append(
+    ...nodes.map((node) => {
+      const clone = node.cloneNode(true)
+      sanitizeBackFaceClone(clone)
+      return clone
+    })
+  )
+  return back
+}
+
+function applyFaceShellStyles(host, face) {
+  const styles = window.getComputedStyle(host)
+  FACE_STYLE_PROPS.forEach((prop) => {
+    const value = styles[prop]
+    if (value) {
+      face.style[prop] = value
+    }
+  })
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  const originalNodes = collectRenderableNodes(el)
+  const rect = el.getBoundingClientRect()
+  const previousMinHeight = el.style.minHeight
+  const previousHeight = el.style.height
+  const previousTabIndex = el.getAttribute('tabindex')
+  const previousInlineStyles = {
+    background: el.style.background,
+    backgroundColor: el.style.backgroundColor,
+    backgroundImage: el.style.backgroundImage,
+    border: el.style.border,
+    boxShadow: el.style.boxShadow,
+    padding: el.style.padding,
+    overflow: el.style.overflow,
+  }
+
+  const scene = createEl('div', SCENE_CLASS)
+  const inner = createEl('div', INNER_CLASS)
+  const front = createEl('div', `${FACE_CLASS} ${FRONT_CLASS}`)
+  const back = buildBackFace(originalNodes)
+
+  applyFaceShellStyles(el, front)
+  applyFaceShellStyles(el, back)
+
+  front.append(...originalNodes)
+  inner.append(front, back)
+  scene.appendChild(inner)
+
+  stateMap.set(el, {
+    originalNodes,
+    previousMinHeight,
+    previousHeight,
+    previousTabIndex,
+    previousInlineStyles,
+  })
+
+  el.classList.add(CSS_CLASS)
+  el.style.setProperty('--readdy-anim-card-flip-duration', `${options.duration ?? 500}ms`)
+  el.style.setProperty('--readdy-anim-card-flip-perspective', `${options.perspective ?? 2000}px`)
+  if (rect.height > 0) {
+    el.style.minHeight = `${rect.height}px`
+  }
+  el.style.background = 'transparent'
+  el.style.backgroundColor = 'transparent'
+  el.style.backgroundImage = 'none'
+  el.style.border = 'none'
+  el.style.boxShadow = 'none'
+  el.style.padding = '0'
+  el.style.overflow = 'visible'
+  el.tabIndex = el.tabIndex >= 0 ? el.tabIndex : 0
+  el.replaceChildren(scene)
+}
+
+export function destroy(el) {
+  const state = stateMap.get(el)
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-card-flip-duration')
+  el.style.removeProperty('--readdy-anim-card-flip-perspective')
+
+  if (state) {
+    if (state.previousMinHeight) {
+      el.style.minHeight = state.previousMinHeight
+    } else {
+      el.style.removeProperty('min-height')
+    }
+    if (state.previousHeight) {
+      el.style.height = state.previousHeight
+    } else {
+      el.style.removeProperty('height')
+    }
+    if (state.previousTabIndex === null) {
+      el.removeAttribute('tabindex')
+    } else {
+      el.setAttribute('tabindex', state.previousTabIndex)
+    }
+    Object.assign(el.style, state.previousInlineStyles)
+    el.replaceChildren(...state.originalNodes)
+    stateMap.delete(el)
+  } else {
+    el.removeAttribute('tabindex')
+  }
+}

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

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from 'react'
+import { init, destroy } from './index.js'
+
+export interface AnimCardFlipProps {
+  children: React.ReactElement
+  duration?: number
+  perspective?: number
+}
+
+/**
+ * Card Flip 会保留传入的 card 内容作为正面，同时使用当前内容克隆出背面。
+ * 适合直接包裹现有 card 宿主，而不是注入固定模板。
+ */
+export function AnimCardFlip({
+  children,
+  duration = 500,
+  perspective = 2000,
+}: AnimCardFlipProps) {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    init(el, {
+      duration,
+      perspective,
+    })
+    return () => {
+      destroy(el)
+    }
+  }, [duration, perspective])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}