@elyri/motion 0.0.0-stage → 0.0.1

package/src/components/text/SplitReveal/SplitReveal.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { CSSProperties } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './SplitReveal.css';
+
+export type SplitRevealBy = 'char' | 'word';
+
+export interface SplitRevealProps {
+  /** 需要浮现的文本，仅支持纯字符串 */
+  children: string;
+  className?: string;
+  /** 拆分单位：按字符或按单词 */
+  by?: SplitRevealBy;
+  /** 起始延迟（毫秒） */
+  delay?: number;
+  /** 相邻单元之间的播放间隔（毫秒） */
+  stagger?: number;
+  /** 单个单元的动画时长（毫秒） */
+  duration?: number;
+  /** 位移距离（像素） */
+  distance?: number;
+  /** 是否只在首次进入视口时触发 */
+  once?: boolean;
+}
+
+interface Unit {
+  char: string;
+  index: number;
+}
+
+type Segment = { kind: 'space'; key: string; value: string } | { kind: 'word'; key: string; units: Unit[] };
+
+/** 按空白切分文本，保留空白片段，并为每个动画单元分配全局序号 */
+const splitText = (text: string, by: SplitRevealBy): Segment[] => {
+  let index = 0;
+
+  return text
+    .split(/(\s+)/)
+    .filter(Boolean)
+    .map((part, partIndex) => {
+      if (/^\s+$/.test(part)) return { kind: 'space' as const, key: `space-${partIndex}`, value: part };
+
+      const units = by === 'char' ? Array.from(part) : [part];
+
+      return {
+        kind: 'word' as const,
+        key: `word-${partIndex}`,
+        units: units.map((char) => ({ char, index: index++ })),
+      };
+    });
+};
+
+export function SplitReveal({
+  children,
+  className,
+  by = 'char',
+  delay = 0,
+  stagger = 40,
+  duration = 600,
+  distance = 24,
+  once = true,
+}: SplitRevealProps) {
+  const elementRef = useRef<HTMLSpanElement>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsIntersecting(true);
+          if (once) observer.disconnect();
+          return;
+        }
+
+        if (!once) setIsIntersecting(false);
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [once, prefersReducedMotion]);
+
+  const segments = useMemo(() => splitText(children, by), [children, by]);
+
+  const style = {
+    '--elyri-split-reveal-delay': `${delay}ms`,
+    '--elyri-split-reveal-stagger': `${stagger}ms`,
+    '--elyri-split-reveal-duration': `${duration}ms`,
+    '--elyri-split-reveal-distance': `${distance}px`,
+  } as CSSProperties;
+
+  const isVisible = prefersReducedMotion || isIntersecting;
+
+  return (
+    <span
+      ref={elementRef}
+      className={cn('elyri-split-reveal', isVisible && 'elyri-split-reveal--visible', className)}
+      style={style}
+    >
+      {segments.map((segment) =>
+        segment.kind === 'space' ? (
+          segment.value
+        ) : (
+          <span key={segment.key} className="elyri-split-reveal__word">
+            {segment.units.map((unit) => (
+              <span
+                key={unit.index}
+                className="elyri-split-reveal__unit"
+                style={{ '--elyri-split-reveal-index': unit.index } as CSSProperties}
+              >
+                {unit.char}
+              </span>
+            ))}
+          </span>
+        ),
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { SplitReveal } from './SplitReveal';
+export type { SplitRevealBy, SplitRevealProps } from './SplitReveal';

package/src/components/text/Typewriter/Typewriter.css

@@ -0,0 +1,37 @@
+.elyri-typewriter {
+  display: inline;
+  white-space: pre-wrap;
+}
+
+.elyri-typewriter__text {
+  white-space: pre-wrap;
+}
+
+/* 块状光标，随 currentColor 取色 */
+.elyri-typewriter__cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 0.1em;
+  border-radius: 1px;
+  background: currentColor;
+  vertical-align: -0.15em;
+  animation: elyri-typewriter-blink 1s step-end infinite;
+}
+
+@keyframes elyri-typewriter-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-typewriter__cursor {
+    animation: none;
+  }
+}

package/src/components/text/Typewriter/Typewriter.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './Typewriter.css';
+
+export interface TypewriterProps {
+  /** 需要逐字输出的文本，仅支持纯字符串 */
+  children: string;
+  className?: string;
+  /** 每个字符的输入间隔（毫秒） */
+  speed?: number;
+  /** 开始输入前的延迟（毫秒） */
+  startDelay?: number;
+  /** 输入完成后是否循环重播 */
+  loop?: boolean;
+  /** 循环重播前的停顿（毫秒） */
+  loopDelay?: number;
+  /** 是否显示闪烁光标 */
+  cursor?: boolean;
+}
+
+export function Typewriter({
+  children,
+  className,
+  speed = 60,
+  startDelay = 200,
+  loop = false,
+  loopDelay = 1200,
+  cursor = true,
+}: TypewriterProps) {
+  const text = children;
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (prefersReducedMotion || !text) return;
+
+    let timer: ReturnType<typeof setTimeout>;
+    let typed = 0;
+
+    const typeNext = (wait: number) => {
+      timer = setTimeout(() => {
+        typed += 1;
+        setCount(typed);
+
+        if (typed < text.length) {
+          typeNext(speed);
+          return;
+        }
+
+        if (loop) {
+          timer = setTimeout(() => {
+            typed = 0;
+            setCount(0);
+            typeNext(speed);
+          }, loopDelay);
+        }
+      }, wait);
+    };
+
+    // 起始延迟结束后归零并开始逐字输入
+    timer = setTimeout(() => {
+      typed = 0;
+      setCount(0);
+      typeNext(0);
+    }, startDelay);
+
+    return () => clearTimeout(timer);
+  }, [text, speed, startDelay, loop, loopDelay, prefersReducedMotion]);
+
+  const visible = prefersReducedMotion ? text : text.slice(0, count);
+
+  return (
+    <span className={cn('elyri-typewriter', className)}>
+      <span className="elyri-typewriter__text">{visible}</span>
+      {cursor && <span className="elyri-typewriter__cursor" aria-hidden="true" />}
+    </span>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Typewriter } from './Typewriter';
+export type { TypewriterProps } from './Typewriter';

