elanous 0.2.0 → 0.2.5

package/skills/explainer-video/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: explainer-video
+description: Make a narrated «N things at once» explainer video from a list of facts — a script in a fixed grammar, word-timed Korean or English voice-over (ElevenLabs), line-art diagrams that advance one step per spoken line, and a checked HyperFrames render. Use when someone asks to summarise a release, an event or a list of changes as a short explainer video.
+requires: []
+---
+
+# Explainer video
+
+You turn a list of facts into one continuous explainer: a header with progress dots, a black card before each chapter, a line-art diagram on the left that moves one step per spoken line, and on the right the chapter number, title, subtitle, a short rule and a one-line caption whose keywords light up **at the moment they are spoken**. A progress bar runs along the bottom.
+
+`$SKILL` is this folder. Work in a project folder of your own (never inside `$SKILL`).
+
+```
+<project>/script.json ─▶ bun $SKILL/engine/vo.ts ─▶ node $SKILL/engine/build.mjs ─▶ <project>/hf/ ─▶ hyperframes check · snapshot · render ─▶ QC
+```
+
+## 1. Write `script.json`
+
+Copy `examples/elanous-0.2.5/script.json` and replace the content. Shape:
+
+- `title`, `voice` (`id`, `model`), `sources` (where every claim comes from).
+- `intro.beats`, `chapters[] { title, sub, diagram, beats[] }`, `outro { beats, cta { line, links } }`.
+- A beat is `{ vo, cap, hl? }`:
+  - `vo` is what is **spoken**. Write names the voice can't read in the way it should say them (`plugin add` → «플러그인 애드»).
+  - `cap` is what is **shown**. Wrap keywords in `**…**`.
+  - `hl` maps a shown keyword to the spoken word that lights it: `[["elanous-basics", "베이직스"]]`. When omitted, the keyword's first word is looked up in `vo`.
+- `diagram` is one of `mission`, `terminal`, `nodes`, `keys` or `approve`. The intro always uses `agenda` and the outro uses `summary`.
+
+The grammar of a chapter (take it from the reference, don't improvise):
+
+1. **Name it** — «N번째는 X입니다».
+2. **Say it plainly** — one line on what it is.
+3. **Show one concrete case** — «예를 들어 …», or the real first run.
+4. **Contrast** — «(before) … 였다면, (now) …».
+
+The outro gives one line that sums everything up, then the CTA.
+
+⛔ Every claim must trace to a merged change or a measured run, listed in `sources`. Don't write «fully autonomous», dates you can't promise, or comparisons (`docs/marketing/GUIDE-launch-tone-and-banned-claims-*`).
+
+## 2. Voice — `bun $SKILL/engine/vo.ts <project>/script.json`
+
+- Makes one `/with-timestamps` call per beat and writes `source/vo/<key>.mp3` and `<key>.json`, where the JSON holds per-character times.
+- A beat whose text hash is unchanged is skipped, so you can edit one line and re-run.
+- The key comes from `ELEVENLABS_API_KEY`, which the plugin connector sets (`elanous plugin credentials video-explainer`). Never print it.
+
+## 3. Compose — `node $SKILL/engine/build.mjs <project>/script.json`
+
+- **Timing comes from the voice, not from guesses:**
+  - a beat lasts its speech plus 0.45 s;
+  - the last beat of a chapter gets another 0.8 s;
+  - a chapter card lasts 1.8 s;
+  - the CTA lasts 4.5 s.
+- **Diagram steps** start at their beat.
+- **Keywords** turn red at the spoken character time.
+- **Audio**: each beat is its own `<audio>` clip; the renderer mixes them.
+- **Assets**: fonts (Pretendard, Geist Mono; OFL) and GSAP are fetched once into `EXPLAINER_CACHE` (default `~/.cache/elanous-explainer`).
+- **Output**: `<project>/hf/` (a HyperFrames project) and `<project>/timeline.json`.
+
+## 4. Check, look, render
+
+```bash
+cd <project>/hf
+npx hyperframes check                       # must pass: 0 errors (layout · contrast · lint)
+npx hyperframes snapshot --no-end --at <one time per chapter> -o ../snap   # look at the contact sheet yourself
+npx hyperframes render --fps 30 --output ../out/<name>-16x9.mp4
+```
+
+If something wraps, overlaps or is off-frame, fix the component in `build.mjs` and rebuild. Don't patch `hf/index.html` by hand — it is regenerated.
+
+## 5. QC before you hand it over
+
+- **Speech equals script**: transcribe the render back (`whisper … --language ko`) and compare with the joined `vo` text. Anything under about 0.97 means a word was misread. Re-write that beat's `vo` and re-run step 2 (only that beat is regenerated).
+- **Loudness**: integrated about −14 LUFS, true peak ≤ −1 dBTP (`ffmpeg -af loudnorm=print_format=summary`).
+- **Side by side**: if there is a reference video, put matching frames next to each other and check that it reads in the same grammar.
+- **Before anything goes public**: run a full 1 fps OCR for private names, home paths, accounts and device names. Publishing is a human decision.
+
+## Look — Elanvital CI only
+
+The reference supplies the **grammar** (components and staging), never its colours or artwork.
+
+- **Ground**: Deepsea Blu `#1D2751`.
+- **Accent**: **Icarus Red `#E95047`**, the only accent.
+- **Chapter cards and CTA**: Real Black.
+- **Text**: `#F2F1EE`.
+- **Motif**: the V6 «엘랑 소용돌이» mark (`engine/brand/`), used in three places — a slow, faint rotation behind the scene, the header, and the chapter cards.
+
+Why these choices, what the reference does, and what we can and cannot reproduce: `내부 문서 `RESEARCH-explainer-video-reference-decomposition-2026-09-30``.
+
+## Graph
+
+`graphs/video/explainer-line.yaml`:
+
+- **Flow**: script → vo → build → render (the existing `hyperframes-render` recipe) → qc.
+- **Edges back**:
+  - layout fault → build;
+  - speech mismatch → vo;
+  - bad script → script;
+  - public release → needs-human.
+- **Not coded yet**: the `explainer-*` recipes. Until they are, you run these steps from this skill.

package/skills/explainer-video/engine/brand/elanous-mark-on-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="150 150 724 724"><path d="M842 512 L838.6 517.2 L835.4 522.4 L832.2 527.5 L828.9 532.5 L825.7 537.4 L822.4 542.2 L819 547 L815.7 551.6 L812.2 556.1 L808.8 560.5 L805.3 564.8 L801.7 569 L798.2 573.1 L794.5 577.1 L790.9 581 L787.2 584.8 L783.5 588.5 L779.7 592.1 L776 595.6 L772.2 599 L768.4 602.3 L764.5 605.5 L760.7 608.6 L756.8 611.6 L752.9 614.5 L749 617.4 L745.1 620.1 L741.2 622.7 L737.3 625.2 L733.4 627.7 L729.5 630 L725.6 632.3 L721.7 634.5 L717.8 636.6 L713.9 638.6 L710 640.5 L706.1 642.3 L702.2 644.1 L698.3 645.8 L694.5 647.4 L690.7 648.9 L686.9 650.3 L683.1 651.7 L679.3 653 L675.5 654.2 L671.8 655.4 L668.1 656.5 L664.4 657.5 L660.7 658.5 L657.1 659.3 L653.5 660.2 L649.9 661 L646.3 661.7 L642.8 662.3 L639.3 662.9 L635.8 663.5 L632.4 664 L629 664.4 L625.6 664.8 L622.2 665.2 L618.9 665.5 L615.6 665.7 L612.4 665.9 L609.1 666.1 L605.9 666.2 L602.8 666.3 L599.6 666.4 L596.5 666.4 L593.4 666.4 L590.4 666.3 L587.4 666.2 L584.4 666.1 L581.4 666 L578.5 665.8 L575.6 665.6 L572.7 665.3 L569.9 665.1 L567 664.8 L564.2 664.5 L561.5 664.1 L558.7 663.7 L556 663.4 L553.3 663 L550.6 662.5 L548 662.1 L545.4 661.6 L542.8 661.1 L540.2 660.6 L537.6 660.1 L535.1 659.5 L532.5 658.9 L530 658.3 L527.5 657.7 L525.1 657.1 L522.6 656.5 L520.2 655.8 L517.7 655.1 L515.3 654.4 L512.9 653.7 L510.5 653 L508.2 652.2 L505.8 651.4 L503.5 650.6 L501.1 649.8 L498.8 649 L496.5 648.1 L494.2 647.3 L491.9 646.4 L489.6 645.5 L487.3 644.5 L485.1 643.6 L482.8 642.6 L480.6 641.6 L478.3 640.6 L476.1 639.5 L473.9 638.4 L471.7 637.3 L469.5 636.2 L467.3 635 L465.1 633.9 L462.9 632.6 L460.7 631.4 L458.6 630.1 L456.4 628.8 L454.3 627.5 L452.2 626.1 L450 624.7 L447.9 623.3 L445.8 621.9 L443.8 620.4 L441.7 618.8 L439.6 617.3 L437.6 615.7 L435.6 614 L433.6 612.3 L431.6 610.6 L429.6 608.9 L427.6 607.1 L425.7 605.2 L423.8 603.4 L421.9 601.4 L420 599.5 L418.1 597.5 L416.3 595.4 L414.5 593.3 L412.7 591.2 L410.9 589 L409.2 586.8 L407.5 584.6 L405.8 582.3 L404.1 579.9 L402.5 577.5 L400.9 575.1 L399.3 572.6 L397.8 570 L396.2 567.4 L394.7 564.8 L393.2 562.1 L391.6 559.3 L389.8 556.5 L389.8 556.5 L387.3 558.7 L385.1 561.2 L383 563.7 L381.1 566.4 L379.3 569.1 L377.5 572 L375.8 574.9 L374.3 577.9 L372.8 581.1 L371.4 584.2 L370.1 587.5 L368.9 590.9 L367.8 594.3 L366.8 597.7 L365.8 601.3 L365 604.9 L364.3 608.6 L363.7 612.3 L363.2 616.1 L362.8 619.9 L362.5 623.8 L362.3 627.7 L362.2 631.7 L362.3 635.7 L362.4 639.7 L362.7 643.8 L363.1 647.9 L363.6 652 L364.2 656.1 L364.9 660.3 L365.8 664.4 L366.7 668.6 L367.8 672.8 L369 677 L370.4 681.1 L371.8 685.3 L373.4 689.5 L375.1 693.6 L377 697.8 L378.9 701.9 L381 706 L383.2 710.1 L385.5 714.1 L387.9 718.1 L390.5 722.1 L393.1 726 L395.9 729.9 L398.8 733.7 L401.8 737.5 L405 741.3 L408.2 744.9 L411.6 748.5 L415 752.1 L418.6 755.6 L422.3 759 L426.1 762.3 L430 765.5 L434 768.7 L438.1 771.8 L442.3 774.8 L446.5 777.7 L450.9 780.5 L455.4 783.3 L459.9 785.9 L464.6 788.4 L469.3 790.9 L474.1 793.2 L479 795.4 L483.9 797.5 L488.9 799.5 L494 801.4 L499.2 803.1 L504.4 804.8 L509.7 806.3 L515 807.7 L520.4 809 L525.8 810.2 L531.3 811.2 L536.8 812.1 L542.4 812.9 L548 813.5 L553.6 814.1 L559.3 814.5 L565 814.7 L570.7 814.8 L576.4 814.8 L582.2 814.7 L587.9 814.4 L593.7 814 L599.5 813.4 L605.3 812.8 L611 811.9 L616.8 811 L622.6 809.9 L628.3 808.7 L634 807.3 L639.8 805.8 L645.5 804.2 L651.1 802.4 L656.8 800.5 L662.4 798.5 L667.9 796.3 L673.5 794 L678.9 791.6 L684.4 789.1 L689.8 786.4 L695.1 783.6 L700.4 780.7 L705.6 777.6 L710.8 774.5 L715.9 771.2 L720.9 767.8 L725.9 764.3 L730.8 760.7 L735.6 756.9 L740.4 753.1 L745 749.1 L749.6 745 L754.1 740.9 L758.5 736.6 L762.8 732.2 L767 727.8 L771.2 723.2 L775.2 718.5 L779.1 713.8 L782.9 709 L786.7 704.1 L790.3 699.1 L793.8 694 L797.2 688.8 L800.5 683.6 L803.7 678.3 L806.8 672.9 L809.7 667.5 L812.6 662 L815.3 656.4 L817.9 650.8 L820.4 645.1 L822.8 639.4 L825 633.6 L827.2 627.8 L829.2 621.9 L831 616 L832.8 610.1 L834.4 604.1 L835.9 598.1 L837.3 592.1 L838.5 586 L839.6 579.9 L840.6 573.8 L841.4 567.7 L842.1 561.5 L842.7 555.4 L843.1 549.2 L843.4 543 L843.5 536.8 L843.5 530.6 L843.2 524.4 L842.8 518.2 L842 512.0Z" fill="#F2F1EE"/><path d="M347 797.8 L344.2 792.2 L341.3 786.8 L338.5 781.5 L335.8 776.2 L333.1 770.9 L330.6 765.7 L328.2 760.4 L325.9 755.2 L323.7 750 L321.6 744.8 L319.6 739.6 L317.8 734.4 L316 729.3 L314.4 724.1 L312.8 719 L311.4 713.9 L310 708.9 L308.8 703.8 L307.6 698.8 L306.6 693.8 L305.6 688.9 L304.8 683.9 L304 679 L303.3 674.2 L302.7 669.4 L302.2 664.6 L301.8 659.9 L301.5 655.2 L301.3 650.5 L301.1 645.9 L301 641.3 L301 636.8 L301.1 632.3 L301.2 627.9 L301.5 623.5 L301.7 619.2 L302.1 614.9 L302.5 610.7 L303 606.5 L303.5 602.4 L304.1 598.3 L304.8 594.3 L305.5 590.3 L306.2 586.4 L307.1 582.5 L307.9 578.7 L308.8 574.9 L309.8 571.2 L310.8 567.6 L311.8 564 L312.9 560.4 L314.1 556.9 L315.2 553.5 L316.4 550.1 L317.6 546.8 L318.9 543.5 L320.2 540.3 L321.5 537.1 L322.9 534 L324.2 530.9 L325.6 527.9 L327.1 524.9 L328.5 522 L330 519.1 L331.5 516.2 L333 513.4 L334.5 510.7 L336 508 L337.6 505.3 L339.2 502.7 L340.7 500.2 L342.3 497.6 L344 495.1 L345.6 492.7 L347.2 490.3 L348.9 487.9 L350.5 485.6 L352.2 483.3 L353.8 481 L355.5 478.8 L357.2 476.6 L358.9 474.4 L360.6 472.3 L362.3 470.2 L364 468.1 L365.8 466.1 L367.5 464.1 L369.2 462.1 L371 460.2 L372.7 458.2 L374.5 456.3 L376.3 454.4 L378 452.6 L379.8 450.8 L381.6 449 L383.4 447.2 L385.2 445.4 L387 443.7 L388.8 442 L390.7 440.3 L392.5 438.6 L394.3 436.9 L396.2 435.3 L398.1 433.7 L400 432.1 L401.8 430.5 L403.8 428.9 L405.7 427.4 L407.6 425.9 L409.6 424.4 L411.5 422.9 L413.5 421.4 L415.5 420 L417.5 418.6 L419.5 417.2 L421.6 415.8 L423.6 414.4 L425.7 413.1 L427.8 411.7 L429.9 410.4 L432.1 409.2 L434.2 407.9 L436.4 406.7 L438.6 405.5 L440.8 404.3 L443.1 403.1 L445.3 402 L447.6 400.9 L449.9 399.8 L452.3 398.7 L454.6 397.7 L457 396.7 L459.4 395.7 L461.9 394.8 L464.3 393.9 L466.8 393 L469.3 392.2 L471.9 391.4 L474.4 390.6 L477 389.9 L479.6 389.2 L482.3 388.6 L484.9 388 L487.6 387.4 L490.3 386.9 L493.1 386.4 L495.8 385.9 L498.6 385.5 L501.4 385.2 L504.3 384.9 L507.1 384.6 L510 384.4 L512.9 384.3 L515.9 384.1 L518.9 384.1 L521.9 384 L524.9 384 L528 384.1 L531.2 384.1 L534.6 384 L534.6 384 L533.9 380.6 L532.9 377.5 L531.7 374.5 L530.4 371.4 L528.9 368.5 L527.3 365.5 L525.6 362.6 L523.8 359.7 L521.8 356.9 L519.7 354.1 L517.6 351.3 L515.3 348.6 L512.9 346 L510.4 343.3 L507.8 340.8 L505 338.3 L502.2 335.8 L499.3 333.4 L496.3 331.1 L493.2 328.8 L489.9 326.6 L486.6 324.5 L483.3 322.4 L479.8 320.5 L476.2 318.6 L472.5 316.8 L468.8 315.1 L465 313.5 L461.1 311.9 L457.1 310.5 L453.1 309.1 L449 307.9 L444.8 306.8 L440.6 305.7 L436.3 304.8 L432 304 L427.6 303.2 L423.1 302.6 L418.6 302.2 L414.1 301.8 L409.5 301.5 L404.9 301.4 L400.2 301.4 L395.5 301.5 L390.8 301.7 L386.1 302 L381.3 302.5 L376.6 303.1 L371.8 303.8 L367 304.7 L362.2 305.7 L357.4 306.8 L352.6 308 L347.8 309.4 L343 310.8 L338.2 312.5 L333.4 314.2 L328.7 316.1 L324 318.1 L319.3 320.2 L314.6 322.4 L310 324.8 L305.4 327.3 L300.8 330 L296.3 332.7 L291.9 335.6 L287.4 338.6 L283.1 341.7 L278.8 344.9 L274.5 348.3 L270.4 351.7 L266.3 355.3 L262.2 359 L258.3 362.8 L254.4 366.7 L250.6 370.8 L246.9 374.9 L243.2 379.1 L239.7 383.5 L236.2 387.9 L232.9 392.4 L229.6 397 L226.4 401.7 L223.3 406.5 L220.4 411.4 L217.5 416.4 L214.8 421.4 L212.1 426.6 L209.6 431.8 L207.2 437 L204.9 442.4 L202.7 447.8 L200.7 453.3 L198.7 458.8 L196.9 464.4 L195.2 470 L193.7 475.7 L192.2 481.5 L190.9 487.3 L189.8 493.1 L188.7 499 L187.8 504.9 L187 510.8 L186.4 516.8 L185.9 522.7 L185.5 528.8 L185.2 534.8 L185.1 540.8 L185.1 546.9 L185.3 552.9 L185.6 559 L186 565 L186.6 571.1 L187.3 577.2 L188.1 583.2 L189.1 589.2 L190.2 595.2 L191.4 601.2 L192.8 607.2 L194.2 613.2 L195.9 619.1 L197.6 625 L199.5 630.8 L201.5 636.7 L203.7 642.4 L205.9 648.2 L208.3 653.8 L210.9 659.5 L213.5 665.1 L216.3 670.6 L219.1 676.1 L222.1 681.5 L225.2 686.8 L228.5 692.1 L231.8 697.3 L235.3 702.5 L238.8 707.5 L242.5 712.5 L246.3 717.5 L250.1 722.3 L254.1 727 L258.2 731.7 L262.4 736.3 L266.7 740.8 L271 745.2 L275.5 749.5 L280 753.7 L284.7 757.8 L289.4 761.8 L294.2 765.7 L299.1 769.4 L304.1 773.1 L309.1 776.7 L314.3 780.1 L319.5 783.5 L324.8 786.7 L330.1 789.7 L335.6 792.6 L341.2 795.4 L347 797.8Z" fill="#F2F1EE"/><path d="M347 226.2 L353.2 226.6 L359.3 226.8 L365.4 227 L371.3 227.3 L377.2 227.6 L383 228.1 L388.7 228.6 L394.4 229.2 L400 229.9 L405.6 230.7 L411.1 231.6 L416.5 232.6 L421.8 233.6 L427.1 234.8 L432.3 236 L437.5 237.3 L442.5 238.6 L447.5 240.1 L452.4 241.6 L457.3 243.2 L462 244.8 L466.7 246.6 L471.3 248.3 L475.9 250.2 L480.3 252.1 L484.7 254 L489 256.1 L493.3 258.1 L497.4 260.3 L501.5 262.4 L505.5 264.6 L509.4 266.9 L513.2 269.2 L517 271.5 L520.7 273.9 L524.3 276.3 L527.8 278.8 L531.3 281.2 L534.7 283.7 L538 286.3 L541.2 288.8 L544.4 291.4 L547.5 294 L550.5 296.6 L553.4 299.3 L556.3 301.9 L559.1 304.6 L561.8 307.3 L564.5 310 L567.1 312.7 L569.6 315.4 L572 318.1 L574.4 320.8 L576.8 323.6 L579.1 326.3 L581.3 329 L583.4 331.7 L585.5 334.5 L587.5 337.2 L589.5 339.9 L591.4 342.7 L593.3 345.4 L595.1 348.1 L596.9 350.8 L598.6 353.5 L600.3 356.2 L601.9 358.9 L603.4 361.6 L605 364.3 L606.4 367 L607.9 369.6 L609.3 372.3 L610.6 374.9 L611.9 377.5 L613.2 380.1 L614.4 382.8 L615.6 385.4 L616.8 387.9 L617.9 390.5 L619 393.1 L620.1 395.7 L621.1 398.2 L622.1 400.7 L623 403.3 L624 405.8 L624.9 408.3 L625.7 410.8 L626.6 413.3 L627.4 415.8 L628.2 418.3 L629 420.8 L629.7 423.2 L630.4 425.7 L631.1 428.1 L631.8 430.6 L632.4 433 L633.1 435.5 L633.7 437.9 L634.2 440.3 L634.8 442.8 L635.3 445.2 L635.8 447.6 L636.3 450.1 L636.8 452.5 L637.2 454.9 L637.7 457.4 L638.1 459.8 L638.4 462.2 L638.8 464.7 L639.1 467.1 L639.4 469.5 L639.7 472 L639.9 474.4 L640.2 476.9 L640.4 479.3 L640.5 481.8 L640.7 484.3 L640.8 486.7 L640.9 489.2 L641 491.7 L641 494.2 L641 496.7 L641 499.2 L641 501.7 L640.9 504.2 L640.8 506.7 L640.6 509.3 L640.4 511.8 L640.2 514.4 L640 516.9 L639.7 519.5 L639.3 522 L639 524.6 L638.6 527.2 L638.1 529.8 L637.6 532.4 L637.1 534.9 L636.5 537.5 L635.9 540.1 L635.2 542.7 L634.5 545.4 L633.8 548 L633 550.6 L632.1 553.2 L631.2 555.8 L630.3 558.4 L629.3 561 L628.2 563.6 L627.1 566.2 L625.9 568.9 L624.7 571.5 L623.5 574.1 L622.2 576.7 L620.8 579.3 L619.4 581.9 L617.9 584.5 L616.4 587.2 L614.8 589.8 L613.2 592.6 L611.6 595.6 L611.6 595.6 L614.8 596.6 L618 597.3 L621.3 597.8 L624.5 598.2 L627.9 598.4 L631.2 598.5 L634.6 598.5 L638 598.3 L641.4 598 L644.9 597.6 L648.3 597.1 L651.8 596.5 L655.4 595.8 L658.9 594.9 L662.4 593.9 L665.9 592.8 L669.5 591.6 L673 590.3 L676.5 588.8 L680.1 587.3 L683.6 585.6 L687.1 583.8 L690.5 581.9 L694 579.8 L697.4 577.7 L700.8 575.4 L704.1 573.1 L707.4 570.6 L710.7 568 L713.9 565.3 L717.1 562.4 L720.3 559.5 L723.3 556.5 L726.3 553.3 L729.3 550.1 L732.2 546.7 L735 543.3 L737.7 539.7 L740.4 536.1 L743 532.3 L745.5 528.5 L748 524.5 L750.3 520.5 L752.6 516.4 L754.7 512.2 L756.8 507.9 L758.7 503.6 L760.6 499.1 L762.4 494.6 L764.1 490.1 L765.6 485.4 L767.1 480.7 L768.4 475.9 L769.6 471.1 L770.7 466.2 L771.7 461.2 L772.6 456.3 L773.3 451.2 L774 446.1 L774.5 441 L774.9 435.8 L775.1 430.6 L775.2 425.4 L775.2 420.1 L775.1 414.9 L774.9 409.6 L774.5 404.2 L773.9 398.9 L773.3 393.6 L772.5 388.2 L771.6 382.9 L770.5 377.5 L769.4 372.2 L768.1 366.9 L766.6 361.5 L765 356.2 L763.3 350.9 L761.5 345.7 L759.5 340.4 L757.4 335.2 L755.1 330 L752.8 324.9 L750.3 319.8 L747.7 314.8 L744.9 309.7 L742 304.8 L739 299.9 L735.9 295 L732.7 290.2 L729.3 285.5 L725.8 280.9 L722.2 276.3 L718.5 271.7 L714.7 267.3 L710.8 262.9 L706.7 258.7 L702.6 254.5 L698.3 250.3 L693.9 246.3 L689.5 242.4 L684.9 238.5 L680.3 234.8 L675.5 231.2 L670.7 227.6 L665.8 224.2 L660.8 220.8 L655.7 217.6 L650.5 214.5 L645.2 211.5 L639.9 208.6 L634.5 205.8 L629.1 203.2 L623.5 200.6 L617.9 198.2 L612.3 195.9 L606.6 193.7 L600.8 191.7 L595 189.7 L589.2 187.9 L583.3 186.2 L577.3 184.7 L571.3 183.3 L565.3 182 L559.3 180.8 L553.2 179.8 L547.1 178.9 L541 178.1 L534.8 177.5 L528.7 177 L522.5 176.6 L516.3 176.3 L510.2 176.2 L504 176.2 L497.8 176.4 L491.6 176.7 L485.4 177.1 L479.2 177.7 L473.1 178.3 L466.9 179.1 L460.8 180.1 L454.7 181.2 L448.6 182.4 L442.6 183.7 L436.6 185.1 L430.6 186.7 L424.6 188.4 L418.7 190.3 L412.8 192.2 L407 194.3 L401.2 196.6 L395.5 198.9 L389.8 201.4 L384.2 204 L378.7 206.7 L373.2 209.5 L367.7 212.5 L362.4 215.6 L357.1 218.9 L352 222.4 L347 226.2Z" fill="#F2F1EE"/><circle cx="512" cy="512" r="62" fill="#E95047"/></svg>

package/skills/explainer-video/engine/build.mjs

@@ -0,0 +1,431 @@
+// Explainer generator — script.json ⊕ ElevenLabs alignment → one HyperFrames composition (hf/index.html).
+// Grammar (from the reference «N가지 한 번에 정리» explainer): header progress dots · black chapter cards ·
+// left line-art diagram that advances one step per VO beat · right column (chapter number · title · sub · rule · caption)
+// · keywords lit at the exact spoken word · bottom progress bar.
+// Look = Elanvital CI only: Deepsea Blu ground · Icarus Red as the single accent · Real Black cards · CI swirl motif.
+// Usage: node build.mjs <project>/script.json   (VO first: bun vo.ts <project>/script.json)
+// Output: <project>/hf/ (a HyperFrames project) ⊕ <project>/timeline.json.
+// Fonts (Pretendard · Geist Mono, OFL) and GSAP are fetched once into a cache, never vendored:
+//   EXPLAINER_CACHE (default ~/.cache/elanous-explainer). The mark is engine/brand/elanous-mark-on-dark.svg.
+import { readFileSync, writeFileSync, mkdirSync, copyFileSync, existsSync } from "node:fs";
+import { homedir } from "node:os";
+import { join, dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const scriptPath = resolve(process.argv[2] ?? "script.json");
+const proj = dirname(scriptPath);
+const S = JSON.parse(readFileSync(scriptPath, "utf8"));
+const out = join(proj, "hf");
+const W = 1920, H = 1080, FPS = 30;
+
+// ── palette (Elanvital CI · RCBC guide) ─────────────────────────────────────────
+const C = { deep: "#1D2751", deep2: "#141C3D", black: "#000000", ink: "#F2F1EE", red: "#E95047", muted: "rgba(242,241,238,0.62)", line: "rgba(242,241,238,0.86)", faint: "rgba(242,241,238,0.10)" };
+
+// ── mark (V6 «엘랑 소용돌이», docs/brand/icon) ───────────────────────────────────
+const markSrc = readFileSync(process.env.ELANOUS_MARK ?? join(here, "brand", "elanous-mark-on-dark.svg"), "utf8");
+const markPaths = [...markSrc.matchAll(/<path d="([^"]*)"/g)].map((m) => m[1]);
+const mark = (size, blade = C.ink, dot = C.red, cls = "") =>
+  `<svg class="${cls}" width="${size}" height="${size}" viewBox="150 150 724 724">${markPaths.map((d) => `<path d="${d}" fill="${blade}"/>`).join("")}<circle cx="512" cy="512" r="62" fill="${dot}"/></svg>`;
+
+// ── timing from alignment ───────────────────────────────────────────────────────
+const vo = (key) => JSON.parse(readFileSync(join(proj, "source", "vo", `${key}.json`), "utf8"));
+const speech = (key) => vo(key).alignment.character_end_times_seconds.at(-1);
+const GAP = 0.45, CH_TAIL = 0.8, CARD = 1.8, INTRO_LEAD = 0.5, INTRO_TAIL = 1.6, CTA = 4.5;
+
+let t = 0;
+const segs = []; // {kind, ...}
+const beatsOf = (list, prefix, tail) =>
+  list.map((b, i) => {
+    const key = `${prefix}-${i}`, sp = speech(key);
+    const start = t, dur = sp + GAP + (i === list.length - 1 ? tail : 0);
+    t += dur;
+    return { ...b, key, start, dur, sp };
+  });
+t = INTRO_LEAD;
+const intro = { kind: "intro", start: 0, beats: beatsOf(S.intro.beats, "i", INTRO_TAIL) };
+intro.beats[0].start = INTRO_LEAD; intro.dur = t;
+segs.push(intro);
+S.chapters.forEach((ch, ci) => {
+  const card = { kind: "card", n: ci + 1, ch, start: t, dur: CARD };
+  t += CARD;
+  const seg = { kind: "chapter", n: ci + 1, ch, start: t, beats: beatsOf(ch.beats, `c${ci + 1}`, CH_TAIL) };
+  seg.dur = t - seg.start;
+  segs.push(card, seg);
+});
+const outro = { kind: "outro", start: t, beats: beatsOf(S.outro.beats, "o", CH_TAIL) };
+outro.dur = t - outro.start; segs.push(outro);
+const cta = { kind: "cta", start: t, dur: CTA }; t += CTA; segs.push(cta);
+const TOTAL = +t.toFixed(3);
+
+// ── helpers ─────────────────────────────────────────────────────────────────────
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const f = (x) => +x.toFixed(3);
+let uid = 0;
+const id = (p) => `${p}${++uid}`;
+const typed = (text, cls = "") => `<span class="typed ${cls}">${[...text].map((c) => `<span class="ch">${esc(c)}</span>`).join("")}</span>`;
+const tw = []; // JS tween lines appended to the timeline
+const at = (sel, vars, time) => tw.push(`tl.to(${JSON.stringify(sel)}, ${JSON.stringify(vars)}, ${f(time)});`);
+const from = (sel, fromV, toV, time) => tw.push(`tl.fromTo(${JSON.stringify(sel)}, ${JSON.stringify(fromV)}, ${JSON.stringify(toV)}, ${f(time)});`);
+const pop = (sel, time, stagger = 0) => from(sel, { opacity: 0, scale: 0.86, y: 14 }, { opacity: 1, scale: 1, y: 0, duration: 0.42, ease: "back.out(1.8)", stagger }, time);
+const rise = (sel, time, stagger = 0) => from(sel, { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.5, ease: "power3.out", stagger }, time);
+const typeIn = (sel, time, dur) => tw.push(`tl.to(${JSON.stringify(sel + " .ch")}, { opacity: 1, duration: 0.01, stagger: { amount: ${f(dur)} } }, ${f(time)});`);
+const slam = (sel, time) => from(sel, { opacity: 0, scale: 1.9, rotation: -14 }, { opacity: 1, scale: 1, rotation: -8, duration: 0.32, ease: "power4.in" }, time);
+const draw = (sel, time, dur = 0.5) => from(sel, { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: dur, ease: "power2.inOut" }, time);
+const fade = (sel, time, to = 0, dur = 0.35) => at(sel, { opacity: to, duration: dur, ease: "power2.out" }, time);
+const arrow = (x1, y1, x2, y2, cls) =>
+  `<svg class="arr ${cls}" style="left:0;top:0" width="960" height="760" viewBox="0 0 960 760"><path pathLength="1" d="M${x1} ${y1} L${x2} ${y2}" /><path pathLength="1" d="M${x2 - 14} ${y2 - 12} L${x2} ${y2} L${x2 - 14} ${y2 + 12}" transform="rotate(${(Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI} ${x2} ${y2})"/></svg>`;
+const B = (seg, i) => seg.beats[Math.min(i, seg.beats.length - 1)].start;
+
+// ── diagrams: html + one step per beat ──────────────────────────────────────────
+const DIAGRAMS = {
+  mission(seg, p) {
+    const b = (i) => B(seg, i);
+    const html = `
+      <div class="panel ${p}win" style="left:0;top:0;width:960px;height:330px">
+        <div class="bar"><i></i><i></i><i></i><span>코딩 에이전트</span></div>
+        <div class="bubble ${p}bub" style="right:34px;top:92px">${typed("미션을 보낸다", `${p}t1`)}</div>
+        <div class="sys ${p}sys" style="left:34px;top:196px">보내기 전에 — 무엇이 모자라나?</div>
+        <div class="mono ${p}cmd" style="left:34px;top:256px">${typed("/plugins → install elanous-basics", `${p}t2`)}</div>
+      </div>
+      <div class="row ${p}pills" style="left:0;top:380px">
+        <span class="pill ${p}pl">도구 ✓</span><span class="pill ${p}pl">모델 ✓</span><span class="pill red ${p}pl">플러그인 ?</span>
+      </div>
+      <div class="panel ${p}card" style="left:0;top:500px;width:430px;height:190px">
+        <div class="lbl">공식 마켓</div><div class="mono big" style="left:30px;top:74px">elanous-basics</div><div class="ok" style="left:30px;top:128px">서명된 색인 ✓</div>
+      </div>
+      ${arrow(440, 590, 700, 340, `${p}ar`)}
+      <div class="stamp ${p}st" style="left:560px;top:540px">설치됨</div>
+      <div class="contrast ${p}cx" style="left:0;top:520px">
+        <span class="old ${p}old">사람이 챙긴다<i class="strike ${p}sk"></i></span><span class="to">→</span><span class="pill red solid ${p}new">에이전트가 먼저</span>
+      </div>`;
+    typeIn(`.${p}t1`, b(0) + 0.3, 0.9);
+    rise(`.${p}sys`, b(1) + 0.1);
+    pop(`.${p}pl`, b(1) + 0.9, 0.22);
+    rise(`.${p}card`, b(2) + 0.2);
+    draw(`.${p}ar path`, b(2) + 1.6, 0.6);
+    typeIn(`.${p}t2`, b(2) + 2.4, 1.6);
+    slam(`.${p}st`, b(2) + 5.2);
+    fade(`.${p}card, .${p}ar, .${p}st`, b(3) - 0.1);
+    rise(`.${p}old`, b(3) + 0.2);
+    from(`.${p}sk`, { scaleX: 0 }, { scaleX: 1, duration: 0.4, ease: "power2.inOut" }, b(3) + 1.0);
+    pop(`.${p}new`, b(3) + 1.8);
+    return html;
+  },
+  terminal(seg, p) {
+    const b = (i) => B(seg, i);
+    const html = `
+      <div class="panel ${p}term" style="left:0;top:40px;width:960px;height:520px">
+        <div class="bar"><i></i><i></i><i></i><span>터미널</span></div>
+        <div class="mono cmdl" style="left:36px;top:110px"><span class="red">$</span> ${typed("elanous plugin add ", `${p}c1`)}<span class="seg ${p}nm">${typed("elanous-basics", `${p}c2`)}<em class="${p}nml">이름</em></span>${typed("@", `${p}c3`)}<span class="seg ${p}mk">${typed("elanous", `${p}c4`)}<em class="${p}mkl">마켓</em></span></div>
+        <div class="mono out ${p}o" style="left:36px;top:280px"><span class="red">✓</span> 색인 서명 확인</div>
+        <div class="mono out ${p}o" style="left:36px;top:340px"><span class="red">✓</span> 패키지 해시 확인</div>
+        <div class="mono out ${p}o" style="left:36px;top:400px">설치됨 · elanous-basics</div>
+      </div>
+      <div class="stamp ${p}st" style="left:600px;top:600px">확인 뒤에만</div>`;
+    typeIn(`.${p}c1`, b(0) + 0.3, 0.8);
+    typeIn(`.${p}c2`, b(0) + 1.1, 0.7);
+    typeIn(`.${p}c3`, b(0) + 1.8, 0.05);
+    typeIn(`.${p}c4`, b(0) + 1.9, 0.4);
+    at(`.${p}nm, .${p}mk`, { borderBottomColor: C.red, duration: 0.3 }, b(1) + 0.2);
+    rise(`.${p}nml`, b(1) + 0.3); rise(`.${p}mkl`, b(1) + 0.8);
+    rise(`.${p}o`, b(2) + 0.6, 0.7);
+    slam(`.${p}st`, b(2) + 3.0);
+    return html;
+  },
+  nodes(seg, p) {
+    const b = (i) => B(seg, i);
+    const html = `
+      <div class="node ${p}n1" style="left:0;top:100px">트리거</div>
+      <div class="node empty ${p}slot" style="left:360px;top:100px"></div>
+      <div class="node red ${p}pn" style="left:360px;top:100px">플러그인 노드<small>elanous-basics</small></div>
+      <div class="node ${p}n3" style="left:720px;top:100px">결과</div>
+      ${arrow(240, 160, 352, 160, `${p}a1`)}${arrow(600, 160, 712, 160, `${p}a2`)}
+      <svg class="arr ${p}a3" style="left:0;top:0" width="960" height="760" viewBox="0 0 960 760"><path pathLength="1" d="M480 222 L480 318" /></svg>
+      <div class="panel ${p}form" style="left:180px;top:330px;width:600px;height:390px">
+        <div class="lbl">입력 폼 — 자동 생성</div>
+        <div class="field ${p}fd" style="top:92px"><b>이름</b><span>텍스트</span></div>
+        <div class="field ${p}fd" style="top:186px"><b>개수</b><span>숫자</span></div>
+        <div class="field ${p}fd" style="top:280px"><b>형식</b><span>선택 ▾</span></div>
+      </div>`;
+    pop(`.${p}n1, .${p}slot, .${p}n3`, b(0) + 0.3, 0.2);
+    draw(`.${p}a1 path, .${p}a2 path`, b(0) + 1.1, 0.5);
+    pop(`.${p}pn`, b(1) + 0.3);
+    draw(`.${p}a3 path`, b(2) + 0.2, 0.4);
+    rise(`.${p}form`, b(2) + 0.5);
+    rise(`.${p}fd`, b(2) + 1.1, 0.35);
+    return html;
+  },
+  keys(seg, p) {
+    const b = (i) => B(seg, i);
+    const lock = `<svg width="30" height="34" viewBox="0 0 30 34"><rect x="3" y="14" width="24" height="18" rx="4" fill="none" stroke="currentColor" stroke-width="3"/><path d="M8 14 V9 a7 7 0 0 1 14 0 V14" fill="none" stroke="currentColor" stroke-width="3"/></svg>`;
+    const card = (n, k) => `<div class="kcard ${p}k ${p}k${k}" style="left:${k * 330}px;top:60px">${lock}<b>플러그인 ${n}</b><span class="${p}ks${k}">키 없음</span></div>`;
+    const html = `
+      ${card("A", 0)}${card("B", 1)}${card("C", 2)}
+      <div class="panel ${p}door" style="left:200px;top:430px;width:560px;height:150px">
+        <div class="lbl">키 넣기 ▸ 플러그인 B</div><div class="mono big" style="left:30px;top:74px">${typed("••••••••••••", `${p}pw`)}</div>
+      </div>
+      <div class="token ${p}tok" style="left:455px;top:480px">🔑</div>`;
+    pop(`.${p}k`, b(0) + 0.3, 0.2);
+    rise(`.${p}door`, b(1) + 0.1);
+    typeIn(`.${p}pw`, b(1) + 0.6, 0.8);
+    from(`.${p}tok`, { opacity: 0, x: 0, y: 0 }, { opacity: 1, duration: 0.2 }, b(2) + 0.1);
+    at(`.${p}tok`, { x: 0, y: -300, duration: 0.8, ease: "power2.inOut" }, b(2) + 0.3);
+    fade(`.${p}tok`, b(2) + 1.1, 0, 0.2);
+    at(`.${p}k1`, { borderColor: C.red, color: C.red, duration: 0.25 }, b(2) + 1.1);
+    tw.push(`tl.set(".${p}ks1", { textContent: "키 받음" }, ${f(b(2) + 1.1)});`);
+    at(`.${p}k0, .${p}k2`, { opacity: 0.45, duration: 0.3 }, b(2) + 1.3);
+    return html;
+  },
+  approve(seg, p) {
+    const b = (i) => B(seg, i);
+    const html = `
+      <div class="panel ${p}br" style="left:0;top:20px;width:960px;height:640px">
+        <div class="bar"><i></i><i></i><i></i><span>웹 앱 · 승인</span></div>
+        <div class="lbl" style="top:84px">승인 대기 1</div>
+        <div class="run ${p}run"><b>릴리스 · 공지</b><span class="pill red ${p}wait">사람 승인 대기 ⏸</span></div>
+        <div class="btns ${p}btn"><span class="pill red solid ${p}ok">승인</span><span class="pill">거절</span></div>
+        <div class="cursor ${p}cur"></div>
+      </div>
+      <div class="stamp ${p}st" style="left:560px;top:560px">승인됨</div>`;
+    rise(`.${p}br`, b(0) + 0.2);
+    rise(`.${p}run`, b(1) + 0.2);
+    pop(`.${p}wait`, b(1) + 1.2);
+    pop(`.${p}btn`, b(2) + 0.1);
+    from(`.${p}cur`, { opacity: 0, x: 260, y: 160 }, { opacity: 1, x: 0, y: 0, duration: 0.8, ease: "power2.out" }, b(2) + 0.5);
+    from(`.${p}ok`, { scale: 1 }, { scale: 0.92, duration: 0.08, yoyo: true, repeat: 1 }, b(2) + 1.35);
+    slam(`.${p}st`, b(2) + 1.6);
+    return html;
+  },
+  agenda(seg, p) {
+    const b = (i) => B(seg, i);
+    const html = `<div class="agenda">${S.chapters.map((c, i) => `<div class="acard ${p}ac"><em>${String(i + 1).padStart(2, "0")}</em><b>${esc(c.title)}</b></div>`).join("")}</div>`;
+    pop(`.${p}ac`, b(0) + 1.2, 0.28);
+    return html;
+  },
+  summary(seg, p) {
+    const b = (i) => B(seg, i);
+    const html = `
+      <div class="col" style="left:0;top:80px"><div class="lbl2">에이전트</div>
+        <span class="pill ${p}ag">모자란 것 따지기</span><span class="pill ${p}ag">플러그인 찾기</span><span class="pill ${p}ag">서명·해시 확인 · 설치</span></div>
+      ${arrow(470, 175, 600, 175, `${p}ar`)}
+      <div class="col" style="left:620px;top:80px"><div class="lbl2">사람</div><span class="pill red solid big ${p}hm">승인</span></div>`;
+    rise(`.${p}ag`, b(0) + 0.6, 0.3);
+    draw(`.${p}ar path`, b(1) + 1.8, 0.5);
+    pop(`.${p}hm`, b(1) + 2.6);
+    return html;
+  },
+};
+
+// ── caption with timed highlights ───────────────────────────────────────────────
+function caption(beat, p) {
+  const a = vo(beat.key).alignment;
+  const spoken = a.characters.join("");
+  const map = Object.fromEntries(beat.hl ?? []);
+  let html = "", hot = false;
+  const lights = [];
+  for (const part of beat.cap.split("**")) {
+    if (hot && part) {
+      const k = map[part] ?? part.split(/[ ,·@]/)[0];
+      const i = spoken.indexOf(k);
+      const tt = i >= 0 ? a.character_start_times_seconds[i] : 0.25;
+      const cls = id(`${p}h`);
+      html += `<span class="hl ${cls}">${esc(part)}</span>`;
+      lights.push([cls, beat.start + tt]);
+    } else html += esc(part);
+    hot = !hot;
+  }
+  const cls = id(`${p}cap`);
+  rise(`.${cls}`, beat.start, 0);
+  for (const [c, tt] of lights) at(`.${c}`, { color: C.red, duration: 0.18 }, tt);
+  return `<div class="clip capwrap" data-start="${f(beat.start)}" data-duration="${f(beat.dur)}"><div class="cap ${cls}">${html}</div></div>`;
+}
+
+// ── scenes ──────────────────────────────────────────────────────────────────────
+const N = S.chapters.length;
+const scenes = [], audios = [];
+const beatAudio = (seg) => seg.beats.forEach((bt) => audios.push(`<audio id="vo-${bt.key}" src="assets/vo/${bt.key}.mp3" data-start="${f(bt.start)}" data-duration="${f(bt.sp + 0.05)}" data-track-index="20"></audio>`));
+const rightCol = (seg, num, title, sub, p) => {
+  const html = `<div class="right">
+      <div class="num ${p}num">${num}</div>
+      <div class="title ${p}ti">${esc(title)}</div><div class="sub ${p}su">${esc(sub)}</div><i class="rule ${p}ru"></i></div>`;
+  from(`.${p}num`, { opacity: 0, x: 40 }, { opacity: 1, x: 0, duration: 0.6, ease: "power3.out" }, seg.start + 0.05);
+  rise(`.${p}ti, .${p}su`, seg.start + 0.25, 0.12);
+  from(`.${p}ru`, { scaleX: 0 }, { scaleX: 1, duration: 0.5, ease: "power3.out" }, seg.start + 0.5);
+  return html;
+};
+for (const seg of segs) {
+  const p = id("s");
+  if (seg.kind === "intro" || seg.kind === "chapter" || seg.kind === "outro") {
+    const dia = seg.kind === "intro" ? "agenda" : seg.kind === "outro" ? "summary" : seg.ch.diagram;
+    const num = seg.kind === "chapter" ? `<span class="o">${String(seg.n).padStart(2, "0")}</span><span class="of">/${String(N).padStart(2, "0")}</span>` : seg.kind === "intro" ? `<span class="o">0.2.5</span>` : `<span class="o sm">정리</span>`;
+    const title = seg.kind === "chapter" ? seg.ch.title : seg.kind === "intro" ? "엘라누스 0.2.5" : "핵심 한 줄";
+    const sub = seg.kind === "chapter" ? seg.ch.sub : seg.kind === "intro" ? "다섯 가지 한 번에" : "도구는 에이전트가, 승인은 사람이";
+    scenes.push(`<section class="clip scene" data-start="${f(seg.start)}" data-duration="${f(seg.dur)}" data-track-index="2">
+      <div class="dia">${DIAGRAMS[dia](seg, p)}</div>${rightCol(seg, num, title, sub, p)}</section>`);
+    seg.beats.forEach((bt) => scenes.push(caption(bt, p)));
+    beatAudio(seg);
+  } else if (seg.kind === "card") {
+    scenes.push(`<section class="clip card" data-start="${f(seg.start)}" data-duration="${f(seg.dur)}" data-track-index="5">
+      <div class="cardin ${p}in">${mark(120, C.ink, C.red, `cmark ${p}m`)}<div class="cn ${p}cn">${String(seg.n).padStart(2, "0")}</div><div class="ct ${p}ct">${esc(seg.ch.title)}</div></div></section>`);
+    from(`.${p}in`, { opacity: 0 }, { opacity: 1, duration: 0.25 }, seg.start);
+    from(`.${p}m`, { rotation: -150, scale: 0.6 }, { rotation: 0, scale: 1, duration: 0.9, ease: "power3.out" }, seg.start);
+    rise(`.${p}cn, .${p}ct`, seg.start + 0.2, 0.12);
+    fade(`.${p}in`, seg.start + seg.dur - 0.3, 0, 0.28);
+  } else if (seg.kind === "cta") {
+    scenes.push(`<section class="clip card" data-start="${f(seg.start)}" data-duration="${f(seg.dur)}" data-track-index="5">
+      <div class="ctain ${p}in">${mark(220, C.ink, C.red, `ctamark ${p}m`)}<div class="brand ${p}b">Elanous</div><div class="by ${p}b">by Elanvital AI</div>
+      <div class="links ${p}l">${S.outro.cta.links.map(esc).join("  ·  ")}</div></div></section>`);
+    from(`.${p}in`, { opacity: 0 }, { opacity: 1, duration: 0.4 }, seg.start);
+    from(`.${p}m`, { rotation: -200, scale: 0.5 }, { rotation: 0, scale: 1, duration: 1.4, ease: "power3.out" }, seg.start);
+    rise(`.${p}b`, seg.start + 0.6, 0.15);
+    rise(`.${p}l`, seg.start + 1.2);
+  }
+}
+
+// header dots: active chapter becomes a red pill
+const chapStarts = segs.filter((s) => s.kind === "card").map((s) => s.start);
+chapStarts.forEach((st, i) => {
+  at(`.dot${i}`, { backgroundColor: C.red, color: C.ink, borderColor: C.red, duration: 0.3 }, st);
+  if (i > 0) at(`.dot${i - 1}`, { backgroundColor: "rgba(0,0,0,0)", color: C.ink, borderColor: C.line, duration: 0.3 }, st);
+});
+at(`.dot${N - 1}`, { backgroundColor: "rgba(0,0,0,0)", borderColor: C.line, duration: 0.3 }, outro.start);
+from(".pbar i", { scaleX: 0 }, { scaleX: 1, duration: TOTAL, ease: "none" }, 0);
+from(".motif", { rotation: 0 }, { rotation: 40, duration: TOTAL, ease: "none" }, 0);
+rise(".hdr", 0.1);
+
+// ── page ────────────────────────────────────────────────────────────────────────
+const font = (w, file) => `@font-face{font-family:"Pretendard";src:url("assets/fonts/${file}") format("woff2");font-weight:${w};font-style:normal}`;
+const html = `<!doctype html>
+<html lang="ko"><head><meta charset="UTF-8" /><meta name="viewport" content="width=${W}, height=${H}" />
+<title>${esc(S.title)}</title><script src="assets/gsap.min.js"></script>
+<style>
+${font(500, "Pretendard-Medium.woff2")}${font(700, "Pretendard-Bold.woff2")}${font(800, "Pretendard-ExtraBold.woff2")}${font(900, "Pretendard-Black.woff2")}
+@font-face{font-family:"Geist Mono";src:url("assets/fonts/GeistMono-Medium.woff2") format("woff2");font-weight:500}
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:${C.deep}}
+#root{word-break:keep-all;position:relative;width:100%;height:100%;overflow:hidden;font-family:"Pretendard",sans-serif;color:${C.ink};-webkit-font-smoothing:antialiased;
+  background:radial-gradient(1400px 900px at 20% 10%, #243063 0%, ${C.deep} 45%, ${C.deep2} 100%)}
+.motifwrap{position:absolute;right:-420px;bottom:-520px;width:1400px;height:1400px;opacity:0.07}
+.motif{width:100%;height:100%;display:block}
+.hdr{position:absolute;left:72px;right:72px;top:34px;height:52px;display:flex;align-items:center;gap:18px}
+.hdr .t{font-size:24px;font-weight:700;letter-spacing:-0.01em}
+.hdr .sp{flex:1}
+.dot{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:40px;padding:0 14px;border-radius:999px;border:2px solid ${C.line};font:500 24px "Geist Mono",monospace;color:${C.ink};margin-left:10px}
+.pbar{position:absolute;left:0;right:0;bottom:0;height:8px;background:${C.faint}}
+.pbar i{position:absolute;inset:0;background:${C.red};transform-origin:0 50%;display:block}
+.scene{position:absolute;inset:0}
+.dia{position:absolute;left:96px;top:190px;width:960px;height:760px}
+.dia > *{position:absolute}
+.right{position:absolute;left:1150px;top:200px;width:680px}
+.num{font-weight:900;font-size:168px;line-height:1;letter-spacing:-0.04em}
+.num .o{color:${C.deep};-webkit-text-stroke:3px ${C.ink};paint-order:stroke fill}
+.num .o.sm{font-size:132px}
+.num .of{font-size:52px;color:${C.red};-webkit-text-stroke:0;margin-left:10px;letter-spacing:0}
+.title{margin-top:36px;font-weight:800;font-size:62px;line-height:1.15;letter-spacing:-0.02em;text-wrap:balance}
+.sub{margin-top:16px;font-weight:500;font-size:30px;color:${C.muted}}
+.rule{display:block;margin-top:34px;width:84px;height:6px;background:${C.red};transform-origin:0 50%}
+.capwrap{position:absolute;left:1150px;top:800px;width:700px}
+.cap{font-weight:700;font-size:38px;line-height:1.35;letter-spacing:-0.01em}
+.hl{color:${C.ink};font-weight:900}
+.panel{position:absolute;border:2px solid ${C.line};border-radius:22px;background:rgba(8,12,32,0.35)}
+.panel > *{position:absolute}
+.bar{left:0;right:0;top:0;height:58px;border-bottom:2px solid ${C.faint};display:flex;align-items:center;gap:10px;padding-left:24px}
+.bar i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid ${C.line}}
+.bar span{margin-left:14px;font-size:22px;font-weight:700;color:${C.muted}}
+.bubble{background:${C.ink};color:${C.deep};border-radius:26px 26px 6px 26px;padding:16px 28px;font-size:32px;font-weight:700}
+.sys{font-size:28px;font-weight:700;color:${C.muted}}
+.mono{font-family:"Geist Mono",monospace;font-weight:500;font-size:28px}
+.mono.big{font-size:34px}
+.cmdl{font-size:34px;white-space:nowrap}
+.cmdl .seg{position:relative;border-bottom:4px solid transparent;padding-bottom:4px}
+.cmdl em{position:absolute;left:0;top:64px;font:700 24px "Pretendard",sans-serif;font-style:normal;color:${C.red};white-space:nowrap}
+.out{font:700 30px "Pretendard",sans-serif}
+.red{color:${C.red}}
+.ch{opacity:0}
+.row{display:flex;gap:18px}
+.pill{display:inline-flex;align-items:center;justify-content:center;border:2px solid ${C.ink};border-radius:999px;padding:12px 28px;font-size:30px;font-weight:700;white-space:nowrap}
+.pill.red{border-color:${C.red};color:${C.red}}
+.pill.solid{background:${C.red};color:${C.ink}}
+.pill.big{font-size:56px;padding:22px 60px}
+.lbl{left:30px;top:24px;font-size:22px;font-weight:700;color:${C.muted};letter-spacing:0.04em}
+.ok{font-size:26px;font-weight:700;color:${C.red}}
+.stamp{white-space:nowrap;border:6px solid ${C.red};color:${C.red};font-weight:900;font-size:64px;padding:8px 30px;border-radius:14px;transform:rotate(-8deg);background:rgba(20,28,61,0.7)}
+.arr{position:absolute;overflow:visible}
+.arr path{fill:none;stroke:${C.ink};stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
+.contrast{display:flex;align-items:center;gap:28px}
+.old{position:relative;font-size:40px;font-weight:700;color:${C.muted}}
+.strike{position:absolute;left:-6px;right:-6px;top:52%;height:5px;background:${C.red};transform-origin:0 50%;display:block}
+.to{font-size:44px;color:${C.muted}}
+.node{width:240px;height:120px;border:2px solid ${C.line};border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:30px;font-weight:800}
+.node.empty{border-style:dashed;border-color:${C.faint}}
+.node.red{border-color:${C.red};color:${C.red};background:rgba(233,80,71,0.08)}
+.node small{font:500 18px "Geist Mono",monospace;color:${C.muted};margin-top:6px}
+.field{left:30px;right:30px;height:72px;border:2px solid ${C.faint};border-radius:14px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:28px}
+.field span{color:${C.muted};font-weight:500}
+.kcard{width:280px;height:170px;border:2px solid ${C.line};border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:${C.ink}}
+.kcard b{font-size:30px;font-weight:800}
+.kcard span{font-size:22px;font-weight:700;color:inherit;opacity:0.8}
+.token{width:52px;height:52px;border-radius:50%;background:${C.red};display:flex;align-items:center;justify-content:center;font-size:26px}
+.run{left:30px;right:30px;top:140px;height:150px;border:2px solid ${C.faint};border-radius:16px;display:flex;align-items:center;justify-content:space-between;padding:0 30px}
+.run b{font-size:36px;font-weight:800}
+.btns{left:30px;top:340px;display:flex;gap:20px}
+.cursor{left:92px;top:372px;width:28px;height:28px;border-radius:50%;border:4px solid ${C.ink};background:rgba(242,241,238,0.25)}
+.agenda{left:0;top:40px;width:960px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
+.acard{height:190px;border:2px solid ${C.line};border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between}
+.acard em{font:500 26px "Geist Mono",monospace;font-style:normal;color:${C.red}}
+.acard b{font-size:29px;font-weight:800;line-height:1.2}
+.col{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
+.lbl2{font-size:26px;font-weight:700;color:${C.muted};margin-bottom:6px}
+.card{position:absolute;inset:0;background:${C.black}}
+.cardin,.ctain{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
+.cn{margin-top:40px;font:900 120px "Pretendard",sans-serif;color:${C.red};line-height:1;letter-spacing:-0.03em}
+.ct{margin-top:24px;font-weight:800;font-size:72px;letter-spacing:-0.02em}
+.brand{margin-top:50px;font-weight:900;font-size:110px;letter-spacing:-0.03em;line-height:1}
+.by{margin-top:18px;font-weight:500;font-size:36px;color:${C.muted}}
+.links{margin-top:56px;font:500 30px "Geist Mono",monospace;color:${C.muted}}
+</style></head>
+<body>
+<div id="root" data-composition-id="main" data-start="0" data-width="${W}" data-height="${H}" data-duration="${TOTAL}">
+  <div class="motifwrap">${mark(1400, "none", "none", "motif").replace(/fill="none"/g, `fill="none" stroke="${C.ink}" stroke-width="3"`)}</div>
+  <div class="hdr">${mark(48)}<span class="t">${esc(S.title)}</span><span class="sp"></span>${S.chapters.map((_, i) => `<span class="dot dot${i}">${String(i + 1).padStart(2, "0")}</span>`).join("")}</div>
+  ${scenes.join("\n  ")}
+  <div class="pbar"><i></i></div>
+  ${audios.join("\n  ")}
+</div>
+<script>
+const tl = gsap.timeline({ paused: true });
+${tw.join("\n")}
+window.__timelines["main"] = tl;
+</script>
+</body></html>
+`;
+
+mkdirSync(join(out, "assets", "fonts"), { recursive: true });
+mkdirSync(join(out, "assets", "vo"), { recursive: true });
+const CACHE = process.env.EXPLAINER_CACHE ?? join(homedir(), ".cache", "elanous-explainer");
+const PD = "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/";
+const ASSETS = {
+  "fonts/Pretendard-Medium.woff2": PD + "Pretendard-Medium.woff2",
+  "fonts/Pretendard-Bold.woff2": PD + "Pretendard-Bold.woff2",
+  "fonts/Pretendard-ExtraBold.woff2": PD + "Pretendard-ExtraBold.woff2",
+  "fonts/Pretendard-Black.woff2": PD + "Pretendard-Black.woff2",
+  "fonts/GeistMono-Medium.woff2": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Medium.woff2",
+  "gsap.min.js": "https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js",
+};
+for (const [rel, url] of Object.entries(ASSETS)) {
+  const cached = join(CACHE, rel);
+  if (!existsSync(cached)) {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`asset ${rel}: HTTP ${res.status} from ${url}`);
+    mkdirSync(dirname(cached), { recursive: true });
+    writeFileSync(cached, Buffer.from(await res.arrayBuffer()));
+  }
+  copyFileSync(cached, join(out, "assets", rel));
+}
+for (const s of segs) for (const bt of s.beats ?? []) copyFileSync(join(proj, "source", "vo", `${bt.key}.mp3`), join(out, "assets", "vo", `${bt.key}.mp3`));
+writeFileSync(join(out, "index.html"), html);
+writeFileSync(join(out, "hyperframes.json"), JSON.stringify({ $schema: "https://hyperframes.heygen.com/schema/hyperframes.json", paths: { assets: "assets" }, media: { autoProxy: true } }, null, 2) + "\n");
+writeFileSync(join(out, "meta.json"), JSON.stringify({ id: "explainer", name: "explainer" }, null, 2) + "\n");
+writeFileSync(join(proj, "timeline.json"), JSON.stringify({ total: TOTAL, fps: FPS, segs: segs.map(({ kind, n, start, dur, beats }) => ({ kind, n, start: f(start), dur: f(dur), beats: beats?.map((b) => ({ key: b.key, start: f(b.start), dur: f(b.dur) })) })) }, null, 2));
+console.log(`wrote hf/index.html · ${TOTAL}s · ${segs.length} segments · ${audios.length} VO clips`);

package/skills/explainer-video/engine/vo.ts

@@ -0,0 +1,37 @@
+// Explainer VO — one ElevenLabs /with-timestamps call per beat; the alignment drives caption & highlight timing.
+// Usage: ELEVENLABS_API_KEY=… bun vo.ts <project>/script.json
+// Writes source/vo/<key>.mp3 ⊕ <key>.json (alignment + text hash). Skips a beat whose text hash is unchanged. Never prints the key.
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+import { join, dirname, resolve } from 'node:path';
+
+const KEY = process.env.ELEVENLABS_API_KEY;
+if (!KEY) throw new Error('ELEVENLABS_API_KEY missing — set it from the plugin connector (elanous plugin credentials video-explainer)');
+const scriptPath = resolve(process.argv[2] ?? 'script.json');
+const script = JSON.parse(readFileSync(scriptPath, 'utf8'));
+const dir = join(dirname(scriptPath), 'source', 'vo');
+mkdirSync(dir, { recursive: true });
+
+export function beatKeys(s: any): { key: string; vo: string }[] {
+  const out: { key: string; vo: string }[] = [];
+  s.intro.beats.forEach((b: any, i: number) => out.push({ key: `i-${i}`, vo: b.vo }));
+  s.chapters.forEach((c: any, ci: number) => c.beats.forEach((b: any, i: number) => out.push({ key: `c${ci + 1}-${i}`, vo: b.vo })));
+  s.outro.beats.forEach((b: any, i: number) => out.push({ key: `o-${i}`, vo: b.vo }));
+  return out;
+}
+
+for (const { key, vo } of beatKeys(script)) {
+  const hash = createHash('sha256').update(`${script.voice.id}|${script.voice.model}|${vo}`).digest('hex').slice(0, 16);
+  const jf = join(dir, `${key}.json`);
+  if (existsSync(jf) && JSON.parse(readFileSync(jf, 'utf8')).hash === hash) { console.log(`${key} cached`); continue; }
+  const res = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${script.voice.id}/with-timestamps?output_format=mp3_44100_192`, {
+    method: 'POST',
+    headers: { 'xi-api-key': KEY, 'content-type': 'application/json' },
+    body: JSON.stringify({ text: vo, model_id: script.voice.model, language_code: 'ko' }),
+  });
+  if (!res.ok) throw new Error(`${key}: HTTP ${res.status} ${(await res.text()).slice(0, 200)}`);
+  const data = await res.json() as { audio_base64: string; alignment: { characters: string[]; character_start_times_seconds: number[]; character_end_times_seconds: number[] } };
+  writeFileSync(join(dir, `${key}.mp3`), Buffer.from(data.audio_base64, 'base64'));
+  writeFileSync(jf, JSON.stringify({ hash, vo, alignment: data.alignment }));
+  console.log(`${key} ${(data.alignment.character_end_times_seconds.at(-1) ?? 0).toFixed(2)}s  ${vo}`);
+}