@elyri/motion 0.0.0-stage → 0.0.1

package/package.json

@@ -1,6 +1,63 @@
 {
   "name": "@elyri/motion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "description": "React animation component library with CSS variables theming.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TechCat-Team/Elyri.git",
+    "directory": "packages/motion"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js",
+      "require": "./dist/core.cjs"
+    },
+    "./styles.css": "./dist/index.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "react",
+    "component-library",
+    "animation",
+    "ui",
+    "css-variables"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
 }

package/src/components/animations/CountUp/CountUp.css

@@ -0,0 +1,4 @@
+.elyri-count-up {
+  /* 等宽数字，滚动过程中宽度不跳动 */
+  font-variant-numeric: tabular-nums;
+}

package/src/components/animations/CountUp/CountUp.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './CountUp.css';
+
+export interface CountUpProps {
+  className?: string;
+  /** 目标数值 */
+  to: number;
+  /** 起始数值 */
+  from?: number;
+  /** 动画时长（毫秒） */
+  duration?: number;
+  /** 保留的小数位数 */
+  decimals?: number;
+  /** 是否使用千分位分隔符 */
+  separator?: boolean;
+  /** 数字前缀 */
+  prefix?: string;
+  /** 数字后缀 */
+  suffix?: string;
+  /** 是否只在首次进入视口时播放 */
+  once?: boolean;
+}
+
+const group = (value: string) => value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+const easeOutCubic = (progress: number) => 1 - (1 - progress) ** 3;
+
+/** 数字滚动：进入视口时从起始值过渡到目标值 */
+export function CountUp({
+  className,
+  to,
+  from = 0,
+  duration = 1200,
+  decimals = 0,
+  separator = false,
+  prefix,
+  suffix,
+  once = true,
+}: CountUpProps) {
+  const elementRef = useRef<HTMLSpanElement>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [value, setValue] = useState(from);
+  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]);
+
+  useEffect(() => {
+    if (!isIntersecting || prefersReducedMotion) return;
+
+    let frame = 0;
+    const startedAt = performance.now();
+
+    const tick = (now: number) => {
+      const progress = duration > 0 ? Math.min((now - startedAt) / duration, 1) : 1;
+      setValue(from + (to - from) * easeOutCubic(progress));
+
+      if (progress < 1) frame = requestAnimationFrame(tick);
+    };
+
+    frame = requestAnimationFrame(tick);
+
+    return () => cancelAnimationFrame(frame);
+  }, [isIntersecting, from, to, duration, prefersReducedMotion]);
+
+  const fixed = (prefersReducedMotion ? to : value).toFixed(decimals);
+  const [integer, fraction] = fixed.split('.');
+  const grouped = separator ? group(integer) : integer;
+  const display = fraction ? `${grouped}.${fraction}` : grouped;
+
+  return (
+    <span ref={elementRef} className={cn('elyri-count-up', className)}>
+      {prefix}
+      {display}
+      {suffix}
+    </span>
+  );
+}

package/src/components/animations/CountUp/index.ts

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

package/src/components/animations/FadeIn/FadeIn.css

