@readdy/anim 0.0.21

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

@@ -0,0 +1,72 @@
+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('split-text')
+
+const CSS_CLASS = buildAnimClass('split-text')
+const VISIBLE_CLASS = 'is-visible'
+const CHAR_CLASS = buildAnimClass('split-text-char')
+const observerMap = new WeakMap()
+
+function reveal(el) {
+  if (!el.classList.contains(VISIBLE_CLASS)) {
+    el.classList.add(VISIBLE_CLASS)
+  }
+}
+
+export function init(el, options = {}) {
+  if (el.classList.contains(CSS_CLASS)) {
+    return
+  }
+
+  el.classList.add(CSS_CLASS)
+
+  splitTextIntoChars(el, {
+    stagger: options.stagger ?? 50,
+    charClass: CHAR_CLASS,
+    maxChars: options.maxChars ?? 180,
+  })
+
+  if (prefersReducedMotion()) {
+    reveal(el)
+    return
+  }
+
+  if (typeof IntersectionObserver === 'undefined') {
+    reveal(el)
+    return
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        reveal(el)
+        observer.disconnect()
+        observerMap.delete(el)
+      }
+    },
+    {
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? '-100px 0px',
+    }
+  )
+
+  observer.observe(el)
+  observerMap.set(el, observer)
+}
+
+export function destroy(el) {
+  const observer = observerMap.get(el)
+  if (observer) {
+    observer.disconnect()
+    observerMap.delete(el)
+  }
+
+  el.classList.remove(CSS_CLASS, VISIBLE_CLASS)
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText
+    delete el.dataset.originalText
+  }
+}

package/animations/header/split-text/react.tsx

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

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

