# Big Breath — Parallax Architecture Plan

## The Core Concept
As you scroll, you are moving THROUGH breath. Large typography persists across sections at a slower scroll rate than the content. Images overlap from below. The page breathes — it expands and contracts as you move through it.

---

## 5 Parallax Layers (z-axis stack, back to front)

### Layer 0 — Atmospheric (slowest, fixed-ish)
Large ghost word "BREATH" in Cormorant Garamond Italic, ~30vw tall, opacity 3-5%.
Scrolls at 0.1x rate using GSAP ScrollTrigger scrub.
Spans from hero through philosophy section — user sees it slowly moving behind everything.
```js
gsap.to('.ghost-word', { y: '-30%', ease: 'none', scrollTrigger: { scrub: 1, start: 'top top', end: 'bottom top' }});
```

### Layer 1 — Background gradient shift
Body background radial gradient center shifts horizontally as user scrolls.
Creates feeling of moving through space.
Electric blue glow tracks toward center as you reach the "Meet Big Joe" section.

### Layer 2 — Photo cards (scroll faster than content)
Big Joe headshot card scrolls at 1.15x speed — appears to "rise" as content catches up.
Implemented with GSAP `scrollTrigger: { scrub: true }` on `translateY(-80px)` to `translateY(0)`.
Creates the illusion the photo is coming toward you.

### Layer 3 — Content blocks (normal speed, 1x)
All section text, cards, and UI at normal scroll rate.

### Layer 4 — Foreground particles (fastest, 1.05x)
Particle canvas scrubs slightly faster — reinforces depth.

---

## 4 Missing Sections to Add

### Section A — "The Science" (after Philosophy)
Headline: "Why breath works — the research"
3 columns: Stress Reduction | Focus & Cognition | Recovery
Reference: Harvard Business Review citation (Jermaine's note)
Visual: animated line graph or pulse wave SVG

### Section B — "In the Room" (after Meet Big Joe)
Full-bleed group photo gallery — horizontal scroll or masonry
Shows real sessions: corporates, athletes, retreats
Caption: location + context per photo
Source: Group Photos + 2026 Additions from .planning

### Section C — "Upcoming Sessions & Events"
Dark card grid — event name, location, date, "Reserve Spot" CTA
If no live data: placeholder cards styled correctly

### Section D — "The Practice, Anywhere" (App / Digital)
App membership mention
Simple: headline + subhead + single CTA
Positions Big Breath beyond in-person

---

## Logo Block — Correct Position
Move to: AFTER testimonials, BEFORE final CTA close.
Framing: "Brands that trust the practice" — less corporate, more community signal.
Treatment: actual logos (extract from PDF with pdfimages), not text.

---

## Execution Order (after /compact)
1. Extract partner logos: pdfimages on pitch deck PDF
2. Convert HEIC headshots to JPG for group photo section
3. Add ghost-word parallax layer (Layer 0)
4. Add 4 missing sections (A, B, C, D)
5. Move logo block to post-testimonials
6. Wire GSAP scrub to photo cards
