@readdy/anim 0.0.21

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

@@ -0,0 +1,71 @@
+.readdy-anim-card-flip {
+  position: relative;
+  display: block;
+  perspective: var(--readdy-anim-card-flip-perspective, 2000px);
+  transform-style: preserve-3d;
+}
+
+.readdy-anim-card-flip .readdy-anim-card-flip-scene {
+  position: relative;
+  width: 100%;
+  min-height: inherit;
+  height: 100%;
+}
+
+.readdy-anim-card-flip .readdy-anim-card-flip-inner {
+  position: relative;
+  width: 100%;
+  min-height: inherit;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform var(--readdy-anim-card-flip-duration, 500ms) cubic-bezier(0.77, 0, 0.175, 1);
+  will-change: transform;
+}
+
+.readdy-anim-card-flip:hover .readdy-anim-card-flip-inner,
+.readdy-anim-card-flip:focus-within .readdy-anim-card-flip-inner {
+  transform: rotateY(180deg);
+}
+
+.readdy-anim-card-flip .readdy-anim-card-flip-face {
+  position: absolute;
+  inset: 0;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  overflow: hidden;
+}
+
+.readdy-anim-card-flip .readdy-anim-card-flip-front {
+  z-index: 2;
+}
+
+.readdy-anim-card-flip .readdy-anim-card-flip-back {
+  transform: rotateY(180deg);
+  filter: saturate(0.92) brightness(0.95);
+}
+
+.readdy-anim-card-flip .readdy-anim-card-flip-back::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.1) 100%),
+    radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 42%);
+  mix-blend-mode: multiply;
+}
+
+.readdy-anim-card-flip .readdy-anim-card-flip-back > * {
+  pointer-events: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-card-flip .readdy-anim-card-flip-inner {
+    transition: none;
+  }
+}

package/animations/card/float-idle/index.js

@@ -0,0 +1,21 @@
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+export const ANIMATION_ID = buildAnimId('float-idle')
+
+/**
+ * Float Idle — 卡片悬浮idle
+ * 实现：CSS-only，init 给元素加 .readdy-anim-float-idle class，destroy 移除
+ */
+
+import './style.css'
+
+const CSS_CLASS = buildAnimClass('float-idle')
+
+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/float-idle/react.tsx

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

