Words Preloader

问候预加载

多语言问候依次切换，再以弧形幕布向上退场的预加载组件。

JUNGUI / WELCOME

Hello, again.

让每一次抵达，都有一点仪式感。

正在准备页面

交互方式

自动播放问候序列后露出内容；可重播或全屏体验。支持深浅配色、加载就绪控制和减少动态效果偏好。视觉参考 Skiper UI 与 Dennis Snellenberg，代码独立实现。

使用示例

import { WordsPreloader } from "@/components/ui/words-preloader"

export function Demo() {
  return <WordsPreloader words={["Hello", "Bonjour", "你好"]} theme="dark">
    <div style={{ padding: 80 }}>Welcome to your page.</div>
  </WordsPreloader>
}

参数

参数	类型 / 默认值	说明
`children`	`ReactNode`	幕布退场后展示的内容，播放期间不可交互。
`words`	`string[]`八种语言问候	依次显示的文字；空数组直接结束序列。
`ready`	`boolean`true	序列完成后是否允许退场；false 停留在最后一个词，变为 true 后自动退场。
`replayKey`	`string \| number`	改变此值重新挂载并播放，也会重置 children 内部状态。
`fullscreen`	`boolean`false	通过 portal 覆盖整个视口，锁定滚动并管理键盘焦点。
`theme`	`"light" \| "dark"`"dark"	幕布深浅配色，不依赖全局主题。
`firstDuration`	`number`800	首词停留时间（ms）；单词数组也使用此值。
`wordDuration`	`number`150	中间词停留时间（ms）。
`lastDuration`	`number`300	末词停留时间（ms，多词时）。
`exitDuration`	`number`800	弧形退场时长（ms），减少动态效果时改为 120ms 淡出。
`curveHeight`	`number`300	曲线控制点向下偏移（px）。
`loadingLabel`	`string`"Loading"	固定的读屏加载提示，避免逐词播报。
`onComplete`	`() => void`	自动退场完成后调用。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

@radix-ui/react-dialogclsxmotiontailwind-merge

components/ui/words-preloader.css
components/ui/words-preloader.tsx
lib/utils.ts

来源

https://skiper-ui.com/v1/skiper8

https://dennissnellenberg.com/