# I AM CHOIR · Framer Build Pack

How to rebuild the redesign inside the existing amiaudio.io Framer project, so the domain, GA and Pixel setup, and SEO all carry over. Build it as a new page called `/home-v2`, review it, then swap it to `/`.

The reference build to match pixel for pixel is the published studio experience at [i-am-choir.pplx.app](https://i-am-choir.pplx.app). All photos and videos are in `I-AM-CHOIR-Redesign-Source.zip` → `assets/`. The four hand-drawn illustrations are in `illustrations/` as standalone SVGs.

**Last updated October 20, 2026 (studio pass).** New since the first version: real-photo hero with a recording session bar, the proof-by-the-numbers strip, Inside the sessions, Liner notes, the light How it feels section with illustrations, a warmer team section with Polaroids, voice chips in the listening room, and a photo final CTA.

> **Demo video check.** In the original export the three demo files were rotated one slot (the file called gospel.mp4 actually played Gang Vocals). The source zip now has them fixed. Before you wire the Listen tabs, play each file once: gospel.mp4 must open on a "GOSPEL CHOIR (Before)" title, kids.mp4 on "KID'S CHOIR", gang.mp4 on "GANG VOCALS".

---

## 1. Project setup (15 min)

**Fonts** (Site Settings → Fonts → Google):
- Barlow Condensed: 700, 800, 900
- Inter: 400, 500, 600, 700
- JetBrains Mono: 400
- Instrument Serif: 400 and 400 italic (the studio accent: emotional lines, liner notes)

**Color styles** (Assets → Colors). Name them exactly:

| Style | Hex |
|---|---|
| `bg` | #060708 |
| `bg-2` | #0B0C10 |
| `surface` | #111218 |
| `line` | #E7E7E7 @ 9% |
| `line-2` | #E7E7E7 @ 16% |
| `text` | #F2F2F0 |
| `text-2` | #B9BAC3 |
| `muted` | #75778B |
| `teal` | #1D9292 |
| `teal-hi` | #2FC2C2 |
| `gold` | #FFBF00 |
| `lamp` | #FFB040 (warm studio glow, used at 8 to 16%) |
| `rec` | #FF3B30 |
| `sleeve` | #EFE9DC (liner notes card) |
| `light-bg` | #F7F5F0 |
| `light-text` | #14161C |
| `light-text-2` | #40424E |
| `light-teal` | #127272 (teal on white) |
| `light-gold` | #B37A00 (gold text on white) |

**Text styles** (Desktop / Tablet ≤1100 / Phone ≤820):

| Style | Font | Desktop | Phone | Line height | Notes |
|---|---|---|---|---|---|
| `Hero` | Barlow Condensed 900, uppercase | 132 | 60 | 0.86 | Line 2 uses `gold` |
| `Display` | Barlow Condensed 800, uppercase | 92 | 44 | 0.90 | Section titles |
| `Display XL` | Barlow Condensed 800, uppercase | 128 | 52 | 0.90 | Ethics title |
| `Card Name` | Barlow Condensed 900, uppercase | 64 | 46 | 0.86 | Producer cards |
| `H3` | Barlow Condensed 700, uppercase | 28 | 22 | 1.05 | Steps, team names |
| `Body L` | Inter 400 | 20 | 17 | 1.55 | Hero subhead, color `text-2` |
| `Body` | Inter 400 | 17 | 16 | 1.6 | color `text-2` |
| `Eyebrow` | JetBrains Mono 400, uppercase | 12 | 12 | 1.4 | Letter spacing 18%, color `teal-hi` |
| `Label` | JetBrains Mono 400, uppercase | 11 | 11 | 1.4 | Letter spacing 16%, color `muted` |
| `Serif Accent` | Instrument Serif 400 italic, sentence case | 1.05 to 1.18× the line it sits in | same | 1.0 | Never uppercase. Used for "Sing it once.", the numbers headline line 2, "The gear." |
| `Liner Name` | Instrument Serif 400 | 22 | 22 | 1.1 | Names and gear inside the liner notes card |

**Light sections.** How it feels, Team and FAQ use a white theme. Make a second set of color variables (or a Framer "light" variant on the section) with `light-bg` / white, `light-text`, `light-text-2`, `light-teal`, `light-gold`, and lines at #14161C @ 10% and 18%. Display type on white stays near-black; gold is only used for highlights and the illustrations.

**Breakpoints:** Desktop 1440, Tablet 1100, Phone 390. Max content width 1320, side padding 56 / 32 / 20.

---

## 2. Components to build first

### Button (variants: Gold, Ghost, Gold Small)
- Height 54 (Small: 40), horizontal padding 28, radius 999, Inter 600 15px
- **Gold:** fill `gold`, text #0A0A0A, shadow 0 10 40 -12 rgba(255,191,0,.55). Hover: y −2, fill #FFCB2E
- **Ghost:** fill white @ 2%, border 1px `line-2`, background blur 8. Hover: border white @ 50%
- Transition: spring, or ease `cubic-bezier(.2,.7,.1,1)` 350ms

### Eyebrow
Text like `01 / LISTEN`: the number in `teal-hi`, the slash in `muted`, the label in `teal-hi`.

### Producer Card (the most important component)
This rebuilds your approved 1080×1350 Zakk Cervini card system for the web.
- Frame 4:5, width 420 (phone: 84vw), fill #000, border 1px `line`, radius 22, clip content
- **Top area** (height 46%): photo frame at right, width 56%, height 100%. Apply a clip-path mask polygon `18% 0, 100% 0, 100% 100%, 0 100%`, which gives the slanted left edge. Image fill, focus near the face.
- **Name:** absolute, top-left 30/30, `Card Name` style, two lines (first / last), text shadow 0 2 24 rgba(0,0,0,.6). It overlaps the photo on purpose.
- **Gold rule:** 44×3, `gold`, 18px margin top and bottom
- **Roles:** `Label` style in `teal-hi`, with 14px gaps between roles (PRODUCER · MIXER)
- **Credits:** Inter 600 13px, #DADBE0, separated by " · "
- **Quote:** pinned to the bottom, Inter 600 19px, line height 1.38. Gold quote mark (Barlow 56px) above. "I AM CHOIR" in `teal-hi` bold, payoff phrase in `gold`.
- **Ambient:** two radial gradients: teal @ 14% top-left, gold @ 12% bottom-right
- **Variant "Text"** (no photo): eyebrow role, name 54px, credits, big quote 38px

### Choir Tab (variants: Default, Selected)
- Two-column: a 44×44 badge (A/B/C, JetBrains Mono) plus name (Barlow 700 26px) and meta (Inter 13px, `muted`)
- Padding 22, radius 18, border `line`
- Selected: border gold @ 55%, fill gold gradient 7%→1.5%, badge filled `gold` with black text

### Spec Cell
Label (`Label`), Value (Barlow 700 30px uppercase), Sub (Inter 14px `text-2`), padding 30, right border `line`.

---

## 3. Page sections, top to bottom

Every section uses a Stack with vertical padding `clamp(96px, 12vw, 176px)` unless noted.

### Nav (sticky, fixed position)
- Height 72. At scroll 0 it's transparent; after scrolling 40px, fill `bg` @ 72% with blur 18 and a bottom border `line`. Use a Framer scroll-variant or the "Sticky + Scroll Transform" effect.
- Left: wave mark (`mark.png`, 32w) + "AM I AUDIO" in Barlow 700 19px, letter spacing 14%
- Right: Listen · The Choirs · Producers · Ethics · Specs · FAQ (Inter 14, `text-2`), "Log in" → `https://shop.amiaudio.io/login`, Gold Small button "Start free trial"
- Phone: hamburger opens a full-width overlay with the links in Barlow 700 28px uppercase plus both buttons

### Hero (real photography, centered, studio session)
- Stack, centered, padding top `clamp(112px,10.5vw,150px)`, bottom 64–110. Background: teal radial glow at the bottom (30%) and upper left (16%), plus a warm `lamp` glow at the top right (16%, blurred), like a studio lamp just out of frame.
- Kicker pill: border teal @ 35%, fill teal @ 8%, radius 999, padding 8/16, holding `logo-choir-gold.svg` (120w), a hairline divider, then "NOW ON MACOS" in `Eyebrow` style.
- H1 "ONE VOICE IN." / "A CHOIR OUT." (line 2 gold), Barlow 900, `clamp(56px,6.6vw,112px)`, centered.
- Subhead in Body L, max 52ch, text-wrap balance: **"Sing it once."** in `Serif Accent` (color `text`), then "I AM CHOIR sends back a real choir, recorded together in one room, singing your words, melody and timing. Right inside your DAW on macOS."
- Buttons [Gold "Start 14-day free trial"] [Ghost "Buy · $199"] and the meta line (NO CREDIT CARD FOR THE TRIAL • MACOS 12+ • VST3 · AU · AAX • OWN IT FOREVER).
- **Photo panel** below, 44–64px gap, max width 1320: `hero-choir.webp` (the Gospel Choir session photo, 2.2:1). Radius 28, teal @ 28% outline, shadow `0 70 140 -60 rgba(47,194,194,.45)`. Bottom gradient from #05191A @ 70% to 0 over 34%. Phone: `hero-choir-m.webp` at 1.12:1, radius 22.
- **Session bar** (new, top of the photo, inset 18px left/right/top): a glass strip, radius 14, padding 10/16, fill #06090A @ 58%, blur 14, border white @ 10%, JetBrains Mono 11px uppercase, letter spacing 12%, color #D9DBE0. Left to right:
  - REC: a 9px `rec` dot with a red glow that pulses (opacity 1 → .25 → 1 over 1.6s, loop) and the word "REC" in #FF5A4F.
  - "SESSION 01 · GOSPEL CHOIR · DIRECTED BY ERICA HOWARD" (the dots in `teal-hi`), truncating with an ellipsis.
  - A "U67" tag: 1px gold @ 50% border, radius 6, gold text.
  - A running timecode `00:00:00:00` (hours:minutes:seconds:frames at 30fps) in `teal-hi`, tabular numbers. In Framer, use a small code component (see section 5) or a Ticker of digits; it starts at zero on page load.
  - Phone: inset 10px, hide the session name and U67 tag, keep REC and the timecode.
  - Reduced motion: no pulse, timecode stays at 00:00:00:00.
- Glass chip on the photo, bottom-left: a 34px gold play circle plus "Hear the Gospel Choir". Clicking it selects the Gospel tab in Listen, scrolls there and starts the demo with sound.
- Caption under the photo, 13px `muted`: "The Gospel Choir, in session. Every voice in I AM CHOIR was recorded with real singers who were paid and share in royalties."
- Motion: the photo scales 1.05 → 1 over 2.4s, and the text stack rises in a stagger. No text ever sits on top of faces.

### Proof by the numbers (new, directly under the hero)
- Centered. Top border teal @ 18%. Padding `clamp(56px,7vw,104px)` top, `clamp(48px,6vw,88px)` bottom. Background: vertical gradient transparent → #0A2C2D @ 55% at 45% → transparent.
- Eyebrow "WHY IT SOUNDS DIFFERENT". Headline in Barlow 900 uppercase `clamp(34px,4.2vw,64px)`, line height .92, max 22ch: "NOT A STACK OF SINGLE VOICES." then a second line in `Serif Accent` `teal-hi`: "A real choir, recorded together in one room."
- A 3×2 grid (phone 2×3), max 1080, radius 24, 1px teal @ 18% lines between cells (use a teal fill behind a 1px gap). Cells: fill #060C0D @ 92%, padding 36/28, hover fill #0C2829. Number in Barlow 900 `clamp(48px,5vw,76px)` gold, tabular. Caption Inter 15px `text-2`, max 26ch:
  - **3** · years of research and development before launch
  - **100s** · of beta testers shaped it before release
  - **33** · credited singers, paid and sharing royalties
  - **3** · real choirs: Gospel, MUSYCA Children's Choir and Shout
  - **0** · cloud uploads, credits or tokens. It all runs on your Mac
  - **$199** · once. Yours forever, no subscription
- Count-up: the 3, 33, 3 and 0 cells count from 0 over 1.1s (ease out) the first time the cell is 60% in view. Skip with reduced motion.
- Press row under the grid: Label "AS COVERED BY", then links in Inter 600 14px with a teal @ 45% underline, opening in a new tab: [Sound On Sound](https://www.soundonsound.com/news/am-audio-launch-am-choir) · [Sonicstate](https://sonicstate.com/news/2026/08/10/an-instant-choir-to-sing-your-song) · [AltWire](https://altwire.net/i-am-choir/) · [Monthly Mixing (Korea)](https://mixing.co.kr/42603) · [Musiques.live](https://www.musiques.live/2026/08/10/am-i-audio-releases-i-am-choir-choir-plugin-that-sings-your-lyrics-and-melody-3/)
- Sources for the numbers: 3 years and hundreds of beta testers come from [AltWire](https://altwire.net/i-am-choir/). Three choirs recorded in one room, local processing and no credits come from the launch coverage on [Musiques.live](https://www.musiques.live/2026/08/10/am-i-audio-releases-i-am-choir-choir-plugin-that-sings-your-lyrics-and-melody-3/). 33 singers is the credited roster (10 + 11 + 12). Do not add sales, user or stream numbers here until AM I AUDIO supplies real totals.

### Credits marquee
- Top and bottom border `line`, padding 54/60
- Eyebrow centered in `muted`: "PRAISED BY THE PRODUCERS BEHIND"
- Framer **Ticker** component, speed ~40, fade edges 10%. Items in Barlow 700 34px uppercase #6E707F, with a 6px teal diamond between: Blink-182, My Chemical Romance, Aerosmith, Halsey, Lizzo, Papa Roach, Machine Gun Kelly, Three Days Grace, 5 Seconds of Summer, Van Halen, Kelly Clarkson, The Cranberries, Bring Me The Horizon, Hoobastank

### Inside the sessions (new, after the marquee)
- Background: teal radial glow at 85% / 20% (22%) over a gradient #071415 → `bg`.
- Head (max 760): Eyebrow "INSIDE THE SESSIONS", Display "BUILT IN THE STUDIO." / "NOT IN A LAB." (line 2 `teal-hi`), Body: "AM I AUDIO is a team of producers, engineers and ML researchers. Every choir model was captured in real recording sessions with credited singers, then built to run inside the DAW you already use."
- Photo mosaic: one large tile `in-daw.webp` (I AM CHOIR in a real Ableton Live session) and two stacked tiles `in-gang.webp` and `in-kids.webp`. Radius 22, captions as a small glass label in the corner: "IN THE DAW / I AM CHOIR running in a real Ableton Live session", "GANG VOCALS / The Shout session, tracked live in the room", "MUSYCA CHILDREN'S CHOIR / Eleven voices, every one credited". Phone: one column.
- Proof strip under the mosaic: 4 cells (phone 2×2), radius 18, border teal @ 18%, teal-to-transparent gradient. Value in Barlow 800 30px, label in Label style: **3 YEARS** in development · **NEUTONE** engineering partner · **100% LOCAL** processing on your machine · **MACOS 12+** VST3 · AU · AAX.

### Liner notes (new)
- Background: a faint `lamp` glow at 85% / 30% (8%) over #07100F → `bg`.
- Two columns (0.9fr / 1.4fr, stacks under 1000px). Left: Eyebrow "LINER NOTES", Display "THE ROOM. THE PEOPLE." with a third line "The gear." in `Serif Accent` gold. Body: "Every great record has a credits page. This is ours. Real singers, real directors and the microphones you would book for a session that matters."
- Right: the **sleeve card**: fill `sleeve`, radius 20, padding 48, rotated −0.6° (0° on tablet and phone), deep shadow `0 50 100 -40 rgba(0,0,0,.85)`, with a paper-grain overlay (noise at 35%). Three columns (one on phone). Column headers in JetBrains Mono 11px uppercase #1D7F7F with a hairline below. Each entry: `Liner Name` in #14151A, then Inter 14px #4A4B55.
  - **Choirs:** Gospel Choir · Mixed voices, E2 to G5. Directed by Erica Howard. / MUSYCA Children's Choir · Bright, light voices, G#2 to G5. / Shout · All-male gang vocals for chants and refrains, E2 to G5.
  - **Microphones:** U67 and C12/C24 · On every choir. / Schoeps · On Gospel and Shout. / Telefunken · On the Children's Choir.
  - **Made by:** Yung Spielburg · Grammy-winning producer and songwriter. / Colin Brittain · Drummer, Linkin Park. / Vincent Ernst · Magnolia Park. / Engineered with · Neutone, Inc.
  - Footer line across all columns, Instrument Serif italic 20px: "33 credited singers. Every voice contributed knowingly. Every singer paid, and sharing in royalties."
- Ranges and mic models come from the launch announcement ([Musiques.live](https://www.musiques.live/2026/08/10/am-i-audio-releases-i-am-choir-choir-plugin-that-sings-your-lyrics-and-melody-3/)).

### 01 Listen
- Background: `bg` + a radial teal glow at 14%, 80% / 40%
- Head: Eyebrow "01 / LISTEN", Display "BEFORE. AFTER. / SAME SONG.", Body "One dry vocal goes in. Pick a choir, hit Create Vocals, and drag the result back onto your timeline."
- Grid: left column 360px of 3 Choir Tabs (Gospel Choir · 10 voices / Children's Choir · 11 voices · MUSYCA / Gang Vocals · 12 voices · Shout). The right column is the "stage" card (radius 28, gradient #12131A → #0A0B0E, 1px gradient border teal → transparent → gold).
- Stage: a phone frame (9:16, width 300, radius 26, 8px #15161C ring) holding a **Video** component (gospel.mp4 / kids.mp4 / gang.mp4, poster images supplied). Next to it, a readout list: MODEL / BEST FOR / INPUT / VOICES rows with `line` dividers, plus a 24-bar teal meter.
- Interaction: make the tabs a component with variants and use **Variants + Interactions** to swap the video source. The simplest way is one stage variant per choir. Big gold 76px play button centered. Unmute on play.
- **Voice chips (new):** under the readout, a row of small pills with the selected choir's singer first names (the same names as the Meet the choirs roster), a label "Press play to bring the choir in" and a counter "0 / 10". While the video plays, chips light up one at a time (teal fill, white text) across the first 60% of the clip, and the label changes to "[Name] joined". Switching tabs resets them.

### How it feels (new, light section, between Listen and Difference)
- White theme (`light-bg`). Head (max 760): Eyebrow "HOW IT FEELS", Display "FOUR MOMENTS" / "YOU'LL WANT AGAIN." with a gold highlighter band behind line 2 (gold @ 55% from 62% to 90% of the line height). Body: "Making records is a feeling game. Here is what a session with I AM CHOIR is built to give you."
- Four cards (2×2 on tablet, 1 column on phone): white, radius 24, padding 22/22/28, soft shadow. Hover: y −6, rotate −0.4°, teal shadow. Each card holds its illustration (3:2, radius 16, fill #FBFAF6), a mono key in `light-teal`, a Barlow 800 30px title and Inter 15px body:
  - `01-goosebumps.svg` · 01 · FIRST LISTEN · **The goosebumps** · Your solo vocal opens up into a full room of real singers, still singing your words.
  - `02-the-lift.svg` · 02 · THE DROP · **The lift** · The last chorus finally hits a level up. The part you always heard in your head is right there.
  - `03-room-sings-back.svg` · 03 · PLAYBACK · **The room sings back** · Ten Gospel voices, eleven kids, twelve shouters. Real people you can credit on the record.
  - `04-all-yours.svg` · 04 · AFTER · **It's all yours** · Buy once and keep it. No credits, no tokens, nothing running out mid-session.
- Motion: on the live site the strokes draw themselves in (1.3s) when a card is 35% in view, the color blobs pop in, and the heart in card 4 beats on hover. In Framer, import the SVGs as images and use an Appear effect (scale .96 → 1, opacity 0 → 1); for the self-drawing effect, paste the inline SVG from the source HTML into an Embed.

### 02 Difference
- Display XL-ish manifesto (116px): "CHOIR LIBRARIES GIVE YOU VOWELS. / I AM CHOIR SINGS YOUR SONG." (line 2 gold, max 17ch)
- Four-column pillar row with a top border and vertical dividers. Each pillar: gold Label (WORDS / TIMING / PRIVATE / YOURS), Inter 600 20px title, Body.
  - It sings your lyrics: "Your words, your melody, your phrasing. Not an "ahh" pad you have to bend around the track."
  - It lands on your grid: "The performance follows the timing of your vocal, so it drops straight onto the track."
  - It stays on your machine: "Audio processing happens locally. Your sessions never leave your computer."
  - It's yours for good: "Buy once, own it forever. No subscriptions. No tokens. No credits to run out of."

### 03 Workflow
- Two columns. Left: Eyebrow, Display "THREE MOVES. / STRAIGHT TO YOUR TIMELINE.", then 3 step rows (number in gold mono, H3, Body). Inactive rows sit at 45% opacity.
- Right: a stacked UI screenshot (`ui-1/2/3.webp`, 360w, radius 18, deep shadow) over a teal blurred glow
- Interaction: build it as a component with 3 variants. Auto-advance every 3.8s ("After delay" interaction), hover on a step jumps to that variant. Crossfade plus 24px rise.
  1. Drop in a dry vocal: "Import a solo vocal up to 45 seconds with Browse Files or drag and drop."
  2. Choose the choir and the mic: "Gospel, Children's or Gang Vocals. Add octaves, thirds and fifths in key."
  3. Create Vocals. Drag to your DAW.: "Audition the takes, shape them with Post FX, then drag the audio straight onto a track."

### 04 Meet the choirs (full-bleed)
- Height `max(760px, 100vh)`. Full-bleed photo with a crossfade between `choir-gospel-2.webp` (color gospel session), `choir-kids.webp` (MUSYCA), and `choir-gang.webp`
- Overlay: a 0° gradient, `bg` 98% → 80% at 34% → 25% at 70% → 55% at top
- Content bottom-left: Eyebrow, Display "REAL PEOPLE. / REAL ROOMS.", Body "Every model was recorded in session with singers who chose to be part of it, and who are credited by name."
- A three-column roster (tabs). The active one gets a 2px gold top border. Title in Barlow 700 26px, names in Inter 14px `muted`:
  - Gospel Choir: Amenda, Jarred, London, Jarren, Dani, Obi, Caleb, Erica, Aaron, Katie
  - MUSYCA Children's Choir: Michelle, Sadie, Jacqueline, Lor, Emilie, Mikhail, Keria, Natalie, Anya, Dalia, Maya
  - Gang Vocals: Nick, Taylor, Alejandro, Marino, Adam, Ruben, Nate, Tony, Eric, Daniel, Hunter, Michael

### 05 In the room (producers)
- Head row: Eyebrow "05 / IN THE ROOM", Display "THE PEOPLE WHO MAKE / THE RECORDS YOU KNOW.", and ← → circular arrow buttons on the right
- Framer **Slideshow** or a horizontal scroll Stack (gap 22, snap). It should bleed off the right edge of the page.
- Cards in order: Zakk Cervini, Mike Plotnikoff, Howard Benson (photo variant), Lil Aaron, Tony Rodini (text variant). Copy is in the Lovable pack and the source HTML.

### 06 Ethics (full-bleed)
- Background `choir-kids-bw.webp` in grayscale at 70% brightness. Gradient 90° `bg` 96% → 78% at 55% → 55%, plus top and bottom fades.
- Eyebrow "06 / HOW IT WAS MADE", Display XL "MADE WITH SINGERS. / NOT INSTEAD OF THEM." (line 2 gold)
- Two body columns (max 900):
  - "Every voice in I AM CHOIR was contributed knowingly and with consent. The singers were paid for their work, and they share in the success of the tool through a royalty."
  - "Nothing replaces humans singing together in a room. This is an expansion of what's possible: a gospel lift, a kids' choir hook or a terrace-sized gang vocal, for producers who couldn't book one before."
- Facts row: CONSENTED / PAID / ROYALTIES (Barlow 800 34px gold) with captions

### 07 Own it (pricing)
- Two columns: copy on the left (Eyebrow, Display "ONE LICENSE. / EVERY CHOIR. FOREVER.", Body "Try the full plugin for 14 days. No credit card. If it earns a spot in your template, buy it once and keep it.")
- Right: a ticket card (460w, radius 28, gradient #14151C → #0A0B0E, 1px gradient border gold → teal). Inside: gold wordmark + "PERPETUAL LICENSE" teal pill. Price "$199" in Barlow 800 112px with "ONE TIME" mono label. A 5-item checklist with gold check marks. Full-width Gold and Ghost buttons. Fine print: "macOS 12+ · VST3 · AU · AAX. Windows is in beta. Join the Windows beta." linked to `/beta`.

### 08 Specs
A grid of 4 Spec Cells (Operating system / Formats / Input / Licensing) plus a full-width row of DAW chips (pill, border `line-2`): Ableton Live 11 & 12, Pro Tools 12+, Logic Pro 10+, Bitwig Studio 5, Studio One 6+, Cubase 13, Reaper 7.

### 09 Team (light section)
- White background. Eyebrow "09 / BUILT BY PRODUCERS", Display "MADE BY PEOPLE WHO" / "LOVE A BIG CHORUS." with a hand-drawn gold underline under line 2 that draws in on scroll. Body: "We are producers, engineers and researchers who kept chasing the same feeling: the moment a whole room sings your song back. I AM CHOIR is how we share it."
- **Polaroid row:** 4 cream frames (#F4F1EA, padding 12/12/16, radius 6, deep shadow), rotated −3°, 2°, −1.5° and 3° with small vertical offsets. Hover: rotate 0, y −10, scale 1.03, teal shadow. Square photo, then a Barlow 700 17px caption and an Inter 13px sub: `snap-gospel.webp` GOSPEL SESSION / All smiles after the take · `snap-kids.webp` MUSYCA CHILDREN'S CHOIR / Eleven voices, one room · `snap-gang.webp` GANG VOCALS SESSION / Between takes · `snap-gospel-bw.webp` GOSPEL CHOIR / The crew.
- A three-column typographic grid below: name (H3), role (Label in `light-teal`), one bio line (Inter 14px). Bottom border on each. On hover, a tiny 3-bar teal level meter next to the name bounces.
- Bios, exactly as published:
  - **Yung Spielburg** · Founder / CEO · Grammy-winning producer and songwriter. Longtime MIYAVI collaborator and composer of the All-In and Acquired podcast themes. Research lead at Water & Music.
  - **Colin Brittain** · Founder · Linkin Park drummer, and co-writer and co-producer of From Zero, nominated for two 2026 Grammys. Producer and writer for Papa Roach, One OK Rock, All Time Low and 5 Seconds of Summer.
  - **Vincent Ernst** · Founder · Keys and bass in Epitaph's Magnolia Park. Producer and songwriter with 150 credits, and the one who brought the first idea that became I AM CHOIR.
  - **Cameron Olson** · Lead ML Research Engineer · Leads the AI research behind I AM CHOIR. Former Berklee assistant professor, AI Song Competition 2025 finalist and jazz drummer.
  - **Kejie Li** · ML Research Engineer · Berklee Electronic Production and Design grad who blends machine learning with classic DSP in C++ and JUCE. Helped build and ship I AM CHOIR.
  - **Zack Zukowski** · ML Research Engineer · ML researcher at Stability AI. Co-founder of Dadabots.
  - **Ryan Schwabe** · Advisor · Grammy-winning engineer. Founder of Schwabe Digital.
  - **Andrew Goldstein** · Advisor · Multi-billion-stream producer, songwriter and artist.
  - **Nick Merich** · Founding Advisor, Head of Growth · Co-founded Songlink, acquired by Linktree. Led growth at Kits AI, acquired by Splice. Runs the I AM CHOIR creator program.
- Keep "I AM CHOIR" on one line in the bios (non-breaking spaces).
- Neutone row: "ENGINEERED IN COLLABORATION WITH" / "NEUTONE, INC." (Barlow 800 34) / "With thanks to Andrew Fyfe, Matthias Schäfer, Naotake Masuda, Alfie Bradic and Nao Tokui."

### 10 Creator playbook (new)
- Head row: Eyebrow "10 / CREATOR PLAYBOOK", Display "STEAL THE SYSTEMS / BEHIND THE WINS." (line 2 gold), and a lede. On the right, the Gold button "Download the full playbook", linked to the uploaded zip.
- Grid of 10 **Workflow Cards**, 3 columns with a 20 gap. Cards 1 and 10 span 2 columns on desktop. Show 5 at first, with a Ghost "Show all 10 workflows" button. Tablet uses 2 columns (show 4); phone uses 1 column (show 3).
- Workflow Card: radius 22, gradient #121319 → #0C0D11, border `line`, hover border gold @ 35% and y −3. From the top: a tag pill (teal outline) and number, the title in Barlow 800 30px, then **The win** block (2px gold left border, gold 4% fill: a quote with the producer's name in gold Barlow and their credits). For cards without a quote, use a demo link with a gold play dot. Next come Settings rows (Choir / Mic / Layers, with mono labels at 70px) and a **The system** accordion holding numbered steps in gold mono. A teal mono "Download workflow .md" link sits at the bottom.
- Below the grid, a **Skills panel** (radius 28, teal and gold radial glows) with intro copy and 3 skill cards: a gold "SKILL.md" badge, title, description, and download link.
- All copy and files are in `/playbook/` in the source zip. Upload the .md files and the zip to Framer's asset manager or a CDN, and point the links at them.

### 11 FAQ (expanded to 23 answers, light section)
White-to-cream gradient background, with a small hand-drawn speech-bubble doodle next to the title. Two columns. On the left, a sticky stack: Eyebrow "11 / FAQ", Display "BEFORE YOU / HIT CREATE.", a lede, and a gold link to the playbook. On the right, category pill tabs (Getting started 6 · Licensing 4 · Better results 6 · Import and export 4 · Buying and rights 3). The active tab is filled gold. Each tab shows its own set of accordions. Build it as a component with 5 variants. All answers come from the official FAQ doc and are in the source HTML.

### Final CTA
- Full-bleed photo `final-kids-teal.webp` (MUSYCA Children's Choir with a teal grade) as the background, with a dark teal center scrim (radial #041011 @ 82% → 35%) and top and bottom fades into `bg`.
- A handful of music notes (♪ ♫ ♩) float slowly upward behind the text at low opacity.
- Centered Hero-style title "PUT A CHOIR / ON THE CHORUS." (Barlow 900, `clamp(56px,9vw,150px)`), then the line "Go make the part everyone sings back." (Inter 500 `clamp(18px,1.6vw,22px)`, #E6F3F2), the two buttons, and the meta line "No credit card • macOS 12+ • Own it forever" in #C9D3D3.

### Footer
`#040405`. Brand plus tagline "Real choirs. Real AI. Built by producers for producers." Instagram and YouTube links. Three link columns: Product / Support / Company.

### Mobile dock (phone only)
A fixed bottom pill: "I AM CHOIR **$199**" + Gold Small "Free trial". It appears after you scroll past the hero.

---

## 4. Global effects
- **Film grain:** a fixed full-screen overlay above everything. Use a 160px noise PNG at 7% opacity, blend Overlay, with pointer events off. This plus the warm `lamp` glows is most of the "real studio" feel, so don't skip it.
- **Section order on the live site:** Hero → Proof by the numbers → Credits marquee → Inside the sessions → Liner notes → 01 Listen → How it feels → 02 Difference → 03 Workflow → 04 Meet the choirs → 05 In the room → 06 Ethics → 07 Own it → 08 Specs → 09 Team → 10 Creator playbook → 11 FAQ → Final CTA → Footer.
- **Rhythm:** dark and light sections alternate in the back half (How it feels, Team and FAQ are white). Keep the hero, numbers, studio, liner notes and pricing dark.
- **Appear effects:** every section head, card, and grid uses "Appear" (opacity 0 → 1, y 28 → 0, 0.9s, ease `[.2,.7,.1,1]`), triggered when the layer is 12% in view, and only once.
- Respect "Reduce motion" (Framer handles this when you use Appear effects).

## 5. Custom code to keep (Site Settings → Custom Code)
- **Session timecode** (code component or page-level script). It needs an element with id `tc`:

```js
(() => {
  const tc = document.getElementById('tc'); if (!tc) return;
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const t0 = performance.now(), p = n => String(n).padStart(2, '0');
  const tick = () => { const ms = performance.now() - t0, s = Math.floor(ms / 1000);
    tc.textContent = `${p(Math.floor(s / 3600))}:${p(Math.floor(s / 60) % 60)}:${p(s % 60)}:${p(Math.floor(ms / 1000 * 30) % 30)}`;
    requestAnimationFrame(tick); };
  requestAnimationFrame(tick);
})();
```
- GA4 `G-4ZEY8WGG1P` (already present)
- Meta Pixel base code (already present)
- **Reseller-source propagation script:** reapply it so the `source` and `promo` URL params are appended to every `shop.amiaudio.io` link. Test with a creator link like `?source=YOURSOURCE&promo=YOURCODE10` and confirm the cart shows the discount.

## 6. SEO
- Title: `I AM CHOIR · Turn one vocal into a choir | AM I AUDIO`
- Description: `I AM CHOIR turns a recorded vocal into a full choir performance that follows your words, melody and timing, inside your DAW. Built with real singers who were paid and share in royalties. 14-day free trial.`
- OG image: keep the cinematic plugin render