星流 Starflow：一句话，做出 OpenAI 同款发布页
一句话，做出 OpenAI 同款发布页
四千颗星，一座星系。它会随你的滚动翻身、让位、聚成形状。引擎开源，配一个 skill，Claude Code 和 Cursor 就能直接产出这一页。
先让位，再出场
真正好用的效果不抢镜头。你开始读的时候，星星退到两侧，把中间留给文字。
它们没有离开。每一颗星都记得自己在星臂上的位置，往回滚，一切逆序发生。
同一批星星，另一个形状
光标、logo、任何一段 SVG 路径。星星沿着线落下，再顺着线流动。
你只需要说一句话
装上 skill，对 agent 说：用 starflow 做一个发布页。引擎、排版、滚动编排都在包里，它只负责填内容。
不用重写粒子系统，不用调 shader。这一页就是这么来的。
滚动编排：三个阶段各自的曲线
页面只量 DOM、算进度，阻尼和混合都在引擎里。下面三档每 6 秒自动切换一次，也可以点。
形状强度 · 随进入视口的进度
用 skill 和不用 skill
左边是自己从零写；右边是装上 starflow 之后对 agent 说一句话。引擎、排版、滚动编排都在包里，它只负责填内容。
从零写
做一个 OpenAI 同款的星空发布页
正在写粒子着色器…
正在调 bloom 参数…
正在推导滚动散开的公式…
星星大概是这样，但滚动还没接上。
用 starflow
用 starflow 做一个发布页
读取 SKILL.md，复制 starflow.js 和 template.html
按 DESIGN.md 排版，写文案，换上你的 logo 路径
发布页已生成：首屏星系、两个形状 cue、header 和 footer 都在。
星流 Starflow
“四千颗星，一座星系。粒子的分布、流动、辉光和镜头光晕的算法参考了原站，代码是独立实现，MIT 开源。skill 和 openai-astra 设计系统都在同一个仓库里。”
1 / 3
三分钟讲清楚
幻灯片组件：底部控制条翻页，左下角展开缩略图，右下角全屏。方向键也能翻。
三种产物，一套引擎
npm run build:lib 一次打出三个文件，按场景取用。数字来自当前版本的构建输出。
| 文件 | 大小 | gzip | 自带 three | 用法 |
|---|---|---|---|---|
lib/starflow.js | 646 KB | 165 KB | 是 | 复制到任何页面，<script type="module"> 直接 import |
lib/starflow.iife.js | 642 KB | 165 KB | 是 | 不用模块的页面，挂成 window.Starflow |
lib/starflow.slim.js | 89 KB | 33 KB | - | npm i @win-hao/starflow，three 由 npm 解析 |
觉得有用，点个赞
开源，MIT。仓库地址在下面。
github.com/Win-Hao/starflow · github.com/Win-Hao/starflow-skill