@amg555/frameforge-mcp 2.4.9 → 2.7.0

package/plugins/video-pipeline/skills/html-renderer/references/engine-api.md

@@ -0,0 +1,480 @@
+# Engine API — Full Function Reference
+
+Source: `reel/engine.js`  
+Load with: `import { reel, layer, at, stagger, seek, hash, ... } from './reel/engine.js';`
+
+---
+
+## Configuration
+
+### `reel({ width, height, fps, duration, title })`
+Sets global compositor dimensions and timeline length. Call **once** at the top of `edit.js`.  
+Sets `window.DURATION` and `window.FPS` — required by the render harness.
+
+```js
+reel({ width: 1920, height: 1080, fps: 30, duration: 65 });
+reel({ width: 1080, height: 1920, fps: 30, duration: 30 }); // portrait / reel
+```
+
+`REEL.captionY` — override caption baseline (px from top, default centre-bottom).
+
+---
+
+## Layer System
+
+### `layer(name, { start?, end? }) → Layer`
+Declare a named visual layer. Returns the same Layer if called twice with the same name.  
+`start` / `end` define the shot window in seconds (default: whole film).
+
+```js
+layer('hero', { start: 3, end: 12 }).on((t, lt, dur) => ({
+  opacity: lt < 0.4 ? lt / 0.4 : lt > dur - 0.4 ? (dur - lt) / 0.4 : 1,
+  transform: `translateY(${(1 - spring(lt)) * 60}px)`,
+}));
+```
+
+**Callback signature: `fn(t, lt, dur) → styleObject`**  
+- `t` — absolute video time (seconds)  
+- `lt` — local time within the shot (`t - start`)  
+- `dur` — shot duration (`end - start`)
+
+**Iron rule:** Every CSS property driven by this layer must be explicitly reset when the layer is inactive. If you return `{ opacity: 1 }` at `lt=5` but the next frame is `lt=6` where you return `null`, the browser keeps `opacity: 1`. Use:
+
+```js
+if (lt > dur) return { opacity: 0, display: 'none' };
+```
+
+---
+
+## Timed Element Placement
+
+### `at(t, element)`
+Mount a DOM element, made visible only while `t >= start` and `t < start + element._duration`.
+
+### `stagger(t, dt, elements[])`
+Place elements with staggered delays. Returns `[{t, element}]` timing log.
+
+```js
+stagger(2.0, 0.18, [card1, card2, card3]);
+// card1 appears at t=2.0, card2 at t=2.18, card3 at t=2.36
+```
+
+---
+
+## Math & Easing
+
+### `hash(i) → float [0, 1)`
+Deterministic sin-based hash of integer `i`. **Use instead of `Math.random()`.**
+
+```js
+const x = hash(particleIndex) * REEL.width;
+const wobble = hash(i + Math.floor(t * 12)); // boil at 12fps
+```
+
+### `hash2(i, j) → float [0, 1)`
+Two-dimensional hash for grid seeds: `hash(i * 1000 + j)`.
+
+### `lerp(t, a, b, t0?, t1?) → number`
+Linear interpolation from `a` to `b` over `[t0, t1]`, clamped.
+
+```js
+lerp(lt, 0, 100, 0, 0.5)  // 0→100 in first 0.5 s of shot
+```
+
+### `easeIn(t)`, `easeOut(t)`, `easeInOut(t)`
+Quadratic easing. Input `[0, 1]`, output `[0, 1]`.
+
+### `spring(t, { tension?, friction?, delay? }) → float`
+Closed-form damped harmonic oscillator. Returns `0 → ~1` (may briefly exceed 1 when underdamped).
+
+| Preset | tension | friction | Character |
+|--------|---------|----------|-----------|
+| Snappy | 280 | 28 | Fast settle, tiny overshoot |
+| Default | 200 | 22 | Natural entrance |
+| Bouncy | 160 | 13 | Visible overshoot |
+| Gentle | 100 | 20 | Slow, overdamped |
+
+```js
+const s = spring(lt, { tension: 200, friction: 22, delay: 0.2 });
+// opacity: s,  transform: `scale(${0.88 + 0.12 * s}) translateY(${(1-s)*40}px)`
+```
+
+### `measureSpring({ tension?, friction?, threshold? }) → number`
+Calculates the analytical settling time (in seconds) for a spring configuration. Eliminates guess-and-check when timing animations.
+
+```js
+const settleTime = measureSpring({ tension: 200, friction: 22 }); // ~0.72s
+```
+
+### `interpolate(val, inputRange[], outputRange[], opts?) → number`
+Remotion-compatible multi-segment interpolation with clamp/identity extrapolation and custom easing.
+
+```js
+const y = interpolate(lt, [0, 0.5, 1.2], [100, 0, -20], { extrapolateRight: 'clamp' });
+```
+
+### `interpolateColors(val, inputRange[], outputColors[], opts?) → string`
+Remotion-compatible perceptually uniform color interpolation with gamma correction (2.2). Blends hex and rgba colors without muddy middle grays.
+
+```js
+const bg = interpolateColors(lt, [0, 2], ['#111827', '#4f46e5']);
+```
+
+### `sequence(from, duration, fn) → (t) => styleObject`
+Temporal window wrapper that scopes computation to `[from, from + duration]`. Local time is passed as first argument.
+
+```js
+layer('card').on(sequence(2.0, 4.0, (lt, dur) => ({
+  opacity: lt < 0.3 ? lt / 0.3 : 1
+})));
+```
+
+### `noise2D(seed, x, y) → float [-1, 1]` & `noise3D(seed, x, y, z) → float [-1, 1]`
+Deterministic continuous simplex/perlin noise matching `@remotion/noise`. Zero dependencies. Essential for handheld camera shake, organic floating, and subtle rotational wobble.
+
+```js
+const shakeX = noise2D('cam', t * 3, 0) * 12; // +/-12px handheld drift
+const shakeY = noise2D('cam', 0, t * 3) * 8;
+```
+
+### `evolvePath(progress, pathLength) → { strokeDasharray, strokeDashoffset }`
+Path reveal utility matching `@remotion/paths`. Generates CSS stroke dash parameters to draw SVG curves smoothly.
+
+```js
+const { strokeDasharray, strokeDashoffset } = evolvePath(spring(lt), 640);
+```
+
+### `transition`
+Preset transition style generators matching `@remotion/transitions`.
+- `transition.fade(p)`
+- `transition.slide(p, { direction: 'from-left' | 'from-right' | 'from-top' | 'from-bottom' })`
+- `transition.wipe(p, { direction: 'from-left' | 'from-right' | 'from-top' | 'from-bottom' })`
+- `transition.flip(p, { axis: 'x' | 'y' })`
+- `transition.zoom(p, { from: 0.8, to: 1.0 })`
+
+### `absoluteFill(extraStyles?) → object`
+Standard layout helper matching Remotion's `<AbsoluteFill>`:
+`{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }`
+
+### `loopTime(t, duration) → number`
+Loops local time within `[0, duration)` for periodic cycles, matching Remotion `<Loop>`.
+
+### `loadGoogleFont(family, opts?) → Promise<void>`
+Loads Google Fonts and prevents FOUT during headless rendering by integrating with the `delayRender` / `continueRender` async barrier.
+
+### `kf(t, keys[], easing?) → number | number[]`
+Keyframe interpolation with easing.
+
+```js
+kf(lt, [[0, 0], [0.5, 100], [1.5, 80]], easeOut)
+kf(lt, [[0, [0,0]], [1, [200,100]]])  // vector interpolation
+```
+
+### `seg(t, a, b) → float [0, 1]`
+Normalise `t` into `[a, b]`: `(t - a) / (b - a)`, clamped.
+
+```js
+const progress = seg(lt, 0.5, 1.5);  // 0 before 0.5s, 1 after 1.5s
+```
+
+### `pulse(t, k?) → float`
+Exponential beat pulse: spikes at integer `t`, decays. `k` controls decay rate (default 6).
+
+### `onTwos(t) → number`
+Quantize time to 12 fps step — for traditional animation "on twos" look.
+
+### `boilSeed(key, t?) → float [0, 1)`
+Deterministic per-12fps-step seed for linework boil. Restarts stream per element name so parallel elements don't shift each other's randomness.
+
+```js
+const wobble = (boilSeed('outline', t) * 6) - 3;  // –3 to +3 px jitter
+```
+
+---
+
+## Shot Registry
+
+### `shots([ [t0, fn0], [t1, fn1], ... ])`
+Register time-ordered shots. Each `fn(t, lt, dur)` is called only while its window is active. Cleaner than individual `layer()` calls for long films.
+
+```js
+shots([
+  [0,  (t, lt, dur) => { /* intro  */ }],
+  [5,  (t, lt, dur) => { /* hook   */ }],
+  [12, (t, lt, dur) => { /* reveal */ }],
+]);
+```
+
+---
+
+## Component Builders
+
+All components return `HTMLElement` instances. Mount with `at(t, element)` or `document.getElementById('stage').appendChild(element)`.
+
+### `text(str, opts)`
+Animated text block.
+
+| Opt | Default | Notes |
+|-----|---------|-------|
+| `font` | `48px "Nirmala UI",...` | Full CSS font shorthand |
+| `color` | `#ffffff` | CSS color |
+| `x` | `'center'` | px or `'center'` |
+| `y` | `100` | px from top |
+| `align` | `'center'` | CSS text-align |
+
+### `chip(str, opts)`
+Pill-shaped label. Good for tags, captions, inline badges.
+
+### `wallCard(lines[], opts)`
+Frosted-glass card with title + body lines. For fact cards, definitions.
+
+```js
+at(5.0, wallCard(['GPS TRILATERATION', 'Signal timing from 4+ satellites pinpoints location.']));
+```
+
+### `imageCard(src, opts)`
+Image with optional caption overlay.
+
+### `browserCard(src, opts)`
+Website screenshot rendered as a card (uses `<iframe>` in non-headless mode, static image in render).
+
+### `terminal(lines[], opts)`
+Animated terminal output. Lines appear one by one.
+
+### `stamp(str, opts)`
+Bold diagonal stamp. Good for `VERIFIED`, `SOURCE`, `CLAIM` overlays.
+
+### `codeCard(code, lang?, opts)`
+Syntax-highlighted code block. `lang` defaults to `'js'`.
+
+---
+
+## Caption Sync
+
+### `captions(outlinePath)`
+Load Whisper word-level JSON (`transcribe.py` output). Auto-displays caption bar synced to audio.
+
+```js
+captions('audio/outline.txt');
+```
+
+### `cuePhrase(phrase, offset?) → number`
+Returns the video timestamp (seconds) when `phrase` starts being spoken.  
+**Throws a hard build error if the phrase is not found** — re-recording VO can never silently desync the film.
+
+```js
+const tReveal = cuePhrase('and that is how GPS works');
+layer('reveal').on(t => ({
+  opacity: t < tReveal ? 0 : spring(t - tReveal),
+}));
+```
+
+### `cue(sfxName, t, vol?)`
+Trigger a sound effect at time `t`. Name resolves to `audio/sfx/<name>.mp3`.
+
+---
+
+## Face Layout
+
+### `faceAt(layout, t)`
+Position a talking-head face layer. Layouts: `'FULL'`, `'SPLIT'`, `'PIP'`.
+
+---
+
+## Raw Frame Hook
+
+### `on(fn)`
+Register a raw per-frame compute function outside the layer system. For custom canvas overlays or Three.js scenes.
+
+---
+
+## Declarative Clips (HyperFrames)
+
+HTML elements with `.clip[data-start]` automatically participate in the timeline without requiring manual `layer()` callbacks.
+
+```html
+<div class="clip" data-start="3.0" data-duration="4.5">
+  <div class="hero-title">Automated Scene</div>
+</div>
+```
+
+Attributes and CSS variables set automatically during `seek(t)`:
+- `style.display`: `''` when active (`t >= data-start && t < data-start + data-duration`), else `'none'`.
+- `--lt`: Local time in seconds formatted as `${lt}s` (e.g. `1.250s`).
+- `--progress`: Normalized progression $0.0000 \to 1.0000$.
+- `data-lt`: Numeric local time attribute.
+- `data-progress`: Numeric progress attribute.
+
+---
+
+## Camera Choreography (OneTake)
+
+### `cameraPath(waypoints[], opts?)`
+Defines continuous, seamless camera pans, zooms, and rotations across the composition without hard cuts.
+
+```js
+cameraPath([
+  [0.0, { x: 0, y: 0, zoom: 1.0, rotate: 0 }],
+  [3.5, { x: 280, y: -120, zoom: 1.35, rotate: -2 }],
+  [7.0, { x: -150, y: 80, zoom: 1.1, rotate: 1 }],
+], {
+  target: '#stage',       // DOM query selector or element to transform
+  easing: easeInOut,      // Easing function for waypoint interpolation
+});
+```
+
+### `cameraShake(t, { intensity?, speed?, seed? }) → { x, y, rotate }`
+Generates smooth, organic handheld camera vibration using 2D continuous noise.
+
+```js
+const shake = cameraShake(t, { intensity: 8, speed: 3.0 });
+stage.style.transform = `translate(${shake.x}px, ${shake.y}px) rotate(${shake.rotate}deg)`;
+```
+
+---
+
+## Frontier Visual Primitives
+
+### `mascot(emotion?, opts?) → HTMLElement`
+Generates a procedural SVG vector mascot character with 12 distinct emotions, 12fps hand-drawn line boil, eye blink cycles, and talking mouth flutter (derived from `ClaudeAnimationBase`).
+
+- **Emotions**: `'neutral'`, `'happy'`, `'excited'`, `'thinking'`, `'confused'`, `'skeptical'`, `'surprised'`, `'alarmed'`, `'celebrating'`, `'proud'`, `'curious'`, `'sad'`.
+- **Options**: `{ size: 320, color: '#f97316', speaking: false, x: 'center', y: 'center', duration: Infinity }`.
+- **Dynamic controls**: `el.setEmotion(name)`, `el.setSpeaking(bool)`.
+
+```js
+const hero = mascot('excited', { size: 380, x: 'center', y: 'bottom' });
+at(2.0, hero);
+hero.setSpeaking(true);
+```
+
+### `collageCard(content, opts?) → HTMLElement`
+Generates editorial halftone paper-collage b-roll cards with washi tape strips, 2.5D perspective tilt, and drop shadow (derived from `gbro-collage-broll`).
+
+- **Options**: `{ width: 720, tiltX: 2, tiltY: -3, bg: '#fdfbf7', tapeColor: 'rgba(254, 240, 138, 0.88)', x: 'center', y: 'center', duration: Infinity }`.
+
+```js
+const card = collageCard('<h3>KEY TAKEAWAYS</h3><p>Halftone textured paper with washi tape.</p>', {
+  width: 680,
+  tiltX: 3,
+  tiltY: -4,
+});
+at(4.0, card);
+```
+
+---
+
+## Audio & Editor Upgrades
+
+### Word-Level Karaoke Captions
+`captions('audio/outline.json', { highlightColor: '#facc15' })` auto-formats transcript segments into word-level tokens. Spoken words receive a $1.14\times$ pop scale, active glow shadow, and high-contrast color highlight.
+
+### Web Audio Procedural Sound Effects (Earshot)
+During interactive development and browser preview (`!window.__playwright`), `cue('whoosh' | 'impact' | 'pop' | 'click' | 'riser', t)` automatically synthesizes procedural SFX using the Web Audio API without needing external asset files.
+
+### J-Cut / L-Cut Audio Splits (Lemo-Opuscar)
+In `VideoEditor.concatClipsWithTransitions`, pass `splitCut: 'j-cut'` (audio of incoming clip starts before video transition with S-curve crossfade) or `splitCut: 'l-cut'` (audio of preceding clip lingers over incoming video).
+
+---
+
+## Beat-Grid (HyperFrames)
+
+### `beatAt(index, bpm, fps) → number`
+Returns the exact **frame number** for beat index `index`. Rounds each index independently — never accumulate.
+
+```js
+const fps = REEL.fps; // 30
+const beat0 = beatAt(0, 120, fps); // frame 0
+const beat1 = beatAt(1, 120, fps); // frame 15  (30 * 60 / 120)
+const beat4 = beatAt(4, 120, fps); // frame 60
+```
+
+### `beatTime(index, bpm) → number`
+Returns beat `index` as a timestamp in **seconds**. Equivalent to `beatAt(index, bpm, fps) / fps` but without the fps parameter.
+
+### `snapToBeat(t, bpm) → number`
+Snaps a timestamp to the nearest beat boundary. Use for aligning SFX cues and cut points to the music grid.
+
+```js
+cue('wood', snapToBeat(3.1, 128) - 0.04); // 40ms lead on nearest beat
+```
+
+---
+
+## OM — OneTake Motion Library
+
+All moves: **pure CSS functions `(t, opts) → { transform?, opacity?, clipPath? }`**.
+Feed `t` via `seg(currentTime, start, end)` for normalised 0→1 progress within a time window.
+
+```js
+import { OM, seg, cue, ROOM_SFX } from './reel/engine.js';
+
+// Standard entrance with carry:
+layer('title').on((t) => {
+  const p = seg(t, 1.0, 2.2);
+  cue(ROOM_SFX.wood.desc && 'impact', 1.0 - 0.04); // 40ms lead
+  return OM.spring(p, { scale0: 0.6, scale1: 1.0 });
+});
+```
+
+See `references/animation-patterns.md` section 5 for the full move catalogue with all options.
+
+**Key moves:**
+
+| Move | Category | Returns |
+|------|----------|---------|
+| `OM.spring(t, opts)` | Entrance | `transform: scale(…)` |
+| `OM.rise(t, opts)` | Entrance | `transform: translateY(…)` |
+| `OM.iris(t, opts)` | Entrance/carry | `clipPath: circle(…)` |
+| `OM.morphRect(t, opts)` | Entrance/carry | `clipPath: inset(…)` |
+| `OM.silk(t, opts)` | Entrance | `clipPath: inset(…)` edge-pull |
+| `OM.zoomThrough(t, opts)` | Carry | `transform: scale(…)` portal |
+| `OM.camera(t, opts)` | Camera | `transform: translate+scale` |
+| `OM.handheld(t, opts)` | Camera | `transform: translate+rotate` |
+| `OM.popOut(t, opts)` | Exit | `transform: scale(…)` |
+| `OM.slideExit(t, opts)` | Exit | `transform: translateX/Y` |
+| `OM.breathe(t, opts)` | Ambient | `transform: scale(…)` |
+| `OM.carryScore(t)` | Oracle | number ≥ 0.5 = PASS |
+
+### `ROOM_SFX`
+OneTake 5-material SFX palette. Use keys as `sfxName` in `cue()`.
+
+| Key | Material | Use for |
+|-----|----------|---------|
+| `air` | Air movement | Camera translation, fast wipe |
+| `wood` | Wooden impact | Title punch, beat drop |
+| `glass` | Glass chime | Badge reveal, icon appearance |
+| `sub` | Sub rumble | Cinematic reveal, depth |
+| `bubble` | Bubble pop | Light UI touch, counter tick |
+
+All at −8 dBFS in the SFX bus. Apply 40ms perceptual lead (`cue(name, t - 0.04)`).
+
+---
+
+## `event(type, t, meta)`
+Declares a composition event that `render.mjs` reads via `window.__events()` after page load.
+Render produces `out/sfx-events.json` — consumed by `mix_audio_pro` when building the SFX track.
+
+```js
+event('sfx',        1.0,  { sfxName: 'impact', material: 'wood', vol: 0.8 });
+event('transition', 3.5,  { label: 'iris-open' });
+event('beat',       0.0,  { bpm: 128 });
+```
+
+**Types:** `'sfx'` · `'transition'` · `'beat'` · `'camera'`
+
+---
+
+## Global Aliases
+
+`engine.js` sets these on `window` for the render harness:
+
+| Global | Points to |
+|--------|-----------|
+| `window.seek(t)` | `seek(t)` |
+| `window.__seek(t)` | `seek(t)` |
+| `window.renderFrame(t)` | `seek(t)` |
+| `window.DURATION` | `REEL.duration` |
+| `window.FPS` | `REEL.fps` |
+| `window.__events()` | Returns `_events[]` (all `event()` calls) |
+| `window.__cues` | Array of `{ sfxName, t, vol }` from `cue()` |