@@ -0,0 +1,31 @@
+@keyframes readdy-anim-split-text-char {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.readdy-anim-split-text {
+  white-space: normal;
+}
+
+.readdy-anim-split-text .readdy-anim-split-text-char {
+  display: inline-block;
+  opacity: 0;
+}
+
+.readdy-anim-split-text.is-visible .readdy-anim-split-text-char {
+  animation: readdy-anim-split-text-char 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-split-text .readdy-anim-split-text-char {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}

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

@@ -0,0 +1,267 @@
+import './style.css'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('text-type')
+
+const CSS_CLASS = buildAnimClass('text-type')
+const CONTENT_CLASS = buildAnimClass('text-type-content')
+const CURSOR_CLASS = buildAnimClass('text-type-cursor')
+const RICH_CLASS = buildAnimClass('text-type-rich')
+const stateMap = new WeakMap()
+
+function parsePhrases(el, options) {
+  if (Array.isArray(options.texts) && options.texts.length > 0) {
+    return {
+      phrases: options.texts.map(String),
+      source: 'options',
+    }
+  }
+
+  const raw = el.dataset.textTypeValues?.trim()
+  if (raw) {
+    try {
+      const parsed = JSON.parse(raw)
+      if (Array.isArray(parsed) && parsed.length > 0) {
+        return {
+          phrases: parsed.map(String),
+          source: 'data',
+        }
+      }
+    } catch {}
+
+    return {
+      phrases: raw
+        .split('|')
+        .map((item) => item.trim())
+        .filter(Boolean),
+      source: 'data',
+    }
+  }
+
+  return {
+    phrases: [el.textContent ?? ''],
+    source: 'dom',
+  }
+}
+
+function clearState(state) {
+  for (const timeoutId of state.timeouts) {
+    window.clearTimeout(timeoutId)
+  }
+  state.timeouts.clear()
+}
+
+function schedule(state, fn, delay) {
+  const timeoutId = window.setTimeout(() => {
+    state.timeouts.delete(timeoutId)
+    fn()
+  }, delay)
+  state.timeouts.add(timeoutId)
+  return timeoutId
+}
+
+function hasRichTextStructure(el) {
+  return Array.from(el.childNodes).some((node) => node.nodeType === Node.ELEMENT_NODE)
+}
+
+function normalizeComparableText(text) {
+  return String(text).replace(/\s+/g, '')
+}
+
+function shouldUseRichMode(el, phrases) {
+  if (!hasRichTextStructure(el)) {
+    return false
+  }
+
+  if (phrases.length !== 1) {
+    return false
+  }
+
+  return normalizeComparableText(phrases[0]) === normalizeComparableText(el.textContent ?? '')
+}
+
+function collectRichSegments(el) {
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
+  const segments = []
+  let node = walker.nextNode()
+
+  while (node) {
+    segments.push({
+      node,
+      text: node.textContent ?? '',
+    })
+    node = walker.nextNode()
+  }
+
+  return segments
+}
+
+function setupRichContent(el) {
+  const segments = collectRichSegments(el)
+  const cursor = document.createElement('span')
+  cursor.className = CURSOR_CLASS
+  cursor.setAttribute('aria-hidden', 'true')
+  el.appendChild(cursor)
+
+  return {
+    cursor,
+    segments,
+  }
+}
+
+function renderRich(state, visibleCount) {
+  let remaining = visibleCount
+
+  for (const segment of state.segments) {
+    const nextLength = Math.max(0, Math.min(segment.text.length, remaining))
+    segment.node.textContent = segment.text.slice(0, nextLength)
+    remaining -= segment.text.length
+  }
+}
+
+function render(state, text) {
+  if (state.mode === 'rich') {
+    renderRich(state, text.length)
+    return
+  }
+
+  state.content.textContent = text
+}
+
+function typePhrase(state, phraseIndex) {
+  const phrase = state.phrases[phraseIndex]
+  const typingSpeed = state.typingSpeed
+  const deletingSpeed = state.deletingSpeed
+  const nextIndex = (phraseIndex + 1) % state.phrases.length
+
+  let cursor = 0
+
+  const typeNext = () => {
+    cursor += 1
+    render(state, phrase.slice(0, cursor))
+
+    if (cursor < phrase.length) {
+      schedule(state, typeNext, typingSpeed)
+      return
+    }
+
+    if (state.phrases.length === 1) {
+      return
+    }
+
+    schedule(state, () => deletePhrase(phrase, nextIndex), state.pauseDuration)
+  }
+
+  const deletePhrase = (currentPhrase, targetIndex) => {
+    let remaining = currentPhrase.length
+
+    const deleteNext = () => {
+      remaining -= 1
+      render(state, currentPhrase.slice(0, remaining))
+
+      if (remaining > 0) {
+        schedule(state, deleteNext, deletingSpeed)
+        return
+      }
+
+      schedule(state, () => typePhrase(state, targetIndex), typingSpeed)
+    }
+
+    schedule(state, deleteNext, deletingSpeed)
+  }
+
+  schedule(state, typeNext, typingSpeed)
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  if (!el.dataset.originalText) {
+    el.dataset.originalText = el.innerHTML
+  }
+
+  const { phrases, source } = parsePhrases(el, options)
+  const richMode = shouldUseRichMode(el, phrases)
+  const finalPhrase = phrases[phrases.length - 1] ?? ''
+
+  el.classList.add(CSS_CLASS)
+  el.classList.toggle(RICH_CLASS, richMode)
+  el.style.setProperty('--readdy-anim-text-type-gap', options.gap ?? '0.08em')
+  el.style.setProperty('--readdy-anim-text-type-caret-width', options.caretWidth ?? '0.08em')
+  el.style.setProperty('--readdy-anim-text-type-caret-blink-duration', `${options.caretBlinkDuration ?? 900}ms`)
+  if (richMode) {
+    const richContent = setupRichContent(el)
+    const state = {
+      mode: 'rich',
+      ...richContent,
+      phrases,
+      typingSpeed: options.typingSpeed ?? 75,
+      deletingSpeed: options.deletingSpeed ?? 45,
+      pauseDuration: options.pauseDuration ?? 1500,
+      timeouts: new Set(),
+    }
+
+    stateMap.set(el, state)
+
+    if (prefersReducedMotion()) {
+      render(state, finalPhrase)
+      return
+    }
+
+    render(state, '')
+    typePhrase(state, 0)
+    return
+  }
+
+  el.innerHTML = `<span class="${CONTENT_CLASS}"></span><span class="${CURSOR_CLASS}" aria-hidden="true"></span>`
+
+  const state = {
+    mode: 'plain',
+    content: el.querySelector(`.${CONTENT_CLASS}`),
+    cursor: el.querySelector(`.${CURSOR_CLASS}`),
+    phrases,
+    typingSpeed: options.typingSpeed ?? 75,
+    deletingSpeed: options.deletingSpeed ?? 45,
+    pauseDuration: options.pauseDuration ?? 1500,
+    timeouts: new Set(),
+  }
+
+  stateMap.set(el, state)
+
+  if (prefersReducedMotion()) {
+    render(state, finalPhrase)
+    return
+  }
+
+  render(state, '')
+  typePhrase(state, 0)
+}
+
+export function destroy(el) {
+  const state = stateMap.get(el)
+  if (state) {
+    clearState(state)
+    stateMap.delete(el)
+  }
+
+  el.classList.remove(CSS_CLASS)
+  el.classList.remove(RICH_CLASS)
+  el.style.removeProperty('--readdy-anim-text-type-gap')
+  el.style.removeProperty('--readdy-anim-text-type-caret-width')
+  el.style.removeProperty('--readdy-anim-text-type-caret-blink-duration')
+
+  if (state?.mode === 'rich') {
+    for (const segment of state.segments) {
+      segment.node.textContent = segment.text
+    }
+    state.cursor?.remove()
+    delete el.dataset.originalText
+    return
+  }
+
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText
+    delete el.dataset.originalText
+  }
+}

package/animations/header/text-type/react.tsx

@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from 'react'
+import { init, destroy } from './index.js'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+
+type AnimTextTypeProps = {
+  children: React.ReactElement
+  texts?: string[]
+  typingSpeed?: number
+  deletingSpeed?: number
+  pauseDuration?: number
+  caretBlinkDuration?: number
+  gap?: string
+  caretWidth?: string
+}
+
+export function AnimTextType({
+  children,
+  texts,
+  typingSpeed,
+  deletingSpeed,
+  pauseDuration,
+  caretBlinkDuration,
+  gap,
+  caretWidth,
+}: AnimTextTypeProps) {
+  const ref = useRef<HTMLElement>(null)
+  const textsKey = texts?.join('\u0001') ?? ''
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    if (prefersReducedMotion()) {
+      init(el, {
+        texts,
+        typingSpeed,
+        deletingSpeed,
+        pauseDuration,
+        caretBlinkDuration,
+        gap,
+        caretWidth,
+      })
+      return () => {
+        destroy(el)
+      }
+    }
+
+    init(el, {
+      texts,
+      typingSpeed,
+      deletingSpeed,
+      pauseDuration,
+      caretBlinkDuration,
+      gap,
+      caretWidth,
+    })
+    return () => {
+      destroy(el)
+    }
+  }, [caretBlinkDuration, caretWidth, deletingSpeed, gap, pauseDuration, textsKey, typingSpeed])
+
+  return React.cloneElement(React.Children.only(children), { ref })
+}

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

