All set

都准备好了

白底完成页。标题可揭开或逐笔手写，同时撒彩纸，底下是黑底白字按钮。

在预览中滚动，或点击工具栏全屏体验。

交互方式

揭开时整句停在原位，约 1.5 秒从左向右显现。手写时笔画逐个描出再填色，节奏接近开机问候。彩纸同时喷出，标题结束后按钮淡入。font 换字体，motion 换动效，title 换文案。点击按钮清掉彩纸并触发 onAction。演示底部可切换英文、中文「一切就绪」、四种字体和两种动效。尊重减少动态效果。

使用示例

import { AllSet } from "@/components/ui/all-set"

export function Demo() {
  return <AllSet title="一切就绪" font="script" motion="handwriting" actionLabel="Open JungUI" onAction={() => console.log("open")} />
}

参数

参数	类型 / 默认值	说明
`title`	`string`"You're all set"	标题。
`font`	`"sans" \| "serif" \| "mono" \| "script"`"sans"	黑体、衬线、等宽或手写。
`motion`	`"wipe" \| "handwriting"`"wipe"	揭开，或逐笔手写。
`actionLabel`	`string`"Open JungUI"	按钮文字。
`onAction`	`() => void`	点击按钮。
`replayKey`	`string \| number`	改变后重播标题和彩纸。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

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

@types/canvas-confetticanvas-confetticlsxmotiontailwind-merge

components/ui/all-set.css
components/ui/all-set.tsx
lib/utils.ts

来源

画面来自 2026-10 主人对 Spotify Premium 购买完成页的口述，未见源码，独立实现。

手写过程参照苹果开机 Hello 的逐笔描线，独立实现，不是苹果素材。