epic-design

---
name: epic-design
description: Use when building a cinematic, immersive website with scroll-driven depth, parallax, and motion using flat PNG assets, CSS, and JS only. Also for adding 2.5D effects to an existing page.
category: Engineering
version: 1.0.0
tools: []
---

# Epic Design

Build cinematic, immersive websites that feel premium and alive — using flat PNG/static assets, CSS, and JavaScript only. No WebGL or 3D modeling required. Think Apple product pages, Awwwards winners, luxury brand sites: depth and layers that respond to scroll, text that enters and exits with intention, sections that transition cinematically, elements that feel like they exist in space. Never produce a flat, static page under this skill.

**Use when:** building a new cinematic/immersive site from a brief and image assets, adding 2.5D scroll effects to an existing page, or debugging performance/animation issues in an existing motion-heavy build.

If prior project context exists in the conversation, use it and only ask about what it doesn't cover.

## Step 1 — Brief and asset inspection

Extract: what the product/content is, the target mood (dark/cinematic, bright/energetic, minimal/luxury), and scope (hero only vs. full page).

For every image asset shared, visually assess before using it: format (JPEG never has real alpha; PNG may have a fake one); whether the background is a clean cutout (real transparency, use directly) or a solid/complex background that may need removing.

**Judge whether the background actually needs removing** — don't reflexively strip every background:

Remove it when the image is an isolated product/object on a studio backdrop, a character/figure meant to float in the scene, a logo/icon meant to sit transparently on any background, or anything slated for a floating mid/foreground depth layer.

Keep it when the image is a website/app/UI screenshot, a photograph used as a section background or full-bleed image, a complete artwork/illustration/poster, a mockup or device frame, or any image where the background IS the content (including a background-layer photo — that's its job).

If unsure, judge by the image's intended role: if it needs to float freely over other content, strip the background; if it fills a space or is the whole point, keep it. State the assessment and depth/size assignment for every asset to the user before building — never silently auto-remove a background, never silently ignore a bad one.

**Compositional hierarchy** — don't size every asset the same: one asset is the hero (50–80vw, deepest foreground layer); companions run 15–25% of the hero's display size, positioned to hug its edges (`right: calc(50% - [hero-half-width] - [gap])`); accents/particles stay tiny (1–5vw); background fills cover the full section. When the hero grows or exits on scroll, companions should scatter outward, not just fade — reinforcing that they were orbiting it.

**Cinematic role per asset** — ask what each image does in the scroll story: floats beside the hero (mid-depth, float-loop, scatters on scroll-out); is the hero (deepest foreground, elastic-drop entrance, grows on scrub); fills a section during a scale-in transition (background layer); lives in a sticky sidebar while content scrolls past; or decorates a section edge (mid-depth, clip-path reveal).

## Step 2 — Technique selection

Match user intent to technique combinations:

| User says | Primary pattern | Text technique | Special effect |
|---|---|---|---|
| Product launch / brand site | Floating product between sections + perspective zoom | Split converge + word lighting | Scale-in pin |
| Hero with big title | Multi-layer parallax + pinned sticky | Offset diagonal + masked line reveal | Bleed typography |
| Cinematic sections | Curtain panel roll-up + scrub timeline | Theatrical enter/exit | Top-down clip birth |
| Apple-style animation | Scrub timeline + clip-path wipe | Word-by-word scroll lighting | Character cylinder |
| Elements between sections | Floating product + clip-path birth | Scramble text | Window pane iris |
| Cards / features | Cascading card stack | Skew + elastic bounce | Section peel |
| Portfolio / showcase | Horizontal scroll + flip morph | Line clip wipe | Diagonal wipe |
| SaaS / startup | Window pane iris + stagger grid | Variable font wave | Curved path travel |

By requested scroll behavior: "stays in place while things change" → pin + scrub timeline; "rises from section" → floating product + clip-path birth; "born from top" → top-down clip birth or curtain roll-up; "overlap/stack" → cascading card stack or section peel; "text flies in from sides" → split converge or offset diagonal; "text lights up word by word" → word-by-word scroll lighting; "whole section transforms" → window pane iris + scrub timeline; "section drops down" → clip-path `inset(0 0 100% 0)` → `inset(0)`; "circle opens" → circle iris expand; "travels between sections" → cross-section flip or curved path travel.

## Step 3 — Depth system (mandatory on every element)

| Depth | Role | Parallax | Blur | Scale |
|---|---|---|---|---|
| 0 | Far background | 0.10x | 8px | 0.70 |
| 1 | Glow/atmosphere | 0.25x | 4px | 0.85 |
| 2 | Mid decorations | 0.50x | 0px | 1.00 |
| 3 | Main objects | 0.80x | 0px | 1.05 |
| 4 | UI / text | 1.00x | 0px | 1.00 |
| 5 | Foreground FX | 1.20x | 0px | 1.10 |

Apply as `data-depth="N"` matching a `.depth-N` CSS class. Product images default to depth-3; background images default to depth-0 with slight blur.

## Step 4 — Accessibility and performance (always)

Include a `prefers-reduced-motion: reduce` media query that collapses all animation/transition durations to near-zero and forces `scroll-behavior: auto`. Only animate GPU-safe properties — `transform`, `opacity`, `filter`, `clip-path` — never `width`/`height`/`top`/`left`. Apply `will-change: transform` only while an element is actively animating, then remove it. Use `content-visibility: auto` on off-screen sections and `IntersectionObserver` to animate only what's in view. Detect touch input via `window.matchMedia('(pointer: coarse)')` and reduce effects on mobile.

## Step 5 — Structure

Every scroll "scene" is a section wrapper with a tall `--scene-height` (e.g. 200vh for a scrubbed section) containing a minimum of three stacked depth layers (`aria-hidden="true"` on purely decorative ones): background/atmosphere layers at the bottom, the main hero object layer, the text/UI layer, and an optional foreground-FX layer on top.

## Proactive triggers

Flag unprompted: JPEG product images (can't carry transparency — offer a visual background assessment); all assets the same size (missing compositional hierarchy — recommend hero + companion sizing); no depth assignments mentioned (every element needs one, 0–5); "smooth animations" requested with no reduced-motion handling; parallax requested with no performance optimization plan (will-change, GPU-safe properties); more than ~80 animated elements (recommend reducing or lazy-loading).

## Quick rules (non-negotiable)

Run asset assessment and state depth assignments before writing any code; judge every background individually, never auto-remove, never silently ignore; every section has a minimum of 3 depth layers; every text element uses at least one animation technique; every project includes a `prefers-reduced-motion` fallback; only animate `transform`/`opacity`/`filter`/`clip-path`; product images default to depth-3, backgrounds to depth-0 with slight blur; hero elements get a subtle floating loop (6–14s, never fully static); every decorative element gets `aria-hidden="true"`; mobile gets reduced effects via `pointer: coarse` detection; `will-change` is removed once an animation completes.

## Output

Deliver a single self-contained page (inline CSS/JS) unless separate files are requested, preceded by the asset audit and depth plan. Structure every explanation as bottom-line-first (show the audit and depth plan before the code), what/why/how for each technique choice, actions with clear owners ("you need to provide transparent PNGs," not passive voice), and confidence tags — verified technique, experimental, or limited browser support.