@@ -0,0 +1,37 @@
+@keyframes readdy-anim-caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.readdy-anim-text-type:not(.readdy-anim-text-type-rich) {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--readdy-anim-text-type-gap, 0.08em);
+  white-space: normal;
+}
+
+.readdy-anim-text-type {
+  position: relative;
+}
+
+.readdy-anim-text-type.readdy-anim-text-type-rich {
+  white-space: normal;
+}
+
+.readdy-anim-text-type .readdy-anim-text-type-content {
+  min-width: 1ch;
+}
+
+.readdy-anim-text-type .readdy-anim-text-type-cursor {
+  width: var(--readdy-anim-text-type-caret-width, 0.08em);
+  min-height: 1em;
+  background: currentColor;
+  animation: readdy-anim-caret-blink var(--readdy-anim-text-type-caret-blink-duration, 900ms) steps(1, end) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-text-type .readdy-anim-text-type-cursor {
+    animation: none;
+  }
+}

package/animations/header/word-curtain-reveal/index.js

@@ -0,0 +1,97 @@
+import './style.css'
+import { prefersReducedMotion } from '../../../shared/reduced-motion.js'
+import { buildAnimClass, buildAnimId } from '../../../shared/constants.js'
+
+export const ANIMATION_ID = buildAnimId('word-curtain-reveal')
+
+const CSS_CLASS = buildAnimClass('word-curtain-reveal')
+const WORD_CLASS = buildAnimClass('word-curtain-word')
+const INNER_CLASS = buildAnimClass('word-curtain-inner')
+
+function splitAnimatedUnits(text) {
+  if (/\s/.test(text)) {
+    return text.split(/(\s+)/).filter(Boolean)
+  }
+
+  return Array.from(text)
+}
+
+function wrapWordsInTextNode(textNode, stagger, getWordIndex) {
+  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
+    }
+
+    const outer = document.createElement('span')
+    outer.className = WORD_CLASS
+
+    const inner = document.createElement('span')
+    inner.className = INNER_CLASS
+    inner.textContent = part
+    inner.style.animationDelay = `${getWordIndex() * stagger}ms`
+
+    outer.appendChild(inner)
+    fragment.appendChild(outer)
+  }
+
+  textNode.parentNode?.replaceChild(fragment, textNode)
+}
+
+function splitWords(el, stagger) {
+  if (!el.dataset.originalText) {
+    el.dataset.originalText = el.innerHTML
+  }
+
+  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, stagger, () => wordIndex++)
+  }
+}
+
+export function init(el, options = {}) {
+  destroy(el)
+
+  if (!el.classList.contains(CSS_CLASS)) {
+    el.classList.add(CSS_CLASS)
+  }
+
+  el.style.setProperty(
+    '--readdy-anim-word-curtain-duration',
+    `${options.duration ?? 550}ms`
+  )
+
+  if (prefersReducedMotion()) {
+    return
+  }
+
+  splitWords(el, options.stagger ?? 35)
+}
+
+export function destroy(el) {
+  el.classList.remove(CSS_CLASS)
+  el.style.removeProperty('--readdy-anim-word-curtain-duration')
+  if (el.dataset.originalText) {
+    el.innerHTML = el.dataset.originalText
+    delete el.dataset.originalText
+  }
+}

