UNPKG

@fxshelf/word-tunnel

Version:

3D keyword tunnel word-cloud for React and Vue — perspective fly-through text. Zero animation-lib deps. Copy-as-source friendly.

87 lines (83 loc) • 3.95 kB
import * as react from 'react'; import { CSSProperties, ReactNode } from 'react'; type WordTunnelProps = { /** 词条列表;不传则用内置搞笑默认词。 */ words?: readonly string[]; /** 固定词数;不传则按视口宽度自适应。 */ count?: number; /** 布局随机种子:同值可复现,换值换分布。默认 `20250913`。 */ seed?: number; /** CSS perspective,默认 900。 */ perspective?: number; /** 中心空洞半径,越小词越靠近灭点。默认 8。 */ innerRadius?: number; /** 外圈采样半径。默认 52。 */ outerRadius?: number; /** z 轴最短飞行距离,越大消隐越靠近中心。默认 480。 */ travelMin?: number; /** z 轴额外随机飞行距离。默认 560。 */ travelRange?: number; /** 淡入完成进度 0–100。默认 10。 */ fadeIn?: number; /** 开始淡出进度 0–100,越大越晚消失。默认 88。 */ fadeOut?: number; /** 文字颜色。 */ color?: string; /** 字号,默认 24px。 */ fontSize?: number | string; className?: string; style?: CSSProperties; children?: ReactNode; ariaHidden?: boolean; }; declare function WordTunnel({ words, count, seed, perspective, innerRadius, outerRadius, travelMin, travelRange, fadeIn, fadeOut, color, fontSize, className, style, children, ariaHidden, }: WordTunnelProps): react.JSX.Element; /** * 词云隧道 — 经典 3D 星空隧道布局 * * xy:环外随机 + 最小间距拒绝采样 * z:只沿深度飞,perspective 汇向灭点 * 词数:1440→80、1920→120、2560→160 */ type TunnelWord = { label: string; x: string; y: string; z0: number; z1: number; opacity: number; duration: number; delay: number; }; /** 默认搞笑词条(可被 props.words 覆盖) */ declare const DEFAULT_WORDS: readonly ["我本地是好的", "先上线再说", "这不是 bug", "是 feature", "需求又改了", "估计半小时", "今天不加班", "已读不回", "在吗急", "线上炸了", "回滚回滚", "能跑就行", "LGTM", "先 merge", "文档?不存在", "临时方案永久用", "谁写的破代码", "哦是我写的", "只有上帝懂了", "神秘空指针", "依赖地狱", "周五上线快乐", "产品说随便改改", "后端说前端的锅", "前端说后端的锅", "测过了吗", "没测但感觉没问题", "复制粘贴工程师", "Ctrl+C Ctrl+V", "热更新一下", "没事没事", "绝对没问题", "大概也许可能", "重构?下次一定", "注释写给鬼看的", "npm install 三小时", "冲突自己解决", "下班了吗", "有空帮看下", "又是一个小需求"]; declare const DEFAULTS: { readonly seed: 20250913; readonly perspective: 900; /** 中心空洞半径(越小词越靠近灭点) */ readonly innerRadius: 8; /** 外圈采样半径 */ readonly outerRadius: 52; /** z 轴最短飞行距离 */ readonly travelMin: 480; /** z 轴额外随机飞行距离 */ readonly travelRange: 560; /** 淡入完成进度 0–100 */ readonly fadeIn: 10; /** 开始淡出进度 0–100(越大越晚消失、越贴中心) */ readonly fadeOut: 88; }; /** 1440→80、1920→120、2560→160;每约 480px 一档 +40 */ declare function wordCountForWidth(width: number): number; /** 生成可配置淡入淡出的 keyframes CSS */ declare function buildConvergeKeyframes(name: string, fadeIn?: number, fadeOut?: number): string; type BuildWordsOptions = { count?: number; seed?: number; words?: readonly string[]; innerRadius?: number; outerRadius?: number; travelMin?: number; travelRange?: number; }; declare function buildWords(options?: BuildWordsOptions): TunnelWord[]; export { type BuildWordsOptions, DEFAULTS, DEFAULT_WORDS, type TunnelWord, WordTunnel, type WordTunnelProps, buildConvergeKeyframes, buildWords, wordCountForWidth };