Web Module Taxonomy & Design Vocabulary
A working lexicon of page modules, from structural primitives to high-craft scroll cinema.
Purpose: shared naming so a module can be specified, priced, and reused without describing it in prose every time. Every entry below carries its canonical name, aliases, difficulty tier, rarity, fragility notes — and a live, working example you can operate.
How to read this
Difficulty (D1–D5) — build cost, not visual impact
| Tier | Meaning | Typical implementation |
|---|---|---|
| D1 | Static markup + CSS | Flex/grid, no JS |
| D2 | CSS state or trivial JS | :hover, position: sticky, small toggle |
| D3 | Real JS / library | IntersectionObserver, Embla, Radix, Framer Motion |
| D4 | Scroll-driven choreography | GSAP ScrollTrigger, Lenis, timeline sequencing |
| D5 | Custom render layer | WebGL/Three.js, shaders, physics, canvas sequences |
Rarity
| STD | On nearly every site |
| COM | Common |
| UNC | Uncommon |
| RARE | Signature-tier, memorable when done well |
Fragility flag
⚠ marks patterns that commonly break on mobile, hurt LCP/CLS, or fight accessibility.
Working the examples
Every example runs in its own isolated frame. Frames marked scroll inside ↕ respond to scrolling within the frame itself. Heavy render layers wait behind a ▶ RUN button so the page stays fast. ⤢ expands a frame to full screen; ↻ replays it.