@elyri/motion 0.0.0-stage → 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,532 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { ColorScheme } from './core.js';
+export { ClassValue, LinearRgb, ReducedMotionProvider, ReducedMotionProviderProps, ShaderCanvasOptions, ShaderFrame, SplitTextBy, SplitTextSegment, SplitTextUnit, cn, hexToLinearRgb, splitTextUnits, useColorScheme, usePrefersReducedMotion, useShaderCanvas } from './core.js';
+
+interface CountUpProps {
+    className?: string;
+    /** 目标数值 */
+    to: number;
+    /** 起始数值 */
+    from?: number;
+    /** 动画时长（毫秒） */
+    duration?: number;
+    /** 保留的小数位数 */
+    decimals?: number;
+    /** 是否使用千分位分隔符 */
+    separator?: boolean;
+    /** 数字前缀 */
+    prefix?: string;
+    /** 数字后缀 */
+    suffix?: string;
+    /** 是否只在首次进入视口时播放 */
+    once?: boolean;
+}
+/** 数字滚动：进入视口时从起始值过渡到目标值 */
+declare function CountUp({ className, to, from, duration, decimals, separator, prefix, suffix, once, }: CountUpProps): react.JSX.Element;
+
+type FadeInDirection = 'up' | 'down' | 'left' | 'right' | 'none';
+interface FadeInProps {
+    children: ReactNode;
+    className?: string;
+    direction?: FadeInDirection;
+    delay?: number;
+    duration?: number;
+    distance?: number;
+    once?: boolean;
+}
+declare function FadeIn({ children, className, direction, delay, duration, distance, once, }: FadeInProps): react.JSX.Element;
+
+interface MagneticProps {
+    children: ReactNode;
+    className?: string;
+    /** 吸附强度（0-1），元素向指针偏移的距离比例 */
+    strength?: number;
+    /** 元素边缘向外扩展的触发范围（像素） */
+    range?: number;
+    /** 指针离开触发范围后的回正时长（毫秒） */
+    resetDuration?: number;
+}
+/** 磁吸：指针靠近时元素被吸附偏移，离开后缓动回正 */
+declare function Magnetic({ children, className, strength, range, resetDuration }: MagneticProps): react.JSX.Element;
+
+interface ScaleInProps {
+    children: ReactNode;
+    className?: string;
+    /** 起始缩放比例 */
+    from?: number;
+    /** 延迟（毫秒） */
+    delay?: number;
+    /** 动画时长（毫秒） */
+    duration?: number;
+    /** 是否只在首次进入视口时触发 */
+    once?: boolean;
+}
+declare function ScaleIn({ children, className, from, delay, duration, once }: ScaleInProps): react.JSX.Element;
+
+interface SpotlightProps {
+    children: ReactNode;
+    className?: string;
+    /** 光斑颜色 */
+    color?: string;
+    /** 光斑半径（像素） */
+    size?: number;
+    /** 是否显示卡片内部跟随指针的径向光晕 */
+    glow?: boolean;
+    /** 是否显示指针附近的边框光晕 */
+    borderGlow?: boolean;
+    /** 卡片圆角（像素） */
+    radius?: number;
+}
+/** 聚光卡片：指针位置泛起径向高光，可选择性地点亮边框；内部元素加 elyri-spotlight__item 可获得同款边框光晕 */
+declare function Spotlight({ children, className, color, size, glow, borderGlow, radius, }: SpotlightProps): react.JSX.Element;
+
+interface TiltProps {
+    children: ReactNode;
+    className?: string;
+    /** 最大倾斜角度（度） */
+    max?: number;
+    /** 透视距离（像素） */
+    perspective?: number;
+    /** 是否显示跟随指针的高光 */
+    glare?: boolean;
+}
+/** 指针跟随倾斜：根据指针在元素内的位置计算 3D 旋转 */
+declare function Tilt({ children, className, max, perspective, glare }: TiltProps): react.JSX.Element;
+
+interface AuroraProps {
+    children?: ReactNode;
+    className?: string;
+    /** 三段渐变色：帘底、中段、帘顶（hex） */
+    colors?: [string, string, string];
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 极光亮度倍率 */
+    intensity?: number;
+    /** 是否显示星空 */
+    stars?: boolean;
+    /** 指针附近的极光是否增亮 */
+    interactive?: boolean;
+}
+declare function Aurora({ children, className, colors, speed, intensity, stars, interactive, }: AuroraProps): react.JSX.Element;
+
+interface CausticsProps {
+    children?: ReactNode;
+    className?: string;
+    /** 水体颜色（hex） */
+    color?: string;
+    /** 焦散光色（hex） */
+    highlightColor?: string;
+    /** 光纹密度倍率 */
+    density?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 指针处是否荡开水波并聚光 */
+    interactive?: boolean;
+}
+declare function Caustics({ children, className, color, highlightColor, density, speed, interactive, }: CausticsProps): react.JSX.Element;
+
+interface ContoursProps {
+    children?: ReactNode;
+    className?: string;
+    /** 等高线颜色（hex） */
+    color?: string;
+    /** 指针附近等高线的强调色（hex） */
+    highlightColor?: string;
+    /** 等高线密度倍率 */
+    density?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 指针处是否隆起一座小山 */
+    interactive?: boolean;
+}
+declare function Contours({ children, className, color, highlightColor, density, speed, interactive, }: ContoursProps): react.JSX.Element;
+
+interface DotFieldProps {
+    children?: ReactNode;
+    className?: string;
+    /** 点的底色（hex） */
+    color?: string;
+    /** 波峰与指针附近的点所用的强调色（hex） */
+    highlightColor?: string;
+    /** 点阵间距（CSS 像素） */
+    gap?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 指针附近的点是否被放大、推开 */
+    interactive?: boolean;
+}
+declare function DotField({ children, className, color, highlightColor, gap, speed, interactive, }: DotFieldProps): react.JSX.Element;
+
+interface DragonScalesProps {
+    children?: ReactNode;
+    className?: string;
+    /** 鳞片本体色（hex） */
+    color?: string;
+    /** 反光条与鳞缘高光色（hex） */
+    highlightColor?: string;
+    /** 单片鳞宽度（px） */
+    scaleSize?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 鳞片开合幅度 0-1，0 为关闭 */
+    flare?: number;
+    /** 光源是否跟随指针 */
+    interactive?: boolean;
+    /** 强制明暗方案，默认跟随页面主题 */
+    scheme?: ColorScheme;
+}
+declare function DragonScales({ children, className, color, highlightColor, scaleSize, speed, flare, interactive, scheme: forcedScheme, }: DragonScalesProps): react.JSX.Element;
+
+interface FilamentsProps {
+    children?: ReactNode;
+    className?: string;
+    /** 光丝主色（hex） */
+    color?: string;
+    /** 沿光丝渐变的第二种颜色（hex） */
+    highlightColor?: string;
+    /** 光丝振幅倍率 */
+    amplitude?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 指针处的光丝是否被拨动、弯向指针 */
+    interactive?: boolean;
+}
+declare function Filaments({ children, className, color, highlightColor, amplitude, speed, interactive, }: FilamentsProps): react.JSX.Element;
+
+type FlipTilesPattern = 'wave' | 'ripple' | 'drift';
+interface FlipTilesProps {
+    children?: ReactNode;
+    className?: string;
+    /** 立方体侧面的强调色（hex），翻滚时翻上来的就是这一面 */
+    color?: string;
+    /** 金属倒角与反光条的高光色（hex） */
+    highlightColor?: string;
+    /** 立方体间距（px），即单个立方体加缝隙的宽度 */
+    tileSize?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 翻滚编排：成列扫过、中心涟漪或有机漂移 */
+    pattern?: FlipTilesPattern;
+    /** 指针处立方体升起（微凸）是否跟随指针 */
+    interactive?: boolean;
+}
+declare function FlipTiles({ children, className, color, highlightColor, tileSize, speed, pattern, interactive, }: FlipTilesProps): react.JSX.Element;
+
+interface HaloProps {
+    children?: ReactNode;
+    className?: string;
+    /** 光环的两种渐变色（hex），沿圆周缓慢流转 */
+    colors?: [string, string];
+    /** 光环半径，相对画面高度的倍率 */
+    size?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 光环中心是否轻微偏向指针 */
+    interactive?: boolean;
+}
+declare function Halo({ children, className, colors, size, speed, interactive, }: HaloProps): react.JSX.Element;
+
+interface MeshGradientProps {
+    children?: ReactNode;
+    className?: string;
+    /** 自定义内联样式，可用于控制尺寸 */
+    style?: CSSProperties;
+    /** 四个色团的颜色（hex） */
+    colors?: [string, string, string, string];
+    /** 胶片颗粒强度，0 为关闭 */
+    grain?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 指针处的色彩漩涡是否跟随指针 */
+    interactive?: boolean;
+}
+declare function MeshGradient({ children, className, style, colors, grain, speed, interactive, }: MeshGradientProps): react.JSX.Element;
+
+interface PixelVortexProps {
+    children?: ReactNode;
+    className?: string;
+    /**
+     * 在 LED 屏上播放的视频地址。跨域视频需服务端允许 CORS；服务端还需支持 Range 请求，
+     * 否则大视频会整段下载而无法边下边播。未提供或加载失败时显示火焰流动效果。
+     */
+    videoSrc?: string;
+    /** 火焰主色（hex） */
+    color?: string;
+    /** 最亮处的高光色（hex） */
+    highlightColor?: string;
+    /** 单颗灯珠尺寸（CSS 像素） */
+    cellSize?: number;
+    /** 是否显示拼接屏接缝（每 16×10 颗灯珠一块） */
+    seams?: boolean;
+    /** 接缝宽度（CSS 像素） */
+    seamWidth?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 光晕中心是否跟随指针 */
+    interactive?: boolean;
+}
+declare function PixelVortex({ children, className, videoSrc, color, highlightColor, cellSize, seams, seamWidth, speed, interactive, }: PixelVortexProps): react.JSX.Element;
+
+type PlanetKind = 'mars' | 'jupiter' | 'earth';
+interface PlanetProps {
+    children?: ReactNode;
+    className?: string;
+    planet?: PlanetKind;
+    color?: string;
+    terrainColor?: string;
+    atmosphereColor?: string;
+    atmosphere?: number;
+    craters?: number;
+    cityLights?: boolean;
+    stars?: number;
+    horizon?: number;
+    speed?: number;
+    sun?: boolean;
+    sunPosition?: {
+        x: number;
+        y: number;
+    };
+    interactive?: boolean;
+}
+declare function Planet({ children, className, planet, color, terrainColor, atmosphereColor, atmosphere, craters, cityLights, stars, horizon, speed, sun, sunPosition, interactive, }: PlanetProps): react.JSX.Element;
+
+interface SilkWavesProps {
+    children?: ReactNode;
+    className?: string;
+    /** 丝绸本体色（hex） */
+    color?: string;
+    /** 光泽高光色（hex） */
+    highlightColor?: string;
+    /** 褶皱密度倍率 */
+    folds?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 光源是否跟随指针 */
+    interactive?: boolean;
+}
+declare function SilkWaves({ children, className, color, highlightColor, folds, speed, interactive, }: SilkWavesProps): react.JSX.Element;
+
+interface VelvetProps {
+    children?: ReactNode;
+    className?: string;
+    /** 丝绒本体色（hex） */
+    color?: string;
+    /** 绒面光晕色（hex） */
+    sheenColor?: string;
+    /** 褶皱密度倍率 */
+    folds?: number;
+    /** 绒毛质感强度，0 为光洁、1 为明显的毛绒颗粒 */
+    fuzz?: number;
+    /** 四周暗角强度，0 为无暗角 */
+    vignette?: number;
+    /** 动画速度倍率 */
+    speed?: number;
+    /** 光源是否跟随指针，指针划过是否留下渐消的压痕 */
+    interactive?: boolean;
+}
+declare function Velvet({ children, className, color, sheenColor, folds, fuzz, vignette, speed, interactive, }: VelvetProps): react.JSX.Element;
+
+interface AsciiImageProps {
+    /** 图片地址。跨域图片需服务端允许 CORS，否则无法读取像素，会退回显示原图 */
+    src: string;
+    /** 替代文本，提供给读屏软件 */
+    alt?: string;
+    className?: string;
+    /** 每行字符数，越大细节越多 */
+    columns?: number;
+    /** 字符梯度，从稀疏到密集排列 */
+    characters?: string;
+    /** 是否按原图像素着色 */
+    colored?: boolean;
+    /** 单色模式下的字符颜色，默认继承文字颜色；也可用 CSS 变量 --elyri-ascii-color 覆盖 */
+    color?: string;
+    /** 反转明暗映射（默认深色主题下亮处字符密集，浅色主题下暗处字符密集） */
+    invert?: boolean;
+    /** 进入视口时是否自上而下解码显现 */
+    animated?: boolean;
+    /** 显现动画时长（毫秒） */
+    duration?: number;
+    /** 是否有一道斜向高光周期性扫过 */
+    shimmer?: boolean;
+    /** 每帧随机闪烁的字符比例（0-1），0 为关闭 */
+    flicker?: number;
+    /** 指针附近的字符是否被推开、提亮并乱码 */
+    interactive?: boolean;
+    /** 指针影响半径（CSS 像素） */
+    radius?: number;
+}
+declare function AsciiImage({ src, alt, className, columns, characters, colored, color, invert, animated, duration, shimmer, flicker, interactive, radius, }: AsciiImageProps): react.JSX.Element;
+
+interface GradientTextProps {
+    children: ReactNode;
+    className?: string;
+    colors?: string[];
+    animated?: boolean;
+    /** 流动动画速度倍率 */
+    speed?: number;
+}
+declare function GradientText({ children, className, colors, animated, speed }: GradientTextProps): react.JSX.Element;
+
+type MarqueeDirection = 'left' | 'right' | 'up' | 'down';
+interface MarqueeProps {
+    /** 循环滚动的内容，任意节点，会被复制多份以形成无缝循环 */
+    children: ReactNode;
+    className?: string;
+    /** 滚动方向 */
+    direction?: MarqueeDirection;
+    /** 跑完一轮所需的秒数，数值越大越慢 */
+    duration?: number;
+    /** 最少重复份数；实际份数会按容器尺寸自动补足，保证循环无缝 */
+    repeat?: number;
+    /** 每份内容之间的间距，单位 px */
+    gap?: number;
+    /** 是否无限重复播放，关闭时只播放一轮 */
+    infinite?: boolean;
+    /** 鼠标悬停时是否暂停 */
+    pauseOnHover?: boolean;
+}
+declare function Marquee({ children, className, direction, duration, repeat, gap, infinite, pauseOnHover, }: MarqueeProps): react.JSX.Element;
+
+interface ParticleTextProps {
+    /** 由粒子组成的文本，仅支持纯字符串，可用 \n 换行 */
+    children: string;
+    className?: string;
+    /** 粒子颜色，默认继承文字颜色；也可用 CSS 变量 --elyri-particle-color 覆盖 */
+    color?: string;
+    /** 单个粒子边长（CSS 像素） */
+    particleSize?: number;
+    /** 采样间距（CSS 像素），越小粒子越密 */
+    gap?: number;
+    /** 指针排斥半径（CSS 像素），0 为关闭交互 */
+    radius?: number;
+    /** 排斥力度倍率 */
+    force?: number;
+    /** 首次进入视口时粒子是否从四周飞入聚合成字 */
+    assemble?: boolean;
+}
+declare function ParticleText({ children, className, color, particleSize, gap, radius, force, assemble, }: ParticleTextProps): react.JSX.Element;
+
+interface RotatingTextProps {
+    /** 轮播的词语列表，至少一个 */
+    words: string[];
+    className?: string;
+    /** 每个词的停留时长（毫秒） */
+    interval?: number;
+    /** 单词翻转进出的动画时长（毫秒） */
+    duration?: number;
+    /** 切换效果：flip 为 3D 翻转字符；block 为圆角色块包裹文字，块宽随词伸缩 */
+    variant?: 'flip' | 'block';
+}
+/** 词语轮换：多个词依次翻转切换，容器宽度随词宽平滑过渡 */
+declare function RotatingText({ words, className, interval, duration, variant, }: RotatingTextProps): react.JSX.Element;
+
+type ScrambleTextTrigger = 'view' | 'hover';
+interface ScrambleTextProps {
+    /** 需要解码显现的文本，仅支持纯字符串 */
+    children: string;
+    className?: string;
+    /** 触发方式：进入视口或指针悬停 */
+    trigger?: ScrambleTextTrigger;
+    /** 乱码刷新间隔（毫秒） */
+    speed?: number;
+    /** 相邻字符依次定格的间隔（毫秒） */
+    stagger?: number;
+    /** 乱码字符池 */
+    characters?: string;
+    /** 乱码字符的强调色 */
+    accentColor?: string;
+    /** 乱码辉光强度倍率，0 为关闭，默认 1 */
+    glow?: number;
+    /** 视口模式下是否只在首次进入时触发 */
+    once?: boolean;
+}
+declare function ScrambleText({ children, className, trigger, speed, stagger, characters, accentColor, glow, once, }: ScrambleTextProps): react.JSX.Element;
+
+type ScrollMarqueeDirection = 'left' | 'right';
+interface ScrollMarqueeProps {
+    /** 需要滚动的文本，仅支持纯字符串 */
+    children: string;
+    className?: string;
+    /** 滚动方向 */
+    direction?: ScrollMarqueeDirection;
+    /** 页面每滚动 1px，文字横向移动的像素数 */
+    speed?: number;
+    /** 行数，相邻两行方向相反 */
+    rows?: number;
+    /** 内容重复份数，用于铺满并实现无缝循环 */
+    repeat?: number;
+    /** 是否无限循环，关闭时走满一份内容后停住 */
+    infinite?: boolean;
+}
+declare function ScrollMarquee({ children, className, direction, speed, rows, repeat, infinite, }: ScrollMarqueeProps): react.JSX.Element;
+
+type ScrollRevealBy = 'char' | 'word';
+interface ScrollRevealProps {
+    /** 需要点亮的文本，仅支持纯字符串 */
+    children: string;
+    className?: string;
+    /** 点亮单位：按单词或按字符 */
+    by?: ScrollRevealBy;
+    /** 滚动区域高度（像素），文本超出后可滚动 */
+    height?: number;
+    /** 未点亮时的不透明度，0 为完全不可见 */
+    dimOpacity?: number;
+    /** 未点亮时的模糊半径（像素），0 为不模糊 */
+    blur?: number;
+}
+/** 滚动点亮：随容器滚动，文本从头至尾逐单元点亮 */
+declare function ScrollReveal({ children, className, by, height, dimOpacity, blur, }: ScrollRevealProps): react.JSX.Element;
+
+type SplitRevealBy = 'char' | 'word';
+interface SplitRevealProps {
+    /** 需要浮现的文本，仅支持纯字符串 */
+    children: string;
+    className?: string;
+    /** 拆分单位：按字符或按单词 */
+    by?: SplitRevealBy;
+    /** 起始延迟（毫秒） */
+    delay?: number;
+    /** 相邻单元之间的播放间隔（毫秒） */
+    stagger?: number;
+    /** 单个单元的动画时长（毫秒） */
+    duration?: number;
+    /** 位移距离（像素） */
+    distance?: number;
+    /** 是否只在首次进入视口时触发 */
+    once?: boolean;
+}
+declare function SplitReveal({ children, className, by, delay, stagger, duration, distance, once, }: SplitRevealProps): react.JSX.Element;
+
+interface TypewriterProps {
+    /** 需要逐字输出的文本，仅支持纯字符串 */
+    children: string;
+    className?: string;
+    /** 每个字符的输入间隔（毫秒） */
+    speed?: number;
+    /** 开始输入前的延迟（毫秒） */
+    startDelay?: number;
+    /** 输入完成后是否循环重播 */
+    loop?: boolean;
+    /** 循环重播前的停顿（毫秒） */
+    loopDelay?: number;
+    /** 是否显示闪烁光标 */
+    cursor?: boolean;
+}
+declare function Typewriter({ children, className, speed, startDelay, loop, loopDelay, cursor, }: TypewriterProps): react.JSX.Element;
+
+interface WaveTextProps {
+    /** 需要起伏的文本，仅支持纯字符串 */
+    children: string;
+    className?: string;
+    /** 振幅（像素） */
+    amplitude?: number;
+    /** 单个字符一次起伏的时长（毫秒） */
+    speed?: number;
+    /** 相邻字符的相位差（毫秒），越大波浪越稀疏 */
+    stagger?: number;
+}
+/** 波浪文字：字符按正弦节奏依次上下起伏 */
+declare function WaveText({ children, className, amplitude, speed, stagger }: WaveTextProps): react.JSX.Element;
+
+export { AsciiImage, type AsciiImageProps, Aurora, type AuroraProps, Caustics, type CausticsProps, ColorScheme, Contours, type ContoursProps, CountUp, type CountUpProps, DotField, type DotFieldProps, DragonScales, type DragonScalesProps, FadeIn, type FadeInDirection, type FadeInProps, Filaments, type FilamentsProps, FlipTiles, type FlipTilesPattern, type FlipTilesProps, GradientText, type GradientTextProps, Halo, type HaloProps, Magnetic, type MagneticProps, Marquee, type MarqueeDirection, type MarqueeProps, MeshGradient, type MeshGradientProps, ParticleText, type ParticleTextProps, PixelVortex, type PixelVortexProps, Planet, type PlanetKind, type PlanetProps, RotatingText, type RotatingTextProps, ScaleIn, type ScaleInProps, ScrambleText, type ScrambleTextProps, type ScrambleTextTrigger, ScrollMarquee, type ScrollMarqueeDirection, type ScrollMarqueeProps, ScrollReveal, type ScrollRevealBy, type ScrollRevealProps, SilkWaves, type SilkWavesProps, SplitReveal, type SplitRevealBy, type SplitRevealProps, Spotlight, type SpotlightProps, Tilt, type TiltProps, Typewriter, type TypewriterProps, Velvet, type VelvetProps, WaveText, type WaveTextProps };