@@ -0,0 +1,21 @@
+/* Float Idle — 卡片悬浮idle */
+
+@keyframes readdy-anim-float-idle {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+.readdy-anim-float-idle {
+  animation: readdy-anim-float-idle 3s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-float-idle {
+    animation: none;
+    transform: none;
+  }
+}

package/animations/card/image-magnifier/index.js

@@ -0,0 +1,333 @@
+import './style.css'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+import { attachPointerFollow } from '../../../shared/pointer-follow.js'
+import { resolveCardMediaElement } from '../../../shared/resolve-card-media.js'
+
+export const ANIMATION_ID = buildAnimId('image-magnifier')
+
+const CSS_CLASS = buildAnimClass('image-magnifier')
+const MEDIA_CLASS = buildAnimClass('card-media')
+const ENHANCED_MEDIA_CLASS = buildAnimClass('image-magnifier-media')
+const LENS_CLASS = buildAnimClass('image-magnifier-lens')
+const stateMap = new WeakMap()
+
+function resolveImageUrl(image) {
+  try {
+    return new URL(image.currentSrc || image.src, document.baseURI).href
+  } catch {
+    return image.currentSrc || image.src
+  }
+}
+
+function parsePositionToken(token, axis) {
+  const value = token.trim().toLowerCase()
+  if (!value) {
+    return null
+  }
+
+  if (value === 'center') {
+    return { type: 'factor', value: 0.5 }
+  }
+
+  if (axis === 'x') {
+    if (value === 'left') return { type: 'factor', value: 0 }
+    if (value === 'right') return { type: 'factor', value: 1 }
+  }
+
+  if (axis === 'y') {
+    if (value === 'top') return { type: 'factor', value: 0 }
+    if (value === 'bottom') return { type: 'factor', value: 1 }
+  }
+
+  if (value.endsWith('%')) {
+    const percentage = Number.parseFloat(value)
+    if (Number.isFinite(percentage)) {
+      return { type: 'factor', value: percentage / 100 }
+    }
+  }
+
+  if (value.endsWith('px')) {
+    const pixels = Number.parseFloat(value)
+    if (Number.isFinite(pixels)) {
+      return { type: 'px', value: pixels }
+    }
+  }
+
+  return null
+}
+
+function resolveObjectPosition(image) {
+  const raw = window.getComputedStyle(image).objectPosition || '50% 50%'
+  const tokens = raw.split(/\s+/).filter(Boolean)
+
+  if (tokens.length === 0) {
+    return {
+      x: { type: 'factor', value: 0.5 },
+      y: { type: 'factor', value: 0.5 },
+    }
+  }
+
+  if (tokens.length === 1) {
+    const token = tokens[0]
+    const x = parsePositionToken(token, 'x')
+    const y = parsePositionToken(token, 'y')
+
+    if (y && !x) {
+      return { x: { type: 'factor', value: 0.5 }, y }
+    }
+
+    return {
+      x: x ?? { type: 'factor', value: 0.5 },
+      y: { type: 'factor', value: 0.5 },
+    }
+  }
+
+  let xToken = tokens[0]
+  let yToken = tokens[1]
+  const firstIsVertical = ['top', 'bottom'].includes(tokens[0].toLowerCase())
+  const secondIsHorizontal = ['left', 'right'].includes(tokens[1].toLowerCase())
+
+  if (firstIsVertical && secondIsHorizontal) {
+    xToken = tokens[1]
+    yToken = tokens[0]
+  }
+
+  return {
+    x: parsePositionToken(xToken, 'x') ?? { type: 'factor', value: 0.5 },
+    y: parsePositionToken(yToken, 'y') ?? { type: 'factor', value: 0.5 },
+  }
+}
+
+function resolveObjectOffset(availableSpace, position) {
+  if (position.type === 'px') {
+    return position.value
+  }
+  return availableSpace * position.value
+}
+
+function ensureLens(el) {
+  const media = resolveCardMediaElement(el, MEDIA_CLASS)
+  media.classList.add(ENHANCED_MEDIA_CLASS)
+
+  let lens = media.querySelector(`.${LENS_CLASS}`)
+  if (!lens) {
+    lens = document.createElement('span')
+    lens.className = LENS_CLASS
+    media.appendChild(lens)
+  }
+
+  return { media, lens }
+}
+
+function syncLensSurface(media, lens, zoomFactor) {
+  const image = media.querySelector('img')
+  const computed = window.getComputedStyle(media)
+
+  if (image?.currentSrc || image?.src) {
+    lens.style.backgroundImage = `url("${resolveImageUrl(image)}")`
+    lens.style.backgroundColor = 'transparent'
+    lens.style.backgroundRepeat = 'no-repeat'
+    lens.style.removeProperty('background-size')
+    return
+  }
+
+  lens.style.backgroundImage = computed.backgroundImage
+  lens.style.backgroundColor = computed.backgroundColor
+  lens.style.backgroundRepeat = computed.backgroundRepeat
+  lens.style.removeProperty('background-size')
+}
+
+function primeLensSurface(el, state, zoomFactor) {
+  const { media, lens, image } = state
+  const markReady = () => {
+    if (stateMap.get(el) !== state) {
+      return
+    }
+    state.surfaceReady = true
+    syncLensSurface(media, lens, zoomFactor)
+    if (state.lastPointer) {
+      syncLensPosition({
+        mediaRect: media.getBoundingClientRect(),
+        lens,
+        image,
+        pointerX: state.lastPointer.x,
+        pointerY: state.lastPointer.y,
+        lensSize: state.lensSize,
+        zoomFactor,
+      })
+    }
+  }
+
+  if (!(image?.currentSrc || image?.src)) {
+    markReady()
+    return
+  }
+
+  syncLensSurface(media, lens, zoomFactor)
+
+  // If the image is already visible enough to be used as a magnifier source,
+  // don't block pointer interaction on decode/load timing.
+  state.surfaceReady = true
+
+  if (image.complete && image.naturalWidth) {
+    if (typeof image.decode === 'function') {
+      image.decode().then(markReady).catch(markReady)
+      return
+    }
+
+    markReady()
+    return
+  }
+
+  state.onLoad = () => {
+    markReady()
+  }
+  image.addEventListener('load', state.onLoad, { once: true })
+}
+
+function syncLensPosition({
+  mediaRect,
+  lens,
+  image,
+  pointerX,
+  pointerY,
+  lensSize,
+  zoomFactor,
+}) {
+  const lensX = pointerX - mediaRect.left
+  const lensY = pointerY - mediaRect.top
+
+  lens.style.setProperty('--readdy-anim-image-magnifier-lens-x', `${lensX}px`)
+  lens.style.setProperty('--readdy-anim-image-magnifier-lens-y', `${lensY}px`)
+  lens.style.opacity = '1'
+
+  if (image?.currentSrc || image?.src) {
+    const imageRect = image.getBoundingClientRect()
+    const naturalWidth = image.naturalWidth
+    const naturalHeight = image.naturalHeight
+
+    if (naturalWidth && naturalHeight && imageRect.width && imageRect.height) {
+      const localX = Math.min(Math.max(pointerX - imageRect.left, 0), imageRect.width)
+      const localY = Math.min(Math.max(pointerY - imageRect.top, 0), imageRect.height)
+      const scale = Math.max(imageRect.width / naturalWidth, imageRect.height / naturalHeight)
+      const renderedWidth = naturalWidth * scale
+      const renderedHeight = naturalHeight * scale
+      const objectPosition = resolveObjectPosition(image)
+      const offsetX = resolveObjectOffset(imageRect.width - renderedWidth, objectPosition.x)
+      const offsetY = resolveObjectOffset(imageRect.height - renderedHeight, objectPosition.y)
+
+      lens.style.backgroundSize = `${renderedWidth * zoomFactor}px ${renderedHeight * zoomFactor}px`
+      lens.style.backgroundPosition = `${
+        -(localX - offsetX) * zoomFactor + lensSize / 2
+      }px ${-(localY - offsetY) * zoomFactor + lensSize / 2}px`
+      return
+    }
+  }
+
+  const localX = (lensX / mediaRect.width) * 100
+  const localY = (lensY / mediaRect.height) * 100
+  lens.style.setProperty('--readdy-anim-magnifier-x', `${localX}%`)
+  lens.style.setProperty('--readdy-anim-magnifier-y', `${localY}%`)
+  lens.style.backgroundPosition = `${localX}% ${localY}%`
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  el.classList.add(CSS_CLASS)
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  const lensSize = options.lensSize ?? 104
+  const zoom = options.zoom ?? 320
+  const zoomFactor = zoom / 100
+  const fadeDuration = options.fadeDuration ?? 160
+
+  el.style.setProperty('--readdy-anim-image-magnifier-lens-size', `${lensSize}px`)
+  el.style.setProperty('--readdy-anim-image-magnifier-zoom', `${zoom}%`)
+  el.style.setProperty('--readdy-anim-image-magnifier-fade-duration', `${fadeDuration}ms`)
+
+  const { media, lens } = ensureLens(el)
+  const image = media.querySelector('img')
+  const state = {
+    media,
+    lens,
+    cleanupPointerFollow: () => {},
+    image,
+    onLoad: null,
+    surfaceReady: false,
+    lastPointer: null,
+    lensSize,
+  }
+
+  const onMove = (event, context) => {
+    state.lastPointer = {
+      x: event.clientX,
+      y: event.clientY,
+    }
+    if (!state.surfaceReady) {
+      return
+    }
+
+    syncLensPosition({
+      mediaRect: context.rect,
+      lens,
+      image,
+      pointerX: event.clientX,
+      pointerY: event.clientY,
+      lensSize,
+      zoomFactor,
+    })
+  }
+
+  const onLeave = () => {
+    lens.style.opacity = '0'
+    state.lastPointer = null
+  }
+
+  const onEnter = (event, context) => {
+    state.lastPointer = {
+      x: event.clientX,
+      y: event.clientY,
+    }
+    if (!state.surfaceReady) {
+      return
+    }
+
+    syncLensPosition({
+      mediaRect: context.rect,
+      lens,
+      image,
+      pointerX: event.clientX,
+      pointerY: event.clientY,
+      lensSize,
+      zoomFactor,
+    })
+  }
+
+  const cleanupPointerFollow = attachPointerFollow(media, { onEnter, onMove, onLeave })
+  state.cleanupPointerFollow = cleanupPointerFollow
+  stateMap.set(el, state)
+  primeLensSurface(el, state, zoomFactor)
+}
+
+export function destroy(el) {
+  const state = stateMap.get(el)
+  if (state) {
+    state.cleanupPointerFollow()
+    if (state.image && state.onLoad) {
+      state.image.removeEventListener('load', state.onLoad)
+    }
+    state.media.classList.remove(ENHANCED_MEDIA_CLASS)
+    stateMap.delete(el)
+  }
+
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-image-magnifier-lens-size')
+  el.style.removeProperty('--readdy-anim-image-magnifier-zoom')
+  el.style.removeProperty('--readdy-anim-image-magnifier-fade-duration')
+  el.querySelector(`.${LENS_CLASS}`)?.remove()
+}

package/animations/card/image-magnifier/react.tsx

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

package/animations/card/image-magnifier/style.css

@@ -0,0 +1,42 @@
+.readdy-anim-image-magnifier .readdy-anim-card-media,
+.readdy-anim-image-magnifier .readdy-anim-image-magnifier-media {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.85), transparent 38%),
+    linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(167, 139, 250, 0.84));
+}
+
+.readdy-anim-image-magnifier .readdy-anim-image-magnifier-lens {
+  position: absolute;
+  box-sizing: border-box;
+  width: var(--readdy-anim-image-magnifier-lens-size, 104px);
+  height: var(--readdy-anim-image-magnifier-lens-size, 104px);
+  border-radius: 999px;
+  border: 2px solid rgba(255, 255, 255, 0.86);
+  box-shadow:
+    0 16px 34px rgba(15, 23, 42, 0.22),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  will-change: transform, opacity, background-position, background-size;
+  transform:
+    translate3d(
+      var(--readdy-anim-image-magnifier-lens-x, 50%),
+      var(--readdy-anim-image-magnifier-lens-y, 50%),
+      0
+    )
+    translate(-50%, -50%);
+  opacity: 0;
+  background-size: var(--readdy-anim-image-magnifier-zoom, 320%) var(--readdy-anim-image-magnifier-zoom, 320%);
+  background-position: var(--readdy-anim-magnifier-x, 50%) var(--readdy-anim-magnifier-y, 50%);
+  transition: opacity var(--readdy-anim-image-magnifier-fade-duration, 160ms) ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-image-magnifier .readdy-anim-image-magnifier-lens {
+    opacity: 0;
+    transition: none;
+  }
+}

