Add DBSMO brag video

Author: Edwin Chan

brag-output/brag-plan.md

@@ -0,0 +1,93 @@
+# Brag Plan: DBSMO Training Platform
+
+## What is this app?
+DBSMO Training Platform is a self-paced Diocesan Boys' School mathematics olympiad training app with problem sets, automatic grading, progress tracking, practice mode, class assignments, writeups, feedback, and teacher analytics.
+
+## The angle
+Treat a school math practice platform like a 2016 startup that just announced a fictional Series A. The comedy is not loud; it is the straight-faced investor language applied to a very specific product: answer-only olympiad sets, KaTeX previews, streak feedback, and cohort analytics.
+
+## Hook (first 2-3 seconds)
+"DBS math olympiad training has entered its Series A era." Full-screen announcement copy lands like a funding press release.
+
+## Key moments (the middle)
+- The real sign-in/product copy: "sign in to proceed." and "Diocesan Boys' School math olympiad training."
+- Practice mode choosing a category, typing `5sqrt(2)-7`, and seeing a rendered math preview.
+- The correctness result: "Correct. Streak 3."
+- Teacher-style metrics: attempted sets, best average, latest score, open reports, topic accuracy, and cohort snapshot.
+
+## Outro / punchline
+"DBSMO Training Platform. Fictional funding. Actual grading."
+
+## User flow worth showing
+Student signs in -> chooses a practice category -> enters an answer with live math preview -> receives correctness/streak feedback -> teacher sees cohort progress.
+
+## Tone
+- Preset: yc-parody
+- Creative direction: fake Series A launch from 2016
+- Interpretation: Structured, serious, metric-forward, and deliberately over-legitimate. Use startup deck language, restrained motion, hard cuts, and clean 2016 SaaS polish.
+
+## Format: landscape - 1920x1080
+## Duration: 21s
+
+## Visual identity (from the project)
+- Background: #f2f2f7
+- Accent: #33aaff, #ff66aa, #8866cc
+- Text: #222233
+- Display font: Inter
+- Body font: Inter
+- Strongest visual element: dashboard progress ring, metric cards, practice answer preview, and topic meter bars.
+
+## Share copy (draft)
+We built DBSMO Training Platform to solve the overlooked problem of olympiad practice not having enough dashboards. Fictional Series A, actual grading.
+
+## Audio direction
+- Role: restrained business bed with dry UI accents
+- Music: happy-beats-business-moves-vol-11-by-ende-dot-app.mp3
+- Music treatment: low-volume corporate bed, 0.18-0.22 volume, clean fade at the end.
+- Music cue guidance: bundled preset at `assets/music/cues/happy-beats-business-moves-vol-11-by-ende-dot-app.music-cues.json`, tempo about 114.84 BPM. Major reveal cues near 1.60s, 8.96s, 17.91s. Sequential UI/stat reveals can use the beat grid around 12.65s, 13.70s, and 14.76s.
+- Audio-reactive treatment: subtle; allow only very slight card glow/presence shifts. No waveform or equalizer visuals.
+- SFX posture: sparse; 4-6 quiet cues total.
+- Audio-coupled moments: hook impact, category selection click, answer submit/correct ding, dashboard card sequence, final logo hit.
+- Restraint rule: no meme soundboard, no hype trailer booms, no rushed text.
+
+## Storyboard
+
+### Scene 1 - Funding Announcement - 3s
+Full-screen press-release card. Text: "DBS math olympiad training has entered its Series A era." Secondary: "$0 fictional capital deployed."
+Sequential/interaction: none.
+Audio intent: dry investor-deck seriousness.
+Audio-coupled idea: hook reveal lands near the 1.60s strong cue.
+Music: low corporate bed.
+Transition mood: hard cut -> Scene 2
+
+### Scene 2 - The Actual Product - 4s
+Recreate the landing/login language and brand mark. Text must include "sign in to proceed." and "Diocesan Boys' School math olympiad training." Then show "training dashboard" sliding in behind it.
+Sequential/interaction: yes - login card, dashboard shell, and continue button arrive one by one.
+Audio intent: clean UI reveal.
+Audio-coupled idea: simulated UI click.
+Transition mood: clean hard cut -> Scene 3
+
+### Scene 3 - Practice Flow - 5s
+Recreate Practice mode: "Choose your focus", category chips, a problem card, typed answer `5sqrt(2)-7`, rendered preview `5√2 - 7`, and "Correct. Streak 3."
+Sequential/interaction: yes - category selection, answer typing, submit, correctness feedback.
+Audio intent: product demo with restrained taps.
+Audio-coupled idea: click/submit and correct ding.
+Transition mood: hard cut -> Scene 4
+
+### Scene 4 - Metrics Slide - 5s
+Recreate dashboard/teacher analytics: metric cards "Attempted 18/24", "Best average 87%", "Latest score 100%", "Open reports 2"; topic bars for Geometry, Number Theory, Algebra; and a small "cohort snapshot" table.
+Sequential/interaction: yes - four cards reveal on beat-grid timestamps, then topic bars fill.
+Audio intent: understated traction slide.
+Audio-coupled idea: card-by-card sequence around the beat grid.
+Transition mood: minimal crossfade -> Scene 5
+
+### Scene 5 - Outro - 4s
+Final logo/wordmark. Text: "DBSMO Training Platform" and "Fictional funding. Actual grading." Small footer: "v0.67.0".
+Sequential/interaction: none.
+Audio intent: final dry payoff.
+Audio-coupled idea: logo hit near the 17.91s strong cue.
+Music: fades out by 21s.
+Transition mood: cut to end.
+
+**Music mood for this video:** parody business bed.
+**Audio summary:** A tasteful 2016 SaaS backing track with sparse UI cues, played completely straight.

