--- name: chibi description: Make a narrated vertical reel (1080x1920, 25-45 s) in the "Chibi" format - a cute, glowing chibi narrator on a warm dark stage explains something chapter by chapter. He walks, hops with squash and stretch, looks around, lip-syncs, changes pose and face on nearly every word, and flings his sunglasses off or catches them back on. Around him: a perspective floor grid, a mono chapter bar ("● 03 / 11 — PRICE") with a progress line, tilted dark-glass UI cards and mono tags landing one per word, and mid-screen captions in 1-3 word chunks (the spoken word in a hopping orange pill, key words in orange serif italic, unspoken words dim) over a giant outlined ghost word. The camera pushes and drifts, light sweeps run between chapters, white-outs land on reveals, red/blue/spotlight acts mark the turns, and a "Comment “KEYWORD”" end card closes it. One energetic ElevenLabs voice, a synthesized sound kit and music bed, drawn frame by frame in headless Chrome and encoded with ffmpeg. Use it when someone asks for a chibi reel, "chibi.md", a cute mascot / character explainer, a reel like a glowing chibi explaining a tool, or wants to turn a script into this kind of video. --- # Chibi reel: how to make one You will make a **25-45 second vertical video (1080x1920, 30 fps, H.264 + AAC, at most 60 s and 60 MB)** that feels like **a tiny, very expressive friend walking you through a tool**: a counted hook, "and it's totally free!", "here's the thing" in close-up, the problem in a few beats, the fix, "it's called…", the name, the install in three verbs, and "comment X and I'll send it to you". - **The picture:** a warm, dark stage with one **orange** accent. A shaded chibi with a cream rim and an orange glow stands in the lower half. Dark-glass cards float above him, and captions sit mid-screen between the two. - **It never stands still.** Something happens on nearly every word: a card lands, a stamp slams, a check pops, he changes pose or face, the camera punches in. And a sound goes with each. - **Everything is drawn:** SVG and a little HTML, no images, no footage. **`reference.jpg`** (next to this file, if you have it) is a contact sheet of 12 frames from a finished Chibi reel: **this is what it should look like.** Left to right, top row first: 1. "1,000s" in glowing gold over a blurred wall of skill tags, "CONTENT SKILLS" spaced under it, the chibi in sunglasses with open arms; 2. a tilted checkout card "Pro Content Skill $29.99 · Buy now" with a red "NEVER" stamp slammed across it and a cursor knocked away; 3. a chrome "$0" with a tilted orange "FREE" stamp and an orange swoosh, sparkles; 4. the close-up: he fills the frame, the sunglasses fly off spinning up and right; 5. a tilted app window "MORPHY" with mini cards, three orange tags flying in, a gold "SUPER APP" badge, him with a thumbs-up; 6. a folder card "my-format/" with five files and a glowing "SKILL.md" card; 7. the red act: three relabelled locked copies (ULTIMATE PACK, PRO FORMAT, SKILL BUNDLE) and a red digital "$30.00" price card, him clutching his chest, eyes wide; 8. the blue act: he has walked left; a globe, a terminal "build library --free" and four format cards with green "SKILL.md" checks; 9. three rows (Paywall, Subscription, Strings attached), each struck through with a red ✕; 10. the spotlight: "Chibi" in white and ".md" in orange serif, sparkles, him small in the light cone; 11. a Skills panel with "chibi.md" outlined in green and a big "✓ Done."; 12. the end card "Comment “CHIBI”" with an orange arrow ↘, the shades back on. If you only have this file, section 3 describes everything with numbers. Everything is drawn **one frame at a time** in headless Chrome (`window.setT(t)`), then muxed with a mix made in ffmpeg. This file gives you: - the look (exact colours, fonts, sizes), - the grammar of the script and of the edit, - the complete tested engine (Appendix A: write it once), - a complete example video (Appendix B). With the engine written, **a video is two files**: `script.mjs` (what the voice says and the captions show) and `scenes.js` (the chapters, the character's acting and every card). Work in this order and don't skip ahead: **setup → script → fake timings → scenes → stills → voice → real timings → fix the beats → stills + motion strips + scan → full render → mix → encode → check → deliver.** --- ## 0. Rules of engagement (read first) 1. **Be gentle with the user's computer.** One headless browser at a time, at the lowest priority (`cdp.mjs` does this; on Windows it also pins Chrome to one CPU). Never run two renders at once. 2. **Never print secrets.** The key is `ELEVENLABS_API_KEY` (environment, or `.env` in the project folder). Scripts read it; you never echo it, log it or put it in a file you show. 3. **Spend credits deliberately.** `gen-vo.mjs` is a dry run unless you pass `--yes`. Make one take per section (~1 credit per character, ~550 for a 35 s reel). Takes are cached: only a section whose words changed is made again. To change only caption chunks or key words, run `retag.mjs` (free). 4. **Stills before film.** Direct the beats on fake timings (`build-timeline.mjs --fake`) and check stills before you pay for the voice. Never start the full render until the stills and the motion strips are right. 5. **Background jobs die when your turn ends.** Render in foreground chunks under your tool timeout (`--full --to 12`, then `--full --from 12 --to 24`, …); the render resumes where it stopped. 6. **No real people, no real brands, no real faces.** The chibi is the format's own character; never draw a real person or another creator's mascot. Use no screenshots, real logos, handles or view counts. A number on screen must be one the script says. 7. **Don't publish anything.** You deliver files. Posting is the user's call. 8. **The user wins.** If their instructions conflict with this file, follow theirs. If something is missing (no key, no ffmpeg), say exactly what and offer the closest thing. Never fake success. ## 1. Requirements - **Node 22+** (global `fetch` and `WebSocket`), **ffmpeg + ffprobe** on PATH, **Chrome or Edge** (or set `CHROME=`). No npm packages. - **An ElevenLabs API key** and **the voice on that account**: open ElevenLabs' Voice Library, search **"Arthur - Energetic American Male Narrator"** and add it. Or set `VOICE` in `gen-vo.mjs` to the premade **Liam** (`TX3LPaxmHKxFdv7VOQHJ`), also young and energetic. - The free plan is enough to try the format but has no commercial licence; videos that promote anything need a paid plan. - No key yet: do everything up to the stills with `--fake` timings and ask for the key. - **Fonts:** free downloads that `setup.mjs` fetches (Inter Tight, Instrument Serif italic, IBM Plex Mono). On Windows the key words use Bodoni MT Condensed italic and the labels Consolas when installed. - **Sound:** the 32 sound effects (`sfxgen.mjs`) and the music bed (`bed.mjs`) are synthesized: no licences, no credits. To use your own music, put it in `music/` and name it in `E.music({ track })`. - **Optional:** Python + `pip install faster-whisper` lets `check-vo.mjs` and `whisper-check.mjs` compare the audio with the script. ## 2. Project layout and setup ``` chibi-reel/ one project folder, many videos .env ELEVENLABS_API_KEY=... (never print it) edit.html edit.css engine.js the page: timeline.js -> engine -> scenes.js -> window.setT(t) · the look · the engine lib.mjs markup.mjs cdp.mjs shared helpers · script markup · the headless browser setup.mjs sfxgen.mjs bed.mjs requirements + fonts · the sound kit · the music bed gen-vo.mjs check-vo.mjs retag.mjs build-timeline.mjs render-short.mjs mix.mjs encode.mjs whisper-check.mjs whisper.py fonts/ sfx/ music/ made by setup.mjs my-video/ one folder per video (Appendix B is a complete one) script.mjs scenes.js what the voice says · what the film shows vo/ timeline.js(on) vo.wav cues.json stills/ frames/ mix.wav video.mp4 cover.jpg (made by the tools) ``` ```bash mkdir chibi-reel && cd chibi-reel # write every file of Appendix A, then: node setup.mjs # checks Node/ffmpeg/Chrome/key, downloads the fonts, makes sfx/ and music/bed.wav ``` A video (every tool takes `--dir `, a folder inside the project): ```bash mkdir my-video # write my-video/script.mjs (section 4) and my-video/scenes.js (section 6; Appendix B shows both) node build-timeline.mjs --dir my-video --fake # guessed timings + a silent vo.wav: direct before you pay node render-short.mjs --dir my-video --stills --at 1,3.3,5.6,6.5,9.8,12.6,16.7,20.3,23.5,26.2,29.8,34 --safe # my-video/stills/sheet-safe.jpg node gen-vo.mjs --dir my-video # dry run: the text of every take + the character count node gen-vo.mjs --dir my-video --yes # one take per section -> my-video/vo/ node check-vo.mjs --dir my-video # optional: whisper every take (needs faster-whisper) node build-timeline.mjs --dir my-video # real timings -> timeline.js, vo.wav node -e "const j=require('./my-video/timeline.json');for(const s of j.sections)console.log(s.id,s.tokens.map(k=>k.d+'@'+k.t0).join(' '))" # every word's time node render-short.mjs --dir my-video --stills --at --safe node render-short.mjs --dir my-video --stills --at 6.0,6.1,6.2,6.3,6.4,6.5,6.6,6.7,6.8,6.9,7.0,7.1 --sheet my-video/stills/motion.jpg # a 10 fps motion strip of a busy beat node render-short.mjs --dir my-video --scan --step 0.0333 # every visible text, every frame, against the safe zone node render-short.mjs --dir my-video --full --to 12 && node render-short.mjs --dir my-video --full --from 12 --to 24 && node render-short.mjs --dir my-video --full --from 24 node mix.mjs --dir my-video # voice + bed 13 LU under (ducked) + every sound cue -> -14 LUFS node encode.mjs --dir my-video # my-video/video.mp4 + cover.jpg, with the checks node whisper-check.mjs --dir my-video # optional: the words heard vs the script ``` ## 3. The look, pinned down ### 3.1 The frame (1080x1920 px) | Layer | Where | What | |---|---|---| | Stage | everywhere | `#0b0705`; a radial glow `rgb(214,96,40)` at ~0.6 centred on the character's chest, a wider one at the top third, a pool at his feet; a vignette | | Floor | from y 1060 down | a perspective grid (37 lines from a vanishing point at x 540, 15 rows getting denser to the horizon), orange at up to 20 %; slow twinkling stars everywhere | | Chapter bar | x 66, y 262 | `● 03 / 11 — PRICE`: Consolas/Plex Mono 700 22 px caps +0.12em, number white, rest muted `#8f8379`; a 2 px line under it (y 304, 880 px) filling orange to n/N with a glowing head | | Cards | x 110-920, y 340-820 | the UI of each beat (3.4) | | Captions | centred on x 510, bottom at y 952 | 70 px (3.3) over a ghost word | | Character | centre x 510, feet y 1470 | 320x430 SVG units at 1.32 × scale (~420x570 px); scale 0.8-1.05 normally, ~2.25 in the close-up (feet ~y 2140) | **Safe zone (every platform covers the edges):** all text inside **x 60-960, y 250-1480**. Nothing important goes in the top 250 px, the bottom 440 px or the right 120 px. `--stills --safe` draws the zone and outlines any visible text outside it in red; `--scan` tests every text on every frame. Art may run off the edges; text may not. Text clipped away by an `overflow:hidden` box gets `dataset.free = 1`. ### 3.2 Colours | Token | Hex | Used for | |---|---|---| | orange | `#ef7a3c` (light `#ff9a5c`, `#ffb37a`) | the pill, key words, borders of hot cards, tags, stamps, the glow on the character | | gold | `#ffc93c` → gradient `#fff3b0 → #ffd23f → #f29a12` + glow | big numbers ("1,000s"), the SUPER-type badge | | green | `#3ddc84` | checks, "downloaded ✓", the row that just landed | | red | `#ff4d4d` | NEVER, strikes, ✕, the price that hurts | | ink / dim / muted | `#f4ece4` · `rgba(244,236,228,.26)` · `#8f8379` | spoken words · unspoken words · labels | | glass | `linear-gradient(160deg, #241c18, #16110f)`, border `rgba(255,255,255,.09)` 1.5 px, radius 18, shadow `0 24px 60px rgba(0,0,0,.55)` | every card | | acts | blue `#060912` + glow `52,82,190` · red `#100405` + `200,36,36` · spot `#040302` (a light cone with dust) | the fix · the problem · the name | ### 3.3 Captions - **Chunks:** one chunk at a time, **1-3 words**, cut at a `/` in the script; Inter Tight 800, 70 px, centred on x 510. - **Word by word:** unspoken words are dim and slightly blurred. A spoken word turns white and pops (rises 14 px, 1.12 → 1 scale). - **The pill:** while a plain word is spoken it sits in an **orange rounded pill** (white text, glow). The pill **slides from the previous word** and hides between words. - **Key words** (`*word*`) are **orange serif italic at 1.2em** with a soft glow and never get the pill. - **Behind the captions:** a **ghost word** per chapter, 250 px outlined caps at 13 % orange, drifting left. - **Ticks:** a soft tick sounds on every plain word (automatic). ### 3.4 The character A chibi: a big head (hair with a tuft on top, bangs, side locks), a cream tee with an orange V-collar and stripes, dark trousers, white sneakers with orange soles. He has shading gradients, a cream rim and an orange glow (`#ff8a45`, reddish in the red act). - **Poses** (arms blend in 0.28 s with a little overshoot): idle, wave, wave2, up, wag (a finger wag), present, presentL, reach, reachL, point, pointL, open, cheer, shrug, chest, thumb, hips, cheeks, think, give. - **Eyes:** open (blinks, a double blink now and then), happy ^^, calm, wide, flat (unimpressed), wink, sad (with a tear). - **Mouth:** lip flaps on every spoken word; or smile, grin, open, o, flat, wavy for a moment. - **Moves:** - `at()` walks sideways (legs swing, he leans, footsteps) or glides in and out for close-ups. - `hop()` = squash, jump, stretch, land + a spring boing. - He also tilts his head, looks left or right (the face slides), blushes, and his hair tuft lags behind every move. - **Sunglasses:** `on`, `throw` (flung up and away, spinning, with a whoosh) and `drop` (fall back on with a bounce and a click). ### 3.5 Motion | Move | How | |---|---| | between chapters | the bar flips (letters glitch in), a **diagonal light sweep** crosses with a whoosh, the old cards fly or blur out upward | | in a chapter | a slow camera push (+4.5 %), a handheld drift, cards that hover, the glow breathing | | on a hit | a **camera punch** (+5 % and back in 0.28 s), a **shake**, a **flash** (a warm white-out), a stamp | | a list ("No X. No Y. No Z.") | one card per item on its word, a red strike and a ✕ on each; the last one snaps and falls | | a number | it counts or rolls (a slot-machine reel, a price counting up to $30.00) with a tick-roll | | the name | spotlight, "It's called…" alone with pulsing dots, a riser and a swell into a white-out, the name slams in layered: white sans + orange serif | | the end | the comment box types the keyword letter by letter, the send button squashes, a plane flies off, a DM card arrives; a white-out into **"Comment “KEYWORD”"** (130 px white + 220 px orange serif) with a bouncing arrow ↘, held ~2 s | ### 3.6 Sound The voice sits on top, with the bed **13 LU under** it and ducked while he speaks. On top of that go **~6 sound cues a second**: - automatic ones: ticks, footsteps, boings, sweeps, the shades; - your own `cue()` on every card, stamp and check. The 32 sounds: - **UI:** tick1-3, blip, blip2, blipdown, bubble, click, key1-3, ding1-2; - **impacts:** boing, thud, stamp, boom; - **whooshes:** whoosh2, swup, swdown, throw, drag, send; - **specials:** kaching, snap, shimmer, sparkle, step1-2, swell, riser2, tickroll. The final mix is −14 LUFS, true peak ≤ −1 dBTP. ## 4. Writing for this format The reference grammar: 1. **a counted hook** ("There are thousands of X out there, but you only need one"); 2. **"And it's totally free!"**; 3. **"Here's the thing."** (the close-up), then the problem in 2-3 short beats; 4. **the fix** (what the thing does, in literal steps); 5. **"It's called…"** as its own section, then **the name alone**; 6. **the install in three verbs** ("Just download it, upload it to your skills, and you're done"); 7. **"Comment X and I'll send it to you."** - 90-110 words ≈ 30-36 s at ~190 wpm with gaps of 0.12-0.45 s. Never over 60 s. - Markup: - `/` starts a new caption chunk (1-3 words; a key word often stands alone); - `*word*` is a key word; - `*two_words*` is one token over two spoken words; - `{shown|said}` is for when the caption and the voice differ (`{$30.|thirty dollars.}`, `{SKILL.md,|skill dot M D,}`, `{CHIBI,|Chibi,}`). - `GAP` sets the silence before a section; `HOLD = 2.2` keeps the end card on screen after the last word. ## 5. The voice ElevenLabs **Arthur** (`TtRFBnwQdH1k01vR0hMz`), `eleven_multilingual_v2`, stability 0.45, similarity 0.8, style 0.4, speaker boost, **speed 1.1**: young, bright, quick (~190 wpm). One take per section, so every caption word gets its own time from the timestamps. Other voices: set `VOICE` in `gen-vo.mjs`; keep it young and energetic. ## 6. scenes.js: directing a video `window.VIDEO = E => { … }` runs once and registers everything; the engine then draws any time `t`. All times come from the words: `T(id, word, n)` is the start of the n-th token in that section starting with `word`, `TE(...)` its end, `S.s4.start/end` the section. **A word matches by prefix**, so `T('s2', 'I')` finds "I'm". Use a longer word. **Direct in this order:** 1. **Chapters, ghosts, acts and music:** one chapter per section or idea, 8-12 in all. 2. **The character, start to end:** a pose, face or look change every 1-2 words. Big moments get a hop. "Here's the thing" gets the close-up with the shades thrown. The fix walks him aside, and he walks back after. 3. **Camera punches** on the hits. 4. **One `scene()` per chapter:** the cards of that beat, each landing on its word, with a sound. ```js chapter(3, 'PRICE', S.s1.start - 0.05); // the bar; a sweep + whoosh on every change after the first ghost('FREE', S.s1.start, S.s2.start - 0.1); // the outlined word behind the captions act('red', S.s4.start - 0.05, S.s5.start - 0.2, 0.3); // 'red' | 'blue' | 'spot' | 'dark' punch(T('s4', '$30'), 0.05); shake(t, 16, 0.4); flash(t, 0.16, 0.2); sweep(t, 1); E.music({ track: 'bed', under: 13, fadeOut: 1.4, beds: [{ at: 0, from: 0 }], muffle: [[a, b]] }); // muffle = low-passed (the spotlight) chibi.shades(-9, 'on').eyes(-9, 'open').pose(-9, 'idle').at(-9, 510, 1440, 0.8) .at(-0.3, 510, 1470, 1, 2.0, { walk: false }) // the push in on the hook .pose(T('s0', 'thousands') - 0.1, 'open').look(T('s0', 'skills'), -0.6, 3) .at(S.s2.start - 0.12, 510, 2140, 2.25, 0.4, { walk: false }) // the close-up .shades(T('s2', 'the'), 'throw').eyes(T('s2', 'the'), 'wide') .at(S.s5.start - 0.12, 262, 1470, 0.96, 0.75) // walks left (legs + footsteps) .hop(T('s3', 'free') - 0.06, 0.8).eyes(T('s3', 'free'), 'happy').mouth(t0, t1, 'o'); scene(S.s4.start - 0.05, S.s5.start + 0.35, (fr, bk) => { // fr = in front of him, bk = behind him const price = card(fr, 290, 625, 440, 170, `
$30.00
`, { hot: COL.RED }); cue('kaching', T('s4', '$30'), 0.09); return t => { show(price, t, T('s4', 'sold'), S.s5.start - 0.05, { kin: 'rise', dy: 60, base: TILT(0, 6) }); }; }); ``` **Components (all on `E`):** - **The character:** `chibi.at(t, x, y, scale, d, { walk })`, `.pose`, `.eyes`, `.shades`, `.mouth(t0, t1, kind)`, `.hop(t, k, sound)`, `.tilt(t, deg)`, `.look(t, x −1…1, deg)`, `.blush(t, k)`; `charPos(t)`. - **Layout:** - `A(parent, x, y, w, h, cls, html, style)`; - `card(...)` (dark glass; `.hot(k, colour)` lights its border per frame); - `tag(parent, x, y, text, { hot })`; - classes `.gold` (gradient numbers), `.chrome` (extruded white numbers), `.mono`, `.serif`, `.tg`. - **Motion:** - `show(el, t, t0, t1, { kin, kout, din, dout, from, dx, dy, base, blur })`. `kin` is pop · rise · drop · slam · fade · flip · fly; `kout` is up · down · shrink · fade · fly. `base` is the resting transform, e.g. `perspective(1100px) rotateY(-10deg) rotateX(6deg)` plus `hover(t, seed, px)`. - Also `typed(el, text, t, t0, t1)`, `caretOn(t)`, `st(el, opacity, transform, blur)`. Easings: `ease eo ei eio back elastic`. - **Overlays:** `topL` is a layer over everything (end cards); hide its elements with `st(e, 0)` when you make them, because they live outside any scene. `hideCaptions(t0, t1)`. - **Icons:** `ICON.check cross file zip send globe giftBox giftLid tag lock card string spark cursor user arrow`; `MARK` (the CTA avatar, a data URI: swap in your logo). - **Sound:** `cue(name, t, gain 0.03-0.11)`; `capTicks(gain)` (0 turns the word ticks off). **Timing rules:** - A card lands 0.05-0.15 s before its word. - In a list: placeholders first, then one card per word, then a check per card 0.1 s apart. - Exits overlap the next chapter's entrances by ~0.3 s. - Frame 0 must already show the hook (start the first scene at −1 and the counter at −0.34). - Never leave a chapter empty between its words. If in doubt, add a pose or face change and a tick. ## 7. Checks before you deliver - `--stills --safe` shows **no red boxes**, and `--scan --step 0.0333` says **all text inside**. - **Motion strips** (10 fps) of the close-up and the busiest chapter look smooth: no pops, no frozen character, no card stuck at an odd angle. - `encode.mjs` says **ENCODE OK** (H.264 High, yuv420p, 1080x1920, 30 fps, ≤ 60 MB, ≤ 60 s, −14 LUFS ±0.7, true peak ≤ −1 dBTP, frame 0 not black). - `whisper-check.mjs` (if faster-whisper is installed) shows only spelling differences. Otherwise listen. - Deliver `my-video/video.mp4` and `cover.jpg` (the frame at `E.coverAt`), plus a caption ending on "Comment KEYWORD". Post nothing. --- ## Appendix A: the engine (write every file exactly) ### `edit.html` ```html Chibi reel
``` ### `edit.css` ```css /* Chibi style tokens. Inter Tight (fonts/) for everything; Bodoni MT Condensed italic for the key word; Consolas bold caps for labels; Segoe Print for handwritten notes. Off Windows, Instrument Serif italic and IBM Plex Mono stand in (SIL OFL). */ @font-face { font-family: 'Inter Tight'; src: url(fonts/InterTight.ttf) format('truetype'); font-weight: 100 900; } /* the key-word serif and the mono labels: the Windows faces if installed, else the free ones in fonts/ */ @font-face { font-family: 'Bodoni MT Condensed'; font-style: italic; src: local('Bodoni MT Condensed Italic'), local('BodoniMTCondensed-Italic'), url(fonts/InstrumentSerif-Italic.ttf) format('truetype'); } @font-face { font-family: 'Consolas'; font-weight: 400 700; src: local('Consolas'), url(fonts/IBMPlexMono-Bold.ttf) format('truetype'); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 1080px; height: 1920px; overflow: hidden; background: #000; } #film { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; overflow: hidden; font-family: 'Inter Tight', system-ui, sans-serif; color: #f4ece4; -webkit-font-smoothing: antialiased; } .L { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; } .A { position: absolute; } .sc { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; display: none; } .mono { font-family: Consolas, 'Cascadia Mono', monospace; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .serif { font-family: 'Bodoni MT Condensed', 'Bodoni MT', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; } /* gc: the dark-glass card every UI mock sits on (tilt it with show()'s base) */ .gc { background: linear-gradient(160deg, #241c18 0%, #16110f 100%); border: 1.5px solid rgba(255, 255, 255, 0.09); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); color: #f4ece4; overflow: hidden; } .gc .mono { color: #8f8379; } /* tg: a small mono skill tag; .hot = orange */ .tg { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; background: rgba(28, 22, 19, 0.92); border: 1.5px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 9px 15px; font: 700 20px Consolas, monospace; color: #a99c90; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); } .tg i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #6a5f57; } .tg.hot { background: rgba(110, 48, 20, 0.85); border-color: rgba(239, 122, 60, 0.7); color: #ffd9c2; } .tg.hot i { background: #ef7a3c; box-shadow: 0 0 8px #ef7a3c; } /* ghost: the giant outlined word behind the caption */ .ghost { font: 900 250px 'Inter Tight', sans-serif; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 2px rgba(255, 150, 100, 0.13); text-transform: uppercase; line-height: 1; } /* big numbers */ .gold { font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(180deg, #fff3b0 0%, #ffd23f 45%, #f29a12 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 190, 40, 0.75)) drop-shadow(0 6px 0 #9a5208); } .chrome { font-weight: 900; letter-spacing: -0.05em; color: #f6f1ec; text-shadow: 0 2px 0 #cfc6bf, 0 4px 0 #b9aea6, 0 6px 0 #a2958c, 0 8px 0 #8a7c73, 0 10px 0 #72645b, 0 24px 40px rgba(0, 0, 0, 0.7); } /* captions: the active-word pill is a mask over a second copy of the line */ #cap > .A { line-height: 0; font-size: 0; } #cap .cw { display: inline-block; position: relative; z-index: 2; white-space: pre; padding: 0 10px; } #cap .box { position: absolute; z-index: 1; border-radius: 12px; } ``` ### `engine.js` ```js // engine.js — the Chibi engine (frozen: a video never edits this file; it writes its own scenes.js). // After @jako.frames' "find-skills" reel: a shaded, glowing chibi narrator on a warm dark stage with a perspective floor // grid, a mono chapter bar ("● 03 / 11 — PRICE" + a progress line), tilted dark-glass UI cards above the character, // mid-screen word-by-word captions (the spoken word in an orange pill that hops word to word, key words in orange serif // italic, unspoken words dim) over a giant outlined ghost word, a camera that drifts and pushes in, light sweeps between // chapters, white-outs, and a synthesized sound kit (sfx/). Acts recolour the stage: warm (base) · blue · red · spot. // The chibi walks (legs swing, footsteps), hops (squash and stretch, spring), looks left/right, blinks, lip-syncs on the // spoken words, changes pose and face on cue, and flings his shades off or catches them back on. // edit.html?dir=