package/animations/header/word-curtain-reveal/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 AnimWordCurtainRevealProps = {
+  children: React.ReactElement
+  stagger?: number
+  duration?: number
+}
+
+export function AnimWordCurtainReveal({
+  children,
+  stagger,
+  duration,
+}: AnimWordCurtainRevealProps) {
+  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/word-curtain-reveal/style.css

@@ -0,0 +1,39 @@
+@keyframes readdy-anim-word-curtain-rise {
+  from {
+    opacity: 0;
+    transform: translateY(110%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.readdy-anim-word-curtain-reveal {
+  white-space: normal;
+}
+
+.readdy-anim-word-curtain-reveal .readdy-anim-word-curtain-word {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.readdy-anim-word-curtain-reveal .readdy-anim-word-curtain-inner {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(110%);
+  animation:
+    readdy-anim-word-curtain-rise
+    var(--readdy-anim-word-curtain-duration, 550ms)
+    cubic-bezier(0.16, 1, 0.3, 1)
+    forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readdy-anim-word-curtain-reveal .readdy-anim-word-curtain-inner {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}

package/dist/button/3d-flip/react.js

@@ -0,0 +1,21 @@
+import React, { useRef, useEffect } from 'react';
+import { init, destroy } from '../3d-flip.js';
+import { p as prefersReducedMotion } from '../../chunks/reduced-motion-HX79Ac8G.js';
+import '../../chunks/pointer-follow-BETANySn.js';
+import '../../chunks/constants-EnH6-Pz4.js';
+
+function Anim3DFlip({ children, maxTilt, translate, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || prefersReducedMotion())
+            return;
+        init(el, { maxTilt, translate });
+        return () => {
+            destroy(el);
+        };
+    }, [maxTilt, translate]);
+    return React.cloneElement(React.Children.only(children), { ref });
+}
+
+export { Anim3DFlip };