Word Tunnel
3D 词云隧道 —— 文字朝灭点飞来
经典星空隧道式词云：词从四面飞向中心灭点。纯 CSS 3D，零动画库。
Demo
词云隧道
文字朝灭点飞来 · 纯 CSS 3D · 零动画库
简介
从加载页词云抽出来的通用背景效果：环外随机布局 + z 轴飞近。默认词条是程序员吐槽，也可传 words 自定义。
| 方式 | React | Vue |
|---|---|---|
| npm | @fxshelf/word-tunnel | @fxshelf/word-tunnel/vue |
CDN <script> | unpkg IIFE → 全局 WordTunnel | 暂无（SFC 源码） |
| 复制源码 | 拷 src/core + src/react | 拷 src/core + src/vue |
安装
npm install @fxshelf/word-tunnelimport '@fxshelf/word-tunnel/styles.css'用法
React
import { WordTunnel } from '@fxshelf/word-tunnel'
import '@fxshelf/word-tunnel/styles.css'
export function Hero() {
return (
<WordTunnel
style={{ height: 420, background: '#0c081e' }}
words={['我本地是好的', '先上线再说', 'LGTM']}
>
<h1 style={{ color: '#fff', padding: 32 }}>Hello</h1>
</WordTunnel>
)
}Vue
Vue 入口是源码 .vue SFC，不会预编译进 dist。目标项目需要能编译 SFC（例如 Vite + @vitejs/plugin-vue）。
<script setup lang="ts">
import { WordTunnel } from '@fxshelf/word-tunnel/vue'
import '@fxshelf/word-tunnel/styles.css'
</script>
<template>
<WordTunnel :style="{ height: '420px', background: '#0c081e' }" />
</template>CDN（React 18 UMD）
适合静态页或零构建场景。需先加载 React 18.x UMD（React 19 起官方不再提供 UMD），再加载 IIFE，并引入 CSS。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/@fxshelf/word-tunnel/dist/index.css" />
</head>
<body>
<div id="app" style="height:420px;background:#0c081e"></div>
<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@fxshelf/word-tunnel/dist/word-tunnel.iife.js"></script>
<script>
var WordTunnelView = WordTunnel.WordTunnel
ReactDOM.createRoot(document.getElementById('app')).render(
React.createElement(
WordTunnelView,
{ style: { height: '100%', background: '#0c081e' } },
React.createElement('h1', { style: { color: '#fff', padding: 32 } }, 'Hello'),
),
)
</script>
</body>
</html>- 全局
WordTunnel上有WordTunnel组件等。 - 也可用 jsDelivr：
https://cdn.jsdelivr.net/npm/@fxshelf/word-tunnel/dist/word-tunnel.iife.js - 生产环境建议锁定版本：
@fxshelf/word-tunnel@0.1.0/... - 顺序：React 必须在 word-tunnel 之前加载；样式用
dist/index.css。 - 不要用 jsDelivr 的
gh/.../dist直链（dist/不进 Git）。 - 仓库内完整示例：CDN示例.html
- Vue 暂无 script 直引；请用 npm 或下方复制源码。
复制源码（不经过 npm）
从仓库 packages/word-tunnel/src（或已安装的 node_modules/@fxshelf/word-tunnel/）拷贝：
src/core/ # 必拷（含 styles.css）
src/react/ # 仅 React 项目
src/vue/ # 仅 Vue 项目建议放到例如 components/word-tunnel/，保持 core 与 react/vue 同级，然后：
// React
import { WordTunnel } from './components/word-tunnel/react'
import './components/word-tunnel/core/styles.css'// Vue
import { WordTunnel } from './components/word-tunnel/vue'
import './components/word-tunnel/core/styles.css'Props
| Property | Type | Default | 说明 |
|---|---|---|---|
words | string[] | 内置搞笑词 | 词条 |
count | number | 按宽度自适应 | 固定词数 |
seed | number | 20250913 | 随机种子 |
perspective | number | 900 | CSS perspective |
innerRadius | number | 8 | 中心空洞半径，越小越贴灭点 |
outerRadius | number | 52 | 外圈采样半径 |
travelMin | number | 480 | z 最短飞行距离，越大消隐越靠中心 |
travelRange | number | 560 | z 额外随机飞行距离 |
fadeIn | number | 10 | 淡入完成进度 0–100 |
fadeOut | number | 88 | 开始淡出进度 0–100，越大越晚消失 |
color | string | #fff | 文字颜色 |
fontSize | number | string | 24 | 字号 |
className / style | — | — | 外层样式 |
children / slot | — | — | 叠在词云上的内容 |
seed是什么？ 伪随机数的起点。相同 seed + 相同词数 → 每次渲染位置都一样；改成seed={1}之类会得到另一套布局。日常一般不用改。
想让词更靠近中心再消失，可调小 innerRadius、加大 travelMin / travelRange，或提高 fadeOut：
<WordTunnel innerRadius={4} travelMin={600} travelRange={700} fadeOut={92} />