@elyri/motion 0.0.0-stage → 0.0.1

package/src/components/text/ScrambleText/ScrambleText.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { CSSProperties } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './ScrambleText.css';
+
+export type ScrambleTextTrigger = 'view' | 'hover';
+
+export interface ScrambleTextProps {
+  /** 需要解码显现的文本，仅支持纯字符串 */
+  children: string;
+  className?: string;
+  /** 触发方式：进入视口或指针悬停 */
+  trigger?: ScrambleTextTrigger;
+  /** 乱码刷新间隔（毫秒） */
+  speed?: number;
+  /** 相邻字符依次定格的间隔（毫秒） */
+  stagger?: number;
+  /** 乱码字符池 */
+  characters?: string;
+  /** 乱码字符的强调色 */
+  accentColor?: string;
+  /** 乱码辉光强度倍率，0 为关闭，默认 1 */
+  glow?: number;
+  /** 视口模式下是否只在首次进入时触发 */
+  once?: boolean;
+}
+
+interface Frame {
+  chars: string[];
+  resolved: number;
+}
+
+const DEFAULT_CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#';
+
+const isSpace = (char: string) => /\s/.test(char);
+
+export function ScrambleText({
+  children,
+  className,
+  trigger = 'view',
+  speed = 40,
+  stagger = 60,
+  characters = DEFAULT_CHARACTERS,
+  accentColor,
+  glow,
+  once = true,
+}: ScrambleTextProps) {
+  const elementRef = useRef<HTMLSpanElement>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  // 每次自增代表重新播放一轮解码
+  const [runId, setRunId] = useState(0);
+  const [frame, setFrame] = useState<Frame | null>(null);
+
+  const chars = useMemo(() => Array.from(children), [children]);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion || trigger !== 'view') return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        setRunId((id) => id + 1);
+        if (once) observer.disconnect();
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [trigger, once, prefersReducedMotion]);
+
+  useEffect(() => {
+    if (runId === 0 || prefersReducedMotion) return;
+
+    const pool = Array.from(characters || DEFAULT_CHARACTERS);
+    const start = performance.now();
+
+    // 按经过时间决定已定格的字符数，其余位置刷新为随机字符；返回是否已全部定格
+    const step = () => {
+      const resolved = Math.floor((performance.now() - start) / stagger);
+
+      if (resolved >= chars.length) {
+        setFrame(null);
+        return true;
+      }
+
+      setFrame({
+        resolved,
+        chars: chars.map((char, index) =>
+          index < resolved || isSpace(char) ? char : pool[Math.floor(Math.random() * pool.length)],
+        ),
+      });
+      return false;
+    };
+
+    if (step()) return;
+
+    const timer = setInterval(() => {
+      if (step()) clearInterval(timer);
+    }, speed);
+
+    return () => clearInterval(timer);
+  }, [runId, chars, characters, speed, stagger, prefersReducedMotion]);
+
+  const replay = () => {
+    if (!frame && !prefersReducedMotion) setRunId((id) => id + 1);
+  };
+
+  const hoverHandlers = trigger === 'hover' ? { onPointerEnter: replay, onFocus: replay } : null;
+
+  const style = {
+    ...(accentColor ? { '--elyri-scramble-accent': accentColor } : null),
+    ...(glow !== undefined ? { '--elyri-scramble-glow': Math.max(0, glow) } : null),
+  } as CSSProperties;
+
+  return (
+    <span ref={elementRef} className={cn('elyri-scramble-text', className)} style={style} {...hoverHandlers}>
+      <span className="elyri-scramble-text__sr">{children}</span>
+      <span aria-hidden="true">
+        {chars.map((char, index) => {
+          const isScrambled = frame !== null && index >= frame.resolved && !isSpace(char);
+
+          // 原字符始终参与排版以固定宽度，乱码绝对定位叠在其上，不会改变行宽导致换行
+          return (
+            <span
+              key={index}
+              className={cn('elyri-scramble-text__char', isScrambled && 'elyri-scramble-text__char--scrambled')}
+            >
+              {char}
+              {isScrambled && <span className="elyri-scramble-text__glyph">{frame.chars[index]}</span>}
+            </span>
+          );
+        })}
+      </span>
+    </span>
+  );
+}