package/animations/card/image-zoom-rotate/index.js

@@ -0,0 +1,48 @@
+import './style.css'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+import { resolveCardMediaElement } from '../../../shared/resolve-card-media.js'
+
+export const ANIMATION_ID = buildAnimId('image-zoom-rotate')
+
+const CSS_CLASS = buildAnimClass('image-zoom-rotate')
+const MEDIA_CLASS = buildAnimClass('card-media')
+
+const autoMediaState = new WeakMap()
+
+export function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+
+  el.style.setProperty('--readdy-anim-image-zoom-scale', `${options.scale ?? 1.08}`)
+  el.style.setProperty('--readdy-anim-image-zoom-rotate', `${options.rotate ?? 2}deg`)
+  el.style.setProperty('--readdy-anim-image-zoom-duration', `${options.duration ?? 500}ms`)
+
+  const media = resolveCardMediaElement(el, MEDIA_CLASS)
+  if (!media) return
+
+  const state = {
+    media,
+    addedMediaClass: false,
+  }
+
+  if (!media.classList.contains(MEDIA_CLASS)) {
+    media.classList.add(MEDIA_CLASS)
+    state.addedMediaClass = true
+  }
+
+  autoMediaState.set(el, state)
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-image-zoom-scale')
+  el.style.removeProperty('--readdy-anim-image-zoom-rotate')
+  el.style.removeProperty('--readdy-anim-image-zoom-duration')
+
+  const state = autoMediaState.get(el)
+  if (state?.addedMediaClass) {
+    state.media?.classList.remove(MEDIA_CLASS)
+  }
+  autoMediaState.delete(el)
+}