brag-output/brag.jpg

@@ -0,0 +1,81 @@
+# Hyperframes Composition Brief: DBSMO Training Platform
+
+## Objective
+Create a short launch-style brag video for DBSMO Training Platform.
+
+## Output
+- Composition directory: `brag-output/composition/`
+- Rendered video: `brag-output/brag.mp4`
+- Format: landscape - 1920x1080
+- Duration: 21 seconds
+
+## Source Material
+- Project root: `/Users/cosmic/Documents/funni/dbsmo`
+- Primary files read: `README.md`, `package.json`, `app/page.tsx`, `app/layout.tsx`, `app/dashboard/page.tsx`, `app/practice/page.tsx`, `app/problem-sets/[slug]/page.tsx`, `app/globals.css`, `DBSMO/Projects/dbsmo/Overview.md`, `DBSMO/Projects/dbsmo/Architecture.md`, `DBSMO/Projects/dbsmo/Entry Points.md`
+- Product name: DBSMO Training Platform
+- Tagline / strongest claim: "Self-paced mathematics olympiad training platform for DBS."
+- Key UI or visual moment to recreate: practice category selection, live rendered answer preview, correctness/streak feedback, and dashboard/analytics cards.
+- Copy that must appear verbatim:
+  - "sign in to proceed."
+  - "Diocesan Boys' School math olympiad training."
+  - "training dashboard"
+  - "Practice"
+  - "Choose your focus"
+  - "Correct. Streak 3."
+  - "cohort snapshot"
+
+## Creative Direction
+- Tone preset: yc-parody
+- Creative direction: fake Series A launch from 2016
+- Interpretation: Serious startup launch language, restrained motion, corporate deck composition, and dry metrics.
+- Angle: The platform is framed like a fictional 2016 startup funding announcement, but the product details are real: math practice, automatic grading, live math preview, dashboard progress, teacher analytics, and reports.
+- Hook: "DBS math olympiad training has entered its Series A era."
+- Outro / punchline: "Fictional funding. Actual grading."
+- Avoid:
+  - Generic SaaS language
+  - Abstract filler visuals
+  - Unrelated visual redesign
+
+## Visual Identity
+- Background: #f2f2f7
+- Text: #222233
+- Accent: #33aaff, #ff66aa, #8866cc
+- Display font: Inter
+- Body font: Inter
+- Visual references from the project: progress ring, metric cards, pill buttons, topbar, practice answer preview, topic meters, cohort table.
+
+## Storyboard
+Use the storyboard in `brag-output/brag-plan.md` as the creative contract.
+
+Scene summary:
+1. Funding Announcement - 3s - fake Series A claim and $0 fictional capital.
+2. The Actual Product - 4s - login copy and dashboard shell.
+3. Practice Flow - 5s - category select, typed answer, rendered math preview, correct/streak feedback.
+4. Metrics Slide - 5s - dashboard metric cards, topic bars, cohort snapshot.
+5. Outro - 4s - product name, punchline, version.
+
+## Audio
+- Audio role: sparse business bed with dry UI accents
+- Audio arc: music starts immediately, stays restrained, and fades under the final logo.
+- Music: `assets/music/happy-beats-business-moves-vol-11-by-ende-dot-app.mp3`
+- Music treatment: low volume around 0.2, no voiceover, clean end fade.
+- Music cue guidance: bundled preset at `assets/music/cues/happy-beats-business-moves-vol-11-by-ende-dot-app.music-cues.json`; use strong cues near 1.60s, 8.96s, and 17.91s only if readability survives.
+- Audio-reactive treatment: subtle CSS/JS variable modulation on soft glows if available; skip if extraction is unavailable.
+- Audio-coupled moments:
+  - Scene 1 hook - dry impact
+  - Scene 3 submit/correct - click then success bell
+  - Scene 4 cards - restrained sequential card sounds
+  - Scene 5 logo - final soft bell
+- SFX selection guidance: low-risk clicks and soft impacts, no dense sequence.
+- SFX analysis guidance: `/Users/cosmic/.codex/skills/brag/assets/sfx/sfx-analysis.md`
+- Exact SFX choice: Hyperframes should choose filenames, timestamps, density, and volume based on the implemented animation.
+- Audio files: copied into `brag-output/composition/assets/`.
+
+## Hyperframes Instructions
+Use the current Hyperframes CLI workflow. Requirements:
+- Show at least one real UI, copy, or visual element from the source project.
+- Keep all text readable in the final render.
+- Keep the video within 15-25 seconds.
+- Include the planned music/SFX layer.
+- Treat cue metadata as optional; product clarity wins.
+- Use SFX to support motion and interaction with restraint.

brag-output/brag.mp4

@@ -0,0 +1,9 @@
+# DBSMO Brag Design Notes
+
+- Tone: fake Series A launch from 2016, mapped to yc-parody.
+- Canvas: 1920x1080, 21 seconds.
+- Colors from source app: #f2f2f7 background, #ffffff cards, #222233 strong text, #444455 body text, #33aaff cyan, #ff66aa pink, #8866cc purple.
+- Typeface: Inter/system sans, matching the Next app.
+- Visuals: product UI recreation, not abstract motion. Use dashboard cards, practice form, answer preview, progress ring, topic bars, and cohort table.
+- Motion: serious deck pacing, hard cuts, restrained reveals, readable holds.
+- Audio: low corporate bed plus sparse clicks/soft impacts.