package/src/components/text/ScrambleText/index.ts

@@ -0,0 +1,2 @@
+export { ScrambleText } from './ScrambleText';
+export type { ScrambleTextProps, ScrambleTextTrigger } from './ScrambleText';

package/src/components/text/ScrollMarquee/ScrollMarquee.css

@@ -0,0 +1,33 @@
+.elyri-scroll-marquee {
+  --elyri-scroll-marquee-gap: 0.6em;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  line-height: 1.15;
+  white-space: nowrap;
+}
+
+/* 每行内容横向平铺，位移由页面滚动量驱动，相邻行方向相反 */
+.elyri-scroll-marquee__row {
+  display: flex;
+  width: max-content;
+  /* --base 为 -1 时整体先左移一份内容宽度，让向右滚动时左侧也有内容可填，避免露白 */
+  margin-left: calc(var(--elyri-scroll-marquee-base, 0) * var(--elyri-scroll-marquee-copy-width, 0px));
+  will-change: transform;
+  transform: translate3d(calc(var(--elyri-scroll-marquee-shift, 0px) * var(--elyri-scroll-marquee-dir, 1)), 0, 0);
+}
+
+/* 单份内容，padding 计入宽度以保证取模后无缝衔接 */
+.elyri-scroll-marquee__copy {
+  flex: none;
+  padding-right: var(--elyri-scroll-marquee-gap);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-scroll-marquee__row {
+    transform: none;
+    will-change: auto;
+  }
+}

