前端与 UI
Cinematic Scroll Storytelling
用 Lenis 加 GSAP ScrollTrigger，做滚动驱动的落地页。
这是什么
一套可用代码：预加载、遮罩式拆词浮现、区块入场、随滚动擦除的固定场景、吸顶卡片堆叠和视差，基于 Lenis 和 GSAP ScrollTrigger。
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, foot
它对设计意味着什么
- 动效 token 固定时长、错峰、偏移和模糊，让浮现效果始终一致。
- 每个效果都有减弱动效分支，保住布局和对比度。
- 构建顺序先立静态页再加动效，避免滚动场景搅成一团。
包含哪些内容
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
如何安装
Cinematic Scroll Storytelling
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
装好 gsap 和 lenis，再把 Lenis 接进 GSAP 的 ticker。
-
给区块加上对应浮现、堆叠和视差的 data 属性。
-
最后再加随滚动擦除的固定场景，然后跑一遍 QA 清单。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。