包装撕开粒子消散

从右上角拖开立体金属包装，可停在半途并继续拉动弯折封条，完全撕开后释放抹茶粉末。

粒子转场六框架TypeScript

演示

抓住右上角向左拖动撕开，中途松手后可从封条继续。鼠标移动可查看立体反光；R 重置，聚焦撕口后按 Enter 打开。

npm install react react-dom three@0.185.1

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom three@0.185.1

MatchaPowderReveal.tsx

正在加载代码…

App.tsx

import { MatchaPowderReveal } from "./MatchaPowderReveal";

export default function App() {
  return <MatchaPowderReveal />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.progress` 初始或更新后的动画进度，范围 0 至 1。	`number`
`options.playing` 播放或暂停动画。	`boolean`	`true`
`options.autoTear` 无需拖动自动撕开，默认关闭；列表预览会开启。	`boolean`	`false`
`options.loop` 结束后重新播放。	`boolean`	`false`
`options.speed` 播放速度倍数，范围 0.25 至 2。	`number`	`1`
`options.onProgress` 用户调整进度时触发，外部更新不触发。	`(progress: number) => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`720`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`