package/src/components/text/ScrollMarquee/ScrollMarquee.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useRef } from 'react';
+import type { CSSProperties } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './ScrollMarquee.css';
+
+export type ScrollMarqueeDirection = 'left' | 'right';
+
+export interface ScrollMarqueeProps {
+  /** 需要滚动的文本，仅支持纯字符串 */
+  children: string;
+  className?: string;
+  /** 滚动方向 */
+  direction?: ScrollMarqueeDirection;
+  /** 页面每滚动 1px，文字横向移动的像素数 */
+  speed?: number;
+  /** 行数，相邻两行方向相反 */
+  rows?: number;
+  /** 内容重复份数，用于铺满并实现无缝循环 */
+  repeat?: number;
+  /** 是否无限循环，关闭时走满一份内容后停住 */
+  infinite?: boolean;
+}
+
+export function ScrollMarquee({
+  children,
+  className,
+  direction = 'left',
+  speed = 0.5,
+  rows = 1,
+  repeat = 6,
+  infinite = true,
+}: ScrollMarqueeProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const firstCopyRef = useRef<HTMLSpanElement>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || prefersReducedMotion) return;
+
+    let frame = 0;
+
+    const update = () => {
+      frame = 0;
+
+      // 单份内容的宽度即循环周期，按它取模即可无缝衔接
+      const copyWidth = firstCopyRef.current?.offsetWidth ?? 0;
+      if (!copyWidth) return;
+
+      const offset = window.scrollY * speed;
+      // 无限循环时按单份宽度取模，滚动中不断回绕；关闭时走满一份内容后停住
+      const shift = infinite ? -(offset % copyWidth) : -Math.min(offset, copyWidth);
+      root.style.setProperty('--elyri-scroll-marquee-shift', `${shift}px`);
+      root.style.setProperty('--elyri-scroll-marquee-copy-width', `${copyWidth}px`);
+    };
+
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(update);
+    };
+
+    update();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [prefersReducedMotion, speed, rows, repeat, infinite]);
+
+  const rowCount = Math.max(1, Math.floor(rows));
+  const copyCount = Math.max(1, Math.floor(repeat));
+  const baseDirection = direction === 'left' ? 1 : -1;
+
+  return (
+    <div ref={rootRef} className={cn('elyri-scroll-marquee', className)}>
+      {Array.from({ length: rowCount }, (_, rowIndex) => {
+        const dir = rowIndex % 2 === 0 ? baseDirection : -baseDirection;
+
+        return (
+          <div
+            key={rowIndex}
+            className="elyri-scroll-marquee__row"
+            style={
+              {
+                '--elyri-scroll-marquee-dir': dir,
+                // 向右滚动时先整体左移一份内容宽度，避免左侧露白
+                '--elyri-scroll-marquee-base': dir === 1 ? 0 : -1,
+              } as CSSProperties
+            }
+          >
+            {Array.from({ length: copyCount }, (_, copyIndex) => (
+              <span
+                key={copyIndex}
+                ref={rowIndex === 0 && copyIndex === 0 ? firstCopyRef : undefined}
+                className="elyri-scroll-marquee__copy"
+              >
+                {children}
+              </span>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/text/ScrollMarquee/index.ts

@@ -0,0 +1,2 @@
+export { ScrollMarquee } from './ScrollMarquee';
+export type { ScrollMarqueeDirection, ScrollMarqueeProps } from './ScrollMarquee';

package/src/components/text/ScrollReveal/ScrollReveal.css

@@ -0,0 +1,51 @@
+.elyri-scroll-reveal {
+  /* 点亮范围占全文的比例：0 为全暗、1 为全亮，默认全亮以兼容 SSR 与无 JS 场景 */
+  --elyri-scroll-reveal-progress: 1;
+  --elyri-scroll-reveal-dim: 0.15;
+  --elyri-scroll-reveal-blur: 0px;
+  --elyri-scroll-reveal-height: 280px;
+
+  display: block;
+  height: var(--elyri-scroll-reveal-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.elyri-scroll-reveal__content {
+  /* 保留原始空白，同时允许在空白处换行 */
+  white-space: pre-wrap;
+}
+
+/* 单词容器：整词不拆行，逐字模式下作为字符的布局外壳 */
+.elyri-scroll-reveal__word {
+  display: inline-block;
+}
+
+/* 点亮单元：逐字模式下为单字，逐词模式下为单词；亮度随滚动进度点亮 */
+.elyri-scroll-reveal__unit {
+  /* 本单元的点亮程度：点亮范围推进到第 index 个单元时从 0 过渡到 1 */
+  --elyri-scroll-reveal-lit: clamp(
+    0,
+    calc(var(--elyri-scroll-reveal-progress) * var(--elyri-scroll-reveal-count) - var(--elyri-scroll-reveal-index)),
+    1
+  );
+
+  display: inline-block;
+  white-space: pre;
+  opacity: calc(var(--elyri-scroll-reveal-dim) + (1 - var(--elyri-scroll-reveal-dim)) * var(--elyri-scroll-reveal-lit));
+}
+
+/* 开启模糊时，未点亮的单元同时带模糊 */
+.elyri-scroll-reveal--blur .elyri-scroll-reveal__unit {
+  filter: blur(calc((1 - var(--elyri-scroll-reveal-lit)) * var(--elyri-scroll-reveal-blur)));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-scroll-reveal__unit {
+    opacity: 1;
+  }
+
+  .elyri-scroll-reveal--blur .elyri-scroll-reveal__unit {
+    filter: none;
+  }
+}

package/src/components/text/ScrollReveal/ScrollReveal.tsx

@@ -0,0 +1,186 @@
+import { useEffect, useMemo, useRef } from 'react';
+import type { CSSProperties } from 'react';
+
+import { cn, splitTextUnits, usePrefersReducedMotion } from '../../../core';
+import type { SplitTextSegment } from '../../../core';
+
+import './ScrollReveal.css';
+
+export type ScrollRevealBy = 'char' | 'word';
+
+/**
+ * 点亮线固定在视口该比例高度处（0.65 即屏幕下方 35% 始终留作未点亮区）。
+ * 固定不动才能让明暗过渡一直在屏幕里可见；若让它随滚动漂移，中后段整屏都会落在线上方。
+ */
+const LEAD_RATIO = 0.65;
+
+export interface ScrollRevealProps {
+  /** 需要点亮的文本，仅支持纯字符串 */
+  children: string;
+  className?: string;
+  /** 点亮单位：按单词或按字符 */
+  by?: ScrollRevealBy;
+  /** 滚动区域高度（像素），文本超出后可滚动 */
+  height?: number;
+  /** 未点亮时的不透明度，0 为完全不可见 */
+  dimOpacity?: number;
+  /** 未点亮时的模糊半径（像素），0 为不模糊 */
+  blur?: number;
+}
+
+const segmenter =
+  typeof Intl !== 'undefined' && 'Segmenter' in Intl ? new Intl.Segmenter(undefined, { granularity: 'word' }) : null;
+
+/**
+ * 按「词」切分文本。用 Intl.Segmenter 取词边界，中文、日文等没有空格的语言也能按词点亮；
+ * 标点并入前一个词（没有前词时暂存到下一个词），空白保持原样输出。
+ * 不支持 Intl.Segmenter 时退回按空白切分。
+ */
+const splitWords = (text: string): SplitTextSegment[] => {
+  if (!segmenter) return splitTextUnits(text, 'word');
+
+  const segments: SplitTextSegment[] = [];
+  let index = 0;
+  let wordPart = 0;
+  let spacePart = 0;
+  let pending = '';
+
+  for (const { segment: value, isWordLike } of segmenter.segment(text)) {
+    if (/^\s+$/.test(value)) {
+      segments.push({ kind: 'space', key: `space-${spacePart++}`, value });
+      continue;
+    }
+
+    if (isWordLike) {
+      segments.push({ kind: 'word', key: `word-${wordPart++}`, units: [{ char: pending + value, index: index++ }] });
+      pending = '';
+      continue;
+    }
+
+    const last = segments[segments.length - 1];
+    if (!pending && last?.kind === 'word') {
+      last.units[0].char += value;
+    } else {
+      pending += value;
+    }
+  }
+
+  if (pending) {
+    segments.push({ kind: 'word', key: `word-${wordPart}`, units: [{ char: pending, index }] });
+  }
+
+  return segments;
+};
+
+/** 滚动点亮：随容器滚动，文本从头至尾逐单元点亮 */
+export function ScrollReveal({
+  children,
+  className,
+  by = 'word',
+  height = 280,
+  dimOpacity = 0.15,
+  blur = 0,
+}: ScrollRevealProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  const segments = useMemo(
+    () => (by === 'word' ? splitWords(children) : splitTextUnits(children, 'char')),
+    [children, by],
+  );
+  const count = useMemo(
+    () => segments.reduce((total, segment) => (segment.kind === 'word' ? total + segment.units.length : total), 0),
+    [segments],
+  );
+
+  useEffect(() => {
+    const root = rootRef.current;
+    const content = contentRef.current;
+    // 减弱动态效果时保持 CSS 默认的全亮进度，不挂监听
+    if (!root || !content || prefersReducedMotion) return;
+
+    let frame = 0;
+
+    const update = () => {
+      frame = 0;
+
+      // 文本自身高度即点亮线的行程终点
+      const travel = content.offsetHeight;
+      if (travel <= 0) return;
+
+      const { clientHeight, scrollHeight, scrollTop } = root;
+      const range = scrollHeight - clientHeight;
+      if (range <= 0) {
+        root.style.setProperty('--elyri-scroll-reveal-progress', '1');
+        return;
+      }
+
+      // 点亮线默认固定在视口的 LEAD_RATIO 高度处，屏幕下方始终留出一段未点亮的文字，
+      // 明暗过渡在任何滚动位置都看得见。
+      const line = scrollTop + clientHeight * LEAD_RATIO;
+
+      // 收尾：在最后一屏的滚动里把点亮线平滑推到文末，因此滚到底时正好全文点亮，
+      // 也就不必在文末补白。
+      const tailStart = Math.max(0, range - clientHeight);
+      const tail = Math.min(1, Math.max(0, (scrollTop - tailStart) / clientHeight));
+      // 像素取整会让滚到底时差出 1px，直接判为全文点亮，避免最后一个词只亮一半
+      const head = scrollTop >= range - 1 ? travel : line + tail * (travel - range - clientHeight * LEAD_RATIO);
+
+      root.style.setProperty('--elyri-scroll-reveal-progress', String(Math.min(1, Math.max(0, head / travel))));
+    };
+
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(update);
+    };
+
+    update();
+    root.addEventListener('scroll', onScroll, { passive: true });
+    // 内容尺寸变化（字体加载、容器宽度变化）会改变行程长度，需要重新计算
+    const observer = new ResizeObserver(onScroll);
+    observer.observe(content);
+
+    return () => {
+      root.removeEventListener('scroll', onScroll);
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [prefersReducedMotion, count]);
+
+  const style = {
+    '--elyri-scroll-reveal-height': `${height}px`,
+    '--elyri-scroll-reveal-dim': dimOpacity,
+    '--elyri-scroll-reveal-blur': `${blur}px`,
+    '--elyri-scroll-reveal-count': count,
+  } as CSSProperties;
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn('elyri-scroll-reveal', blur > 0 && 'elyri-scroll-reveal--blur', className)}
+      style={style}
+    >
+      <div ref={contentRef} className="elyri-scroll-reveal__content" aria-label={children}>
+        {segments.map((segment) =>
+          segment.kind === 'space' ? (
+            segment.value
+          ) : (
+            <span key={segment.key} className="elyri-scroll-reveal__word">
+              {segment.units.map((unit) => (
+                <span
+                  key={unit.index}
+                  className="elyri-scroll-reveal__unit"
+                  style={{ '--elyri-scroll-reveal-index': unit.index } as CSSProperties}
+                  aria-hidden="true"
+                >
+                  {unit.char}
+                </span>
+              ))}
+            </span>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/text/ScrollReveal/index.ts

@@ -0,0 +1,2 @@
+export { ScrollReveal } from './ScrollReveal';
+export type { ScrollRevealBy, ScrollRevealProps } from './ScrollReveal';

package/src/components/text/SplitReveal/SplitReveal.css

@@ -0,0 +1,52 @@
+.elyri-split-reveal {
+  --elyri-split-reveal-duration: var(--elyri-duration-base);
+  --elyri-split-reveal-delay: 0ms;
+  --elyri-split-reveal-stagger: 40ms;
+  --elyri-split-reveal-distance: 24px;
+
+  display: inline;
+  /* 保留原始空白，同时允许在空白处换行 */
+  white-space: pre-wrap;
+}
+
+/* 单词容器：整词不拆行，逐字模式下作为字符的布局外壳 */
+.elyri-split-reveal__word {
+  display: inline-block;
+}
+
+/* 动画单元：逐字模式下为单字，逐词模式下为单词 */
+.elyri-split-reveal__unit {
+  display: inline-block;
+  white-space: pre;
+  opacity: 0;
+  will-change: opacity, transform;
+}
+
+.elyri-split-reveal--visible .elyri-split-reveal__unit {
+  animation: elyri-split-reveal-rise var(--elyri-split-reveal-duration) var(--elyri-ease-out) both;
+  animation-delay: calc(
+    var(--elyri-split-reveal-delay) + var(--elyri-split-reveal-index, 0) * var(--elyri-split-reveal-stagger)
+  );
+}
+
+@keyframes elyri-split-reveal-rise {
+  from {
+    opacity: 0;
+    transform: translate3d(0, var(--elyri-split-reveal-distance), 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-split-reveal__unit {
+    opacity: 1;
+  }
+
+  .elyri-split-reveal--visible .elyri-split-reveal__unit {
+    animation: none;
+  }
+}