WebDev Style Library · v2.0
10 种风格
各一段，动效全开
同一套内容，用风格库里 10 个完整预设各渲染一段。每段的字体、配色、形状、纹理、布局语法都不同，并带它自己的标志性动效（signature motion）。
滚动进入时触发入场动画；按钮和卡片可以 hover / 点击看反馈；玻璃、霓虹、blob、chrome 这些是循环装饰动效。
提示：系统开启「减少动态效果」时，所有循环/装饰动画会自动停掉，只保留内容。
01 · swiss — International Typographic
Issue №01 / Grid System
Archivo · Hanken Grotesk
Paper / Ink / №E2231A
FORM FOLLOWS THE GRID
客观、网格锁定、字体即图像。三色系统：纸、墨、一个信号红。零圆角，1px 发丝线是唯一装饰。标题逐列擦入是它的标志动效。
12Columns
1.333Type scale
02 · editorial — Literary / Magazine
Feature · Long read
The quiet craft of reading on a page
排版的温度来自细节：首字下沉、衬线正文、行高 1.7、行宽控制在 60 多个字符。这一段以 Fraunces 的大写首字母开场，正文用 Newsreader，节奏是慢的、可读的、叙事性的。
好的阅读体验不是被设计出来的，而是被让出来的空间。
滚动时内容轻柔上浮，图片缓慢回正。链接 hover 时下划线从左画出。这是 editorial 的动效个性——文本主导，温和。
03 · brutalist — Raw / Anti-Design
★ RAW STRUCTURENO ROUNDED CORNERSBORDERS EVERYWHERE★ RAW STRUCTURENO ROUNDED CORNERSBORDERS EVERYWHERE
UNDESIGNED
ON PURPOSE
诚实、结构化、有点不友好。可见边框、等宽字、刺眼强调色、hover 瞬间反色，无平滑过渡。跑马灯是签名结构。
// 01SYSTEM
每个盒子露出边框和标签。
// 02RAW
hover 时背景与文字瞬间互换。
// 03HARSH
steps() 缓动，无圆角无阴影。
04 · neo-brutalist — Playful Outline Pop
★ NEW DROP
Brutalism, but it smiles
⚡
硬阴影
每个交互块都有实心偏移阴影，点击时压下去。
✦
弹性
overshoot 缓动入场，hover 抬起、按下回弹。
05 · glass-spatial — Frosted / Aurora / Depth
Spatial · Depth
Light, layered, alive
磨砂面板浮在流动的极光渐变上。入场是模糊渐显（blur 20→0），背后的极光持续漂移，这是它的签名动效。玻璃在这里是功能性的深度，不是装饰。
06 · retro-future — Synthwave / Terminal
System Online
80 年代电脑、霓虹网格、CRT 辉光。透视网格地平线 + 发光标题 + 扫描线是签名画面。终端打字机逐字显示，标题霓虹脉冲（受控、不无限闪），按钮 hover 故障抖动。
07 · organic — Botanical / Hand-crafted
Made by hand
Grow something slow & warm
温暖、自然、平静、有触感。blob 形状 + 手绘下划线 + 大地色系。下划线滚动进入时手绘画出，装饰 blob 持续轻摆。一切缓慢，没有 snappy 的东西。
08 · luxury — Couture / Gallery Minimal
Maison · Est. MMXXVI
Restraint is the final luxury
09 · maximalist — Acid / Y2K / Chrome
HYPE★MORE IS MORE★HYPE★MORE IS MORE★
NEW!!
2046
LIMITED
★ DROP ★
CHROME
more is more is more
10 · technical — Data / Engineering Precision
System Metrics
ALL SYSTEMS OPERATIONAL
api-gateway-0128mshealthy
worker-pool-eu61msdegraded
cache-redis-034mshealthy