webgl-threejs-background-animationlisted
Install: claude install-skill lizliz404/agent-skills
# WebGL Three.js Background Animation & Motion Craft
> **改名历史：`lightweight-three-hero` → `threejs-landing-background` → `webgl-threejs-background-animation`。本质：Three.js + 融入页面（或游戏世界）的动画，不是画框里的展品。**
>
> **2026-08 升级：** 从「landing 背景专用」扩展为「Three.js WebGL 动画工艺」——覆盖游戏内动画、视觉杠杆、性能预算、缓动插值。目标：**低成本换高感知**，不是堆 GPU。
Cookbook for animated WebGL that doesn't punish the GPU. Core pattern: batched geometry → config-driven materials → dual-material crossfade / juice feedback → interaction-driven progress → lifecycle gate. Same spine for decorative backgrounds **and** lightweight in-game worlds.
## Design Preferences（美学准则，不可违反）
**动画不是画框里的画，而是融入页面/世界的背景。** 具体：
1. **不要矩形画框**：不用 `border-radius` + `overflow: clip` + 固定宽高比把动画框成"挂在墙上的展品"。
2. **要边缘渐隐融入**：radial-gradient mask、vignette、或 scene fog，让它"长"在页面上。
3. **背景层级**：WebGL canvas 默认 `position: fixed; inset: 0; z-index: -1`（游戏全屏例外：canvas 即视口）。
4. **内容可读性**：文字区要有 backdrop（blur / 半透明），但不要完全遮住动画。
5. **尺寸**：默认全视口；装饰件可跟容器，仍要边缘淡出。
**反模式（禁止）：**
```css
/* ❌ 画框感 */
.animation-frame {
width: clamp(260px, 42vw, 360px);
aspect-ratio: 1 / 1;
border-radius: 42% 58% 53% 47% / 48% 44% 56% 52%;
overflow: clip;
}
```
**正模式（推荐）：**
```css
/* ✅ 融入背景 */
.animation-background {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}
```
---
**Trigger phrases (中英文都能触发):**
- "做个 3D 背景" / "加个 WebGL 动效" / "landing page 3D 动画"
- "Three.js background" / "WebGL hero anim