# Hyperframes Composition Brief: yawrn.studio

## Objective
Create a short launch-style brag video for yawrn.studio, Josh's AI website builder.

## Output
- Composition directory: `brag-output/composition/`
- Rendered video: `brag-output/brag.mp4`
- Format: landscape — 1920x1080
- Duration: 22 seconds

## Source Material
- Project root: `/root/yawrn-studio-dev` (dev checkout, v1.11.2)
- Primary files read: `public/home.html`, `public/ui.css`, `public/new/new.js` + `new.css` (knitting spinner), `public/editor/index.html` (topbar), `public/dashboard/index.html`, `public/favicon.svg`, `README.md`, `package.json`
- Product name: yawrn.studio
- Tagline / strongest claim: "Describe it. It builds the site." · page title "websites that build themselves"
- Key UI or visual moment to recreate: the knitting build line ("Casting on…" → "Bound off — your site is ready.") and the editor canvas assembling a site, then the home page's domain card and analytics card
- Copy that must appear verbatim:
  - Describe it. / It builds the site.
  - Casting on… · Winding the skein… · Knitting the hero… · Purling a few rows…
  - Bound off — your site is ready.
  - Then drag anything you want to change and publish in a click.
  - Preview · Analytics · Publish (editor topbar)
  - ● Live · HTTPS · Let's Encrypt · auto-renews · /sitemap.xml
  - Publish on your own domain in a minute.
  - 1.8k Visitors · 54s Time on site · 5.0% Converted · Hero 9s · Pricing 14s · Testimonials 4s · Contact form 21s
  - Analytics that show what people actually read. · No cookies, no consent banner.
  - yawrn.studio · websites that build themselves · AI site builder · Figma import · Analytics · Free to start.

## Creative Direction
- Tone preset: polished
- Creative direction: a quiet premium product film with one wink — the AI literally knits the site.
- Interpretation: restrained Inter typography, slow crossfades, generous holds; energy from beat-aligned sequential section reveals and a simulated drag + click, never from flashing copy. The knitting copy is the only joke and is delivered straight.
- Angle: a typed brief goes in, a site is knitted section by section, then dragged, published to its own domain and measured. Every word and UI element on screen is the product's own.
- Hook: "Describe it." then a brief types itself into the interview start box; "It builds the site." lands in gradient text.
- Outro / punchline: the gradient logo mark + "yawrn.studio", then "websites that build themselves", then "AI site builder · Figma import · Analytics" / "Free to start."
- Avoid:
  - Generic SaaS language
  - Abstract filler visuals
  - Unrelated visual redesign (keep the studio's own dark indigo palette; the example site inside the canvas may be cream/brown)
  - Any real customer domain, IP address, email or key on screen

## Visual Identity
- Background: `#0e0e12`; panels `#15151b` / `#1c1c24` / `#24242e`; borders `#2a2a36`
- Text: `#ececf1`; muted `#b4b4c2`, `#7c7c8e`
- Accent: `#6366f1`, `#818cf8`; soft `rgba(99,102,241,.16)`; ok green `#34d399`
- Gradients: headline `linear-gradient(90deg,#a5b4fc,#c084fc,#67e8f9)` as text; logo mark `linear-gradient(135deg,#6366f1,#c084fc)` on a rounded square with a white chevron (see `public/favicon.svg`); primary button `linear-gradient(180deg,#6b6ef5,#6366f1)` with indigo glow
- Display font: Inter 700 (ship locally with @font-face; fall back to a shipped system-like sans if Inter cannot be obtained)
- Body font: Inter 400/500; JetBrains Mono 500 for the knitting line and KPI numbers
- Visual references from the project: `body.fx` backdrop (26px dot grid masked from the top, three blurred gradient orbs indigo/purple/cyan, light grain); `.yarn` card (mono, 1px border, 10px radius, yarn ball + five 3px stitching bars + verb + clock); editor topbar (segments, "Saved", Preview/Analytics/Publish); `.shot` cards (KPI tiles with mono numbers, 8px gradient bars)

## Storyboard
Use the storyboard in `brag-output/brag-plan.md` as the creative contract.

Scene summary:
1. Describe it — 4.0s — headline, typed brief, gradient second line
2. Knitting — 4.75s — the yarn build card cycling verbs, clock, turns green "Bound off — your site is ready."
3. The site, in the editor — 4.35s — editor chrome; Northwind Coffee page stacks in on the beat; cursor drags a section; clicks Publish
4. Live — 3.4s — domain card: northwind.coffee · ● Live · HTTPS, then DNS / Certificate / Sitemap rows
5. What people actually read — 3.3s — KPI count-up, section bars fill on the beat
6. yawrn.studio — 2.2s — logo lockup, tagline, eyebrow, "Free to start."

## Audio
- Audio role: warm, steady bed with sparse professional accents
- Audio arc: low bed enters with the typing, breathes under the knitting card, lifts as the site stacks in, two soft impacts (Live, logo), fades under the final line
- Music: `assets/music/happy-beats-business-moves-vol-12-by-ende-dot-app.mp3`
- Music treatment: volume ~0.32, start at 0s, fade out over the last 1.2s
- Music cue guidance: bundled preset `/root/.claude/plugins/cache/brag/brag/0.4.0/skills/brag/assets/music/cues/happy-beats-business-moves-vol-12-by-ende-dot-app.music-cues.{md,json}`, 109.96 BPM. Strong cues: 8.74s (site reveal), 13.11s (Live card), 18.56s (optional). Beat grid for section stack: 9.29 / 9.83 / 10.37 / 10.93. Beat grid for analytics bars: 15.29 / 15.84 / 16.38 / 16.93 (bars only; labels already visible).
- Audio-reactive treatment: subtle; backdrop orb glow and knitting-card border presence breathe with RMS/bass. No waveforms or equalizers.
- Audio-coupled moments:
  - Scene 1 typing — randomized keypress ticks on roughly every second character, low volume; one soft drop on the gradient line
  - Scene 3 section stack — quiet drop per section, first and last loudest; one click on Publish
  - Scene 4 Live — one soft impact on the strong cue
  - Scene 6 logo — one soft bell, allowed to ring over the fade
- SFX selection guidance: low high-frequency-risk picks (`impact/impactSoft_medium_*`, `interface/drop_*`, `interface/click_00x`, `keyboard/keypress-*`, `impact/impactBell_heavy_000` once)
- SFX analysis guidance: `/root/.claude/plugins/cache/brag/brag/0.4.0/skills/brag/assets/sfx/sfx-analysis.md`
- Exact SFX choice: Hyperframes chooses filenames, timestamps, density, and volume from the implemented animation.
- Audio files: copy the chosen music and selected SFX into `brag-output/composition/assets/`

## Hyperframes Instructions
Load `hyperframes-core`, `hyperframes-animation`, `hyperframes-creative`, `hyperframes-keyframes`, `hyperframes-cli`. /brag is its own workflow: do not enter the `hyperframes` entry-point interview or the generic promo workflow. Prefer native Hyperframes conventions.

Requirements:
- Show at least one real UI, copy, or visual element from the source project (the knitting card, editor topbar, domain and analytics cards).
- Keep all text readable: short labels ≥0.8s settled, sentences ≥0.3s/word.
- Keep the video at 22 seconds (within 15–25).
- Include the music/SFX layer as planned.
- Treat cue metadata as optional timing hints; readability and story first. Lock 1–3 major reveals within ±0.15s of strong cues, sequential accents within ±0.10s of beats.
- Honor the music fade under the logo and let the final bell ring over it.
- Use local assets only; no network fonts or runtimes at render time.
- Run `npx hyperframes check` before render; render locally only.