// SHOWROOM · ZERO DEPS

别做又一个 会动的网页。 做让人停住 的那一下。

这一页是 fxlab 的验收现场:序章、全屏菜单、拆行入场、光标拖尾、滚动字幕、五种封面语言的横向画廊、液态图片过渡、磁性按钮、主题突变——同一套 token,像一个人做的。

SCROLL ↓

0
PATTERNS
0
FEATURED
0
DEPENDENCIES

// 01 WORKS

悬停,像素开始流动。

横向画廊 = sticky + 纵滚映射。五张卡是五种完全不同的封面语言(硬切 / 粒子 / 大字 / 弹簧 / 变形);悬停或点击时,再用 displacement 过渡到另一套封面。

Shader Wipe硬切边缘 · TRANSITIONS
Particle Field星尘粒子 · GPU
Split Type大字拆行 · TEXT
Spring Drag磁吸弹簧 · HOVER
View Morph双态变形 · NATIVE

// 02 CRAFT

炫是手段, 编排才是品味。

// MEMORY POINT

一页只留一个强注意效果

displacement、粒子、超长 marquee 这种「会抢走视线」的东西,全站挑 1–2 处记忆点。其它区块用同频入场托住节奏,而不是处处炸场。

// TOKEN

旋钮收口

--dur-s / m / l + 一个缓动族。改「整体快一点」只动一行。

// AGENT

INDEX + TASTE

给人抄 demo,给 Agent 选型。装上 skill 后,任意支持 skill 的 Agent 都能说「要有质感」。

// A11Y

reduced-motion

全页一次判断。拖尾、横向 pin、噪声过渡全部有干净降级。

// 03 TASTE

利落大于互溶。 像一个人做的。

滚到这里时,整段背景切到荧光绿——章节主题突变不是换皮肤滤镜,是用状态告诉你:叙事进了下一章。

THEME-SHIFT · ON SCROLL
ACCENT = #c5f542
EASE = .22 1 .36 1

// OPEN SOURCE

把这一页拆走。

每个效果都能在仓库里找到独立 demo 与原理 README。样板间只负责证明:拼在一起时,仍然干净。

// THIS PAGE USES

entry-preloader 加载序章 menu-stagger-reveal 全屏菜单 split-text-reveal 拆行入场 canvas-ambient-bg 氛围背景 cursor-trail 光标拖尾 scroll-marquee 滚动字幕 count-up 数字滚动 horizontal-gallery 横向画廊 image-displacement 液态图过渡 magnetic-button 磁性按钮 theme-shift 章节主题突变 grain-overlay 噪点层

← 返回 pattern 实验室 · GitHub