package/plugins/video-pipeline/skills/html-renderer/references/film-styles.md

@@ -0,0 +1,95 @@
+# Film Styles Catalog — 12 Production Video Aesthetics
+
+Derived from `lemomo-ai/lemo-opuscar` and calibrated for FrameForge's code-driven rendering and FFmpeg post-processing.
+
+---
+
+## 1. Cinematic 2.39:1 (Anamorphic)
+- **Aspect Ratio**: 1920×804 letterboxed or 2.39:1 wide.
+- **Palette**: Deep teal (`#0A192F`), rich copper/gold (`#D4AF37`), slate shadow (`#0D1117`).
+- **Motion**: Slow continuous push-in (`zoom_in`, $p = 1.0 + t \times 0.04$), organic Lissajous camera drift.
+- **Lighting**: Subtle horizontal anamorphic lens flare (`linear-gradient(90deg, transparent 45%, rgba(0,210,255,0.4) 50%, transparent 55%)`).
+- **FFmpeg Filter**: `curves=m='0/0 0.25/0.2 0.75/0.8 1/1':r='0/0 0.5/0.53 1/1':b='0/0.03 0.5/0.48 1/0.97',eq=saturation=1.12:contrast=1.05`.
+
+---
+
+## 2. Product Launch (OneTake Smooth)
+- **Concept**: Fluid, single-shot 3D hero showcase (Apple / Teenage Engineering style).
+- **Palette**: Pure dark obsidian (`#0F0F11`), titanium silver (`#E1E4E8`), neon blue accent (`#0070F3`).
+- **Motion**: `onetake` continuous orbit. No cuts. The stage camera glides around the hero subject using smooth spring interpolation ($k=180, d=16$).
+- **Lighting**: Studio rim lighting with specular glass reflections and ambient occlusion.
+
+---
+
+## 3. Editorial Paper Collage & Halftone (`gbro-collage-broll`)
+- **Concept**: Physical magazine clippings, halftone screen dots, torn paper borders, 2.5D card tilt.
+- **Palette**: Newsprint beige (`#F4EEDD`), printer black (`#1A1A1A`), risograph red (`#FF3E3E`), postal blue (`#1D4ED8`).
+- **Motion**: Stop-motion 12fps step-stagger entrance, rotational drop with 3-property spring.
+- **Border**: SVG `feTurbulence` torn edge filter.
+
+---
+
+## 4. Cyberpunk Neon
+- **Concept**: High-voltage dystopian tech, terminal data HUDs, glowing reticles.
+- **Palette**: Terminal black (`#05050A`), laser cyan (`#00F0FF`), electric magenta (`#FF0055`), hazard amber (`#FFE600`).
+- **Motion**: Fast speed ramps (1.25x), chromatic aberration on transition, micro-glitch displacement.
+- **FFmpeg Filter**: `curves=r='0/0 0.5/0.45 1/1':b='0/0.08 0.5/0.58 1/1',eq=saturation=1.3:contrast=1.1`.
+
+---
+
+## 5. Vintage 16mm Film
+- **Concept**: Archival documentary, analog imperfections, warm organic glow.
+- **Palette**: Warm sepia (`#3D2F1D`), aged ivory (`#F5EBE1`), faded olive (`#4A503D`).
+- **Texture**: Seeded 12fps film grain, gentle gate weave ($y \pm 1.5\text{px}$), vignetted rounded corners.
+- **FFmpeg Filter**: `curves=vintage,eq=contrast=0.95:saturation=0.85`.
+
+---
+
+## 6. Minimal Swiss Monochrome
+- **Concept**: Grid-aligned brutalist architecture, massive typography, bold numbers.
+- **Palette**: Stark white (`#FFFFFF`), pure pitch (`#000000`), international safety orange (`#FF5500`).
+- **Typography**: Heavy grotesque sans-serif (`Archivo`, `Cabinet Grotesk`, `Inter Display`).
+- **Motion**: Rigid geometric slides along orthogonal 12-column grid.
+
+---
+
+## 7. Anime Action & Speedlines
+- **Concept**: Shonen battle energy, radiant impact lines, frame freeze punches.
+- **Palette**: Midnight navy (`#0B0E14`), flash yellow (`#FFE500`), crimson fire (`#FF1E27`).
+- **Motion**: 1-frame impact white flash on narrative beat drops, radiating radial vector lines, extreme punch-in (1.20x).
+
+---
+
+## 8. Retro VHS Cassette
+- **Concept**: 1980s magnetic tape playback, tracking errors, scanlines.
+- **Palette**: CRT green tint (`#102A12`), phosphorescent white (`#E6FFE6`).
+- **Overlay**: Blinking REC symbol, monospace timestamp in corner (`SP 00:04:12`), subtle horizontal sync tear.
+
+---
+
+## 9. Sci-Fi Vector HUD
+- **Concept**: Telemetry telemetry data, circular reticles, radar sweeps, coordinate displays.
+- **Palette**: Dark space blue (`#020813`), tactical emerald (`#00FF88`), radar amber (`#FFB300`).
+- **Motion**: Continuously rotating bearing dials ($\omega = 0.5\text{rad/s}$), pulsing wave graphs.
+
+---
+
+## 10. Lo-Fi Chill / Bedroom Beats
+- **Concept**: Calm pastel aesthetic, ambient floating particles, soft shadows.
+- **Palette**: Lavender dusk (`#9D8DF1`), dusty rose (`#B88698`), cream peach (`#FFEEDB`).
+- **Motion**: Ultra-smooth easing (`easeInOutQuad`), floating dust motes with sine drift.
+
+---
+
+## 11. Broadcast News / Financial Explainer
+- **Concept**: CNBC / Bloomberg ticker, multi-panel layout, telemetry graphs.
+- **Palette**: Financial blue (`#0A2540`), green profit (`#00D924`), alert red (`#E60000`).
+- **Components**: Scrolling live ticker at bottom, animated line chart drawing left to right.
+
+---
+
+## 12. 3D Isometric Blueprint
+- **Concept**: Technical engineering breakdown, wireframe orthographic perspective.
+- **Palette**: Blueprint cobalt (`#0D3B66`), drafting cyan (`#64DFDF`), technical white (`#F8F9FA`).
+- **Projection**: `rotateX(60deg) rotateZ(-45deg)` CSS 3D stage with layered extruded cards.
+