@@ -0,0 +1,43 @@
+.elyri-fade-in {
+  --elyri-fade-in-distance: 24px;
+  --elyri-fade-in-duration: var(--elyri-duration-base);
+  --elyri-fade-in-delay: 0ms;
+
+  opacity: 0;
+  transition:
+    opacity var(--elyri-fade-in-duration) var(--elyri-ease-out) var(--elyri-fade-in-delay),
+    transform var(--elyri-fade-in-duration) var(--elyri-ease-out) var(--elyri-fade-in-delay);
+}
+
+.elyri-fade-in--up {
+  transform: translate3d(0, var(--elyri-fade-in-distance), 0);
+}
+
+.elyri-fade-in--down {
+  transform: translate3d(0, calc(var(--elyri-fade-in-distance) * -1), 0);
+}
+
+.elyri-fade-in--left {
+  transform: translate3d(var(--elyri-fade-in-distance), 0, 0);
+}
+
+.elyri-fade-in--right {
+  transform: translate3d(calc(var(--elyri-fade-in-distance) * -1), 0, 0);
+}
+
+.elyri-fade-in--none {
+  transform: none;
+}
+
+.elyri-fade-in--visible {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-fade-in {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

package/src/components/animations/FadeIn/FadeIn.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './FadeIn.css';
+
+export type FadeInDirection = 'up' | 'down' | 'left' | 'right' | 'none';
+
+export interface FadeInProps {
+  children: ReactNode;
+  className?: string;
+  direction?: FadeInDirection;
+  delay?: number;
+  duration?: number;
+  distance?: number;
+  once?: boolean;
+}
+
+export function FadeIn({
+  children,
+  className,
+  direction = 'up',
+  delay = 0,
+  duration = 600,
+  distance = 24,
+  once = true,
+}: FadeInProps) {
+  const elementRef = useRef<HTMLDivElement>(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 style = {
+    '--elyri-fade-in-delay': `${delay}ms`,
+    '--elyri-fade-in-duration': `${duration}ms`,
+    '--elyri-fade-in-distance': `${distance}px`,
+  } as CSSProperties;
+
+  const isVisible = prefersReducedMotion || isIntersecting;
+
+  return (
+    <div
+      ref={elementRef}
+      className={cn('elyri-fade-in', `elyri-fade-in--${direction}`, isVisible && 'elyri-fade-in--visible', className)}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/animations/FadeIn/index.ts

@@ -0,0 +1,2 @@
+export { FadeIn } from './FadeIn';
+export type { FadeInDirection, FadeInProps } from './FadeIn';

package/src/components/animations/Magnetic/Magnetic.css

@@ -0,0 +1,11 @@
+.elyri-magnetic {
+  display: inline-block;
+  transform: translate3d(var(--elyri-magnetic-x, 0px), var(--elyri-magnetic-y, 0px), 0);
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-magnetic {
+    transform: none;
+  }
+}

package/src/components/animations/Magnetic/Magnetic.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './Magnetic.css';
+
+const easeOutCubic = (progress: number) => 1 - (1 - progress) ** 3;
+
+export interface MagneticProps {
+  children: ReactNode;
+  className?: string;
+  /** 吸附强度（0-1），元素向指针偏移的距离比例 */
+  strength?: number;
+  /** 元素边缘向外扩展的触发范围（像素） */
+  range?: number;
+  /** 指针离开触发范围后的回正时长（毫秒） */
+  resetDuration?: number;
+}
+
+/** 磁吸：指针靠近时元素被吸附偏移，离开后缓动回正 */
+export function Magnetic({ children, className, strength = 0.35, range = 120, resetDuration = 400 }: MagneticProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion) return;
+
+    let moveFrame = 0;
+    let resetFrame = 0;
+    let offset = { x: 0, y: 0 };
+    let pointer: { x: number; y: number } | null = null;
+
+    const setOffset = (x: number, y: number) => {
+      offset = { x, y };
+      element.style.setProperty('--elyri-magnetic-x', `${x}px`);
+      element.style.setProperty('--elyri-magnetic-y', `${y}px`);
+    };
+
+    // 缓动补间回正，避免指针离开范围时位置瞬间归零
+    const startReset = () => {
+      if (resetFrame || (!offset.x && !offset.y)) return;
+
+      const from = { ...offset };
+      const startedAt = performance.now();
+
+      const step = (now: number) => {
+        const progress = Math.min((now - startedAt) / resetDuration, 1);
+        const remaining = 1 - easeOutCubic(progress);
+
+        setOffset(from.x * remaining, from.y * remaining);
+
+        resetFrame = progress < 1 ? requestAnimationFrame(step) : 0;
+      };
+
+      resetFrame = requestAnimationFrame(step);
+    };
+
+    const handlePointerMove = (event: PointerEvent) => {
+      pointer = { x: event.clientX, y: event.clientY };
+
+      if (moveFrame) return;
+
+      moveFrame = requestAnimationFrame(() => {
+        moveFrame = 0;
+        if (!pointer) return;
+
+        const rect = element.getBoundingClientRect();
+        const dx = pointer.x - (rect.left + rect.width / 2);
+        const dy = pointer.y - (rect.top + rect.height / 2);
+        const inside = Math.abs(dx) <= rect.width / 2 + range && Math.abs(dy) <= rect.height / 2 + range;
+
+        if (inside) {
+          // 指针回到触发范围时打断尚未结束的回正
+          cancelAnimationFrame(resetFrame);
+          resetFrame = 0;
+          // 边缘衰减：边界处系数为 0，越靠近元素越大，避免进入范围瞬间位移跳变
+          const overflowX = Math.max(0, Math.abs(dx) - rect.width / 2);
+          const overflowY = Math.max(0, Math.abs(dy) - rect.height / 2);
+          const proximity = 1 - Math.min(Math.max(overflowX, overflowY) / range, 1);
+          setOffset(dx * strength * proximity, dy * strength * proximity);
+          return;
+        }
+
+        startReset();
+      });
+    };
+
+    window.addEventListener('pointermove', handlePointerMove, { passive: true });
+    // 指针移出窗口时不再触发 pointermove，需要手动回正
+    document.documentElement.addEventListener('pointerleave', startReset);
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      document.documentElement.removeEventListener('pointerleave', startReset);
+      cancelAnimationFrame(moveFrame);
+      cancelAnimationFrame(resetFrame);
+    };
+  }, [prefersReducedMotion, range, strength, resetDuration]);
+
+  return (
+    <div ref={elementRef} className={cn('elyri-magnetic', className)}>
+      {children}
+    </div>
+  );
+}

package/src/components/animations/Magnetic/index.ts

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

package/src/components/animations/ScaleIn/ScaleIn.css

@@ -0,0 +1,24 @@
+.elyri-scale-in {
+  --elyri-scale-in-from: 0.9;
+  --elyri-scale-in-duration: var(--elyri-duration-base);
+  --elyri-scale-in-delay: 0ms;
+
+  opacity: 0;
+  transform: scale(var(--elyri-scale-in-from));
+  transition:
+    opacity var(--elyri-scale-in-duration) var(--elyri-ease-out) var(--elyri-scale-in-delay),
+    transform var(--elyri-scale-in-duration) var(--elyri-ease-out) var(--elyri-scale-in-delay);
+}
+
+.elyri-scale-in--visible {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-scale-in {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

package/src/components/animations/ScaleIn/ScaleIn.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './ScaleIn.css';
+
+export interface ScaleInProps {
+  children: ReactNode;
+  className?: string;
+  /** 起始缩放比例 */
+  from?: number;
+  /** 延迟（毫秒） */
+  delay?: number;
+  /** 动画时长（毫秒） */
+  duration?: number;
+  /** 是否只在首次进入视口时触发 */
+  once?: boolean;
+}
+
+export function ScaleIn({ children, className, from = 0.9, delay = 0, duration = 600, once = true }: ScaleInProps) {
+  const elementRef = useRef<HTMLDivElement>(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 style = {
+    '--elyri-scale-in-from': from,
+    '--elyri-scale-in-delay': `${delay}ms`,
+    '--elyri-scale-in-duration': `${duration}ms`,
+  } as CSSProperties;
+
+  const isVisible = prefersReducedMotion || isIntersecting;
+
+  return (
+    <div
+      ref={elementRef}
+      className={cn('elyri-scale-in', isVisible && 'elyri-scale-in--visible', className)}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/animations/ScaleIn/index.ts

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

package/src/components/animations/Spotlight/Spotlight.css

@@ -0,0 +1,93 @@
+.elyri-spotlight {
+  --elyri-spotlight-x: 50%;
+  --elyri-spotlight-y: 50%;
+
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--elyri-spotlight-radius, 16px);
+}
+
+/* 卡片内部的径向光斑 */
+.elyri-spotlight--glow::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    var(--elyri-spotlight-size, 240px) circle at var(--elyri-spotlight-x) var(--elyri-spotlight-y),
+    color-mix(in srgb, var(--elyri-spotlight-color, #7c8cff) 18%, transparent),
+    transparent 70%
+  );
+  opacity: 0;
+  transition: opacity var(--elyri-duration-base) var(--elyri-ease-out);
+  pointer-events: none;
+}
+
+/* 只保留 1px 边框区域的光晕：content-box 与 border-box 两层遮罩求差 */
+.elyri-spotlight--border::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: radial-gradient(
+    calc(var(--elyri-spotlight-size, 240px) * 0.75) circle at var(--elyri-spotlight-x) var(--elyri-spotlight-y),
+    var(--elyri-spotlight-color, #7c8cff),
+    transparent 70%
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity var(--elyri-duration-base) var(--elyri-ease-out);
+  pointer-events: none;
+}
+
+.elyri-spotlight--glow:hover::before,
+.elyri-spotlight--border:hover::after {
+  opacity: 1;
+}
+
+/* 内部组件的边框光晕：给需要点亮的元素加 elyri-spotlight__item 即可 */
+.elyri-spotlight__item {
+  position: relative;
+}
+
+.elyri-spotlight__item::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: radial-gradient(
+    calc(var(--elyri-spotlight-size, 240px) * 0.75) circle at var(--elyri-spotlight-x, -500px)
+      var(--elyri-spotlight-y, -500px),
+    var(--elyri-spotlight-color, #7c8cff),
+    transparent 70%
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity var(--elyri-duration-base) var(--elyri-ease-out);
+  pointer-events: none;
+}
+
+.elyri-spotlight:hover .elyri-spotlight__item::after {
+  opacity: 1;
+}
+
+.elyri-spotlight__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}