@amg555/frameforge-mcp 2.7.6 → 2.7.8

package/.agent/skills/html-renderer/references/engine-api.md

@@ -1,480 +0,0 @@
-# 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/.agent/skills/html-renderer/references/film-styles.md

@@ -1,95 +0,0 @@
-# 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.
-