package/animations/card/image-zoom-rotate/react.tsx

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

package/animations/card/image-zoom-rotate/style.css

@@ -0,0 +1,20 @@
+.readdy-anim-image-zoom-rotate {
+  overflow: hidden;
+}
+
+.readdy-anim-image-zoom-rotate .readdy-anim-card-media {
+  transform-origin: center;
+  transition: transform var(--readdy-anim-image-zoom-duration, 500ms) ease;
+}
+
+.readdy-anim-image-zoom-rotate:hover .readdy-anim-card-media {
+  transform:
+    scale(var(--readdy-anim-image-zoom-scale, 1.08))
+    rotate(var(--readdy-anim-image-zoom-rotate, 2deg));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-image-zoom-rotate:hover .readdy-anim-card-media {
+    transform: none;
+  }
+}

package/animations/card/pop-in-stack/index.js

@@ -0,0 +1,25 @@
+import './style.css'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('pop-in-stack')
+
+const CSS_CLASS = buildAnimClass('pop-in-stack')
+
+export function init(el, options = {}) {
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+
+  el.style.setProperty('--readdy-anim-pop-delay', `${options.delay ?? 0}ms`)
+  el.style.setProperty('--readdy-anim-pop-duration', `${options.duration ?? 600}ms`)
+  el.style.setProperty('--readdy-anim-pop-offset', `${options.offset ?? 18}px`)
+  el.style.setProperty('--readdy-anim-pop-scale-start', `${options.scaleStart ?? 0.88}`)
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-pop-delay')
+  el.style.removeProperty('--readdy-anim-pop-duration')
+  el.style.removeProperty('--readdy-anim-pop-offset')
+  el.style.removeProperty('--readdy-anim-pop-scale-start')
+}