package/src/components/text/WaveText/WaveText.css

@@ -0,0 +1,28 @@
+.elyri-wave-text__word {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.elyri-wave-text__unit {
+  display: inline-block;
+  animation: elyri-wave-text-swing var(--elyri-wave-text-speed, 1200ms) var(--elyri-ease-in-out) infinite;
+  animation-delay: calc(var(--elyri-wave-text-index) * var(--elyri-wave-text-stagger, 60ms) * -1);
+  will-change: transform;
+}
+
+@keyframes elyri-wave-text-swing {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(calc(var(--elyri-wave-text-amplitude, 6px) * -1));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-wave-text__unit {
+    animation: none;
+  }
+}

package/src/components/text/WaveText/WaveText.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
+
+import { cn, splitTextUnits } from '../../../core';
+
+import './WaveText.css';
+
+export interface WaveTextProps {
+  /** 需要起伏的文本，仅支持纯字符串 */
+  children: string;
+  className?: string;
+  /** 振幅（像素） */
+  amplitude?: number;
+  /** 单个字符一次起伏的时长（毫秒） */
+  speed?: number;
+  /** 相邻字符的相位差（毫秒），越大波浪越稀疏 */
+  stagger?: number;
+}
+
+/** 波浪文字：字符按正弦节奏依次上下起伏 */
+export function WaveText({ children, className, amplitude = 6, speed = 1200, stagger = 60 }: WaveTextProps) {
+  const segments = useMemo(() => splitTextUnits(children, 'char'), [children]);
+
+  const style = {
+    '--elyri-wave-text-amplitude': `${amplitude}px`,
+    '--elyri-wave-text-speed': `${speed}ms`,
+    '--elyri-wave-text-stagger': `${stagger}ms`,
+  } as CSSProperties;
+
+  return (
+    <span className={cn('elyri-wave-text', className)} style={style} aria-label={children}>
+      {segments.map((segment) =>
+        segment.kind === 'space' ? (
+          segment.value
+        ) : (
+          <span key={segment.key} className="elyri-wave-text__word">
+            {segment.units.map((unit) => (
+              <span
+                key={unit.index}
+                className="elyri-wave-text__unit"
+                style={{ '--elyri-wave-text-index': unit.index } as CSSProperties}
+                aria-hidden="true"
+              >
+                {unit.char}
+              </span>
+            ))}
+          </span>
+        ),
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { WaveText } from './WaveText';
+export type { WaveTextProps } from './WaveText';

package/src/components/text/index.ts

@@ -0,0 +1,20 @@
+export { GradientText } from './GradientText';
+export type { GradientTextProps } from './GradientText';
+export { Marquee } from './Marquee';
+export type { MarqueeDirection, MarqueeProps } from './Marquee';
+export { ParticleText } from './ParticleText';
+export type { ParticleTextProps } from './ParticleText';
+export { RotatingText } from './RotatingText';
+export type { RotatingTextProps } from './RotatingText';
+export { ScrambleText } from './ScrambleText';
+export type { ScrambleTextProps, ScrambleTextTrigger } from './ScrambleText';
+export { ScrollMarquee } from './ScrollMarquee';
+export type { ScrollMarqueeDirection, ScrollMarqueeProps } from './ScrollMarquee';
+export { ScrollReveal } from './ScrollReveal';
+export type { ScrollRevealBy, ScrollRevealProps } from './ScrollReveal';
+export { SplitReveal } from './SplitReveal';
+export type { SplitRevealBy, SplitRevealProps } from './SplitReveal';
+export { Typewriter } from './Typewriter';
+export type { TypewriterProps } from './Typewriter';
+export { WaveText } from './WaveText';
+export type { WaveTextProps } from './WaveText';