# Variation Library — design-hybrid-forge

Load when the user wants the hybrid to feel more unique, extravagant, classic, animated, CSS-forward, or otherwise less "default SaaS".

Updated from a current web scan on **March 30, 2026**. Use these directions as overlays on top of the hybrid's core DNA, never as a replacement for the 2 primary parents.

---

## How to use this file

1. Choose **1–2 style modes**
2. Choose **0–2 layout moves**
3. Choose **0–2 motion directions**
4. Choose **0–2 material / texture signals**
5. Choose **1–2 typography moves**
6. Choose **0–3 advanced CSS techniques**
7. Choose **2 anti-sameness guardrails**

If you choose too many items from every category, the result becomes a moodboard instead of a skill.

---

## Style modes

| Mode | Use when | Core signal |
|---|---|---|
| **Classic editorial** | The user wants timeless, cultured, authoritative UI | Serif-forward hierarchy, measured spacing, mature rhythm |
| **Extravagant / maximalist** | The user wants a bold, high-personality result | Layered color, dense composition, deliberate abundance |
| **Cinematic / immersive** | The site should feel like a scene or story world | Atmospheric contrast, chapter-based sections, dramatic reveals |
| **Playful / dopamine** | The brand benefits from joy and energy | Saturated accents, elastic details, expressive components |
| **Neo-brutalist / anti-design** | The user wants structure with edge and friction | Hard borders, visible hierarchy, unapologetic layout honesty |
| **Retrofuturist** | The user wants nostalgic future energy | Chrome, glow, arcade optimism, sci-fi nostalgia |
| **Luxury modern** | The product needs premium restraint | Selective ornament, wide spacing, exact finishing |
| **Collage / handmade** | The user wants warmth and irregularity | Mixed media rhythm, visible craft, controlled imperfection |

## Layout moves

| Move | What it changes |
|---|---|
| **Asymmetric composition** | Breaks center-aligned sameness with controlled tension |
| **Narrative scroll scenes** | Turns long pages into chapters instead of repeated sections |
| **Experimental navigation** | Allows map-like, layered, or unconventional entry patterns |
| **Dense mosaic** | Uses varied card scales and collage logic for dashboards or showcases |
| **Split-screen contrast** | Maintains tension between two persistent visual zones |
| **Signature hero structure** | Forces a memorable opening move instead of a generic hero |

## Motion directions

| Direction | Best for |
|---|---|
| **Restrained microinteractions** | Mature B2B, precise tools, classic systems |
| **Kinetic typography** | Editorial, launch pages, cinematic brands |
| **Scroll-driven scenes** | Storytelling pages, showcases, immersive marketing |
| **View transitions** | App-like navigation continuity, single-page polish |
| **Cursor-reactive motion** | Experimental / premium interactions with pointer-rich UX |
| **Gamified feedback** | Playful products, onboarding, consumer-facing experiences |

## Material / texture signals

| Signal | Effect |
|---|---|
| **Glass layers** | Depth through substrate and translucency |
| **Grain / noise** | Breaks sterile smoothness and adds tactility |
| **Paper / editorial tactility** | Print-inspired warmth and cultural depth |
| **Chrome / metallic** | Reflective future-luxury finish |
| **Soft tactile UI** | More touchable, product-like controls |
| **Collage / cutout** | Handmade, layered, artsy expression |

## Typography moves

| Move | Why it helps |
|---|---|
| **Bold display type** | Establishes identity fast |
| **Variable font axes** | Makes typography itself part of the motion/shape system |
| **Serif revival** | Adds warmth, authority, or cultural depth |
| **Mono rails** | Adds technical rhythm and operational precision |
| **Compressed headlines** | Creates cinematic or editorial drama |
| **Mixed type system** | Distinguishes roles across hero/body/meta layers |

## Advanced CSS techniques

Use only when they reinforce the chosen identity:

- **Scroll-driven animations** — scene logic tied to progress, not generic reveal-once behavior
- **View Transition API** — continuity between states/routes
- **Masks / clip-path** — non-rectangular reveals, ornamental cuts, unusual framing
- **SVG filters / noise** — texture, distortion, displacement, controlled grit
- **Backdrop filters** — glass depth and layered translucency
- **3D transforms** — perspective, stacked depth, immersive hero moments
- **Sticky storytelling** — pinned chapters and staged reveals

## Anti-sameness guardrails

Pick at least 2 and enforce them:

- No generic centered SaaS hero
- At least one uneven rhythm move
- At least one domain-specific ornament or motif
- At least one unmistakable surface treatment
- Motion must communicate meaning, not filler
- Typography must do more than label content

---

## Implementation rule

The variation overlay modifies the hybrid's **expression**, not its **core DNA**.

Priority order:
1. Primary parents define substrate and structure
2. Variation overlay defines expression and anti-sameness pressure
3. Modifiers, if any, stay inside their narrow lane

---

## Current source scan

- Figma resource library on current web design directions:
  https://www.figma.com/resource-library/web-design-trends/
- Webflow on variable fonts as active web typography tooling:
  https://help.webflow.com/hc/en-us/articles/33961307448979-Variable-fonts
- web.dev on same-document view transitions entering Baseline on October 16, 2025:
  https://web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available
- web.dev coverage of Interop 2026, including scroll-driven animations:
  https://web.dev/blog/interop-2026?hl=en
