elanous 0.2.0 → 0.2.5

package/skills/explainer-video/examples/elanous-0.2.5/script.json

@@ -0,0 +1,155 @@
+{
+  "title": "엘라누스 0.2.5 — 다섯 가지 한 번에",
+  "voice": {
+    "id": "ksaI0TCD9BstzEzlxj4q",
+    "name": "Seulki",
+    "model": "eleven_v3"
+  },
+  "sources": "docs/marketing (LAUNCH-0.2.5 초안) · PR #21849 #21887 #21878 #21855 #22054 #21908 #21995 #22001 — 전부 컷 e24cb6e 안 MERGED",
+  "intro": {
+    "beats": [
+      {
+        "vo": "엘라누스 0.2.5, 다섯 가지로 정리해 드립니다.",
+        "cap": "엘라누스 0.2.5, **다섯 가지**로 정리합니다"
+      }
+    ]
+  },
+  "chapters": [
+    {
+      "title": "미션 전 플러그인 자기 설치",
+      "sub": "모자란 것을 먼저 따진다",
+      "diagram": "mission",
+      "beats": [
+        {
+          "vo": "첫 번째는 플러그인 자기 설치입니다.",
+          "cap": "첫 번째, **플러그인 자기 설치**"
+        },
+        {
+          "vo": "미션을 보내기 전에, 엘라누스가 무엇이 모자란지 먼저 따집니다.",
+          "cap": "보내기 전에 **무엇이 모자란지** 먼저 따진다"
+        },
+        {
+          "vo": "실제 첫 판에서는 플러그인 이름을 주지 않았는데, 엘라누스 베이직스를 골라 코딩 에이전트 화면 안에서 설치했습니다.",
+          "cap": "이름을 안 줬는데 **elanous-basics**를 골라 설치",
+          "hl": [
+            [
+              "elanous-basics",
+              "베이직스"
+            ]
+          ]
+        },
+        {
+          "vo": "사람이 챙겨 주던 도구를, 에이전트가 먼저 챙기는 거죠.",
+          "cap": "도구를 **에이전트가 먼저** 챙긴다"
+        }
+      ]
+    },
+    {
+      "title": "plugin add",
+      "sub": "이름@마켓 한 줄",
+      "diagram": "terminal",
+      "beats": [
+        {
+          "vo": "두 번째는 플러그인 애드 명령입니다.",
+          "cap": "두 번째, **plugin add**",
+          "hl": [
+            [
+              "plugin add",
+              "애드"
+            ]
+          ]
+        },
+        {
+          "vo": "이름과 마켓만 적으면 됩니다.",
+          "cap": "**이름@마켓**만 적는다",
+          "hl": [
+            [
+              "이름@마켓",
+              "마켓"
+            ]
+          ]
+        },
+        {
+          "vo": "색인 서명과 패키지 해시를 확인한 뒤에만 설치합니다.",
+          "cap": "**서명**과 **해시**를 확인한 뒤에만 설치"
+        }
+      ]
+    },
+    {
+      "title": "편집기 플러그인 노드",
+      "sub": "입력 폼이 저절로",
+      "diagram": "nodes",
+      "beats": [
+        {
+          "vo": "세 번째는 워크플로 편집기의 플러그인 노드입니다.",
+          "cap": "세 번째, **플러그인 노드**"
+        },
+        {
+          "vo": "플러그인이 노드를 더하고,",
+          "cap": "플러그인이 **노드를 더하고**"
+        },
+        {
+          "vo": "입력 폼은 노드의 입력 정의에서 저절로 만들어집니다.",
+          "cap": "입력 폼은 **저절로** 만들어진다"
+        }
+      ]
+    },
+    {
+      "title": "플러그인별 자격 키",
+      "sub": "키는 그 플러그인에게만",
+      "diagram": "keys",
+      "beats": [
+        {
+          "vo": "네 번째는 플러그인별 자격 키입니다.",
+          "cap": "네 번째, **플러그인별 자격 키**"
+        },
+        {
+          "vo": "키를 넣을 문이 생겼고,",
+          "cap": "키를 **넣을 문**이 생겼고"
+        },
+        {
+          "vo": "그 키는 그 플러그인에게만 전달됩니다.",
+          "cap": "키는 **그 플러그인에게만** 간다"
+        }
+      ]
+    },
+    {
+      "title": "승인 화면",
+      "sub": "웹 앱에서 승인·거절",
+      "diagram": "approve",
+      "beats": [
+        {
+          "vo": "다섯 번째는 웹 앱의 승인 화면입니다.",
+          "cap": "다섯 번째, **승인 화면**"
+        },
+        {
+          "vo": "릴리스나 공지처럼 사람의 승인에서 멈춘 런을,",
+          "cap": "사람의 승인에서 **멈춘 런**을"
+        },
+        {
+          "vo": "웹 앱에서 바로 승인하거나 거절합니다.",
+          "cap": "웹 앱에서 바로 **승인·거절**"
+        }
+      ]
+    }
+  ],
+  "outro": {
+    "beats": [
+      {
+        "vo": "정리하면, 이번 판의 핵심은 이것입니다.",
+        "cap": "이번 판의 **핵심**"
+      },
+      {
+        "vo": "필요한 도구는 에이전트가 스스로 챙기고, 사람은 승인합니다.",
+        "cap": "도구는 **에이전트가 스스로**, 사람은 **승인**"
+      }
+    ],
+    "cta": {
+      "line": "Elanous by Elanvital AI",
+      "links": [
+        "elanous.ai",
+        "github.com/ElanvitalAI/elanous"
+      ]
+    }
+  }
+}

package/skills/motion-broll/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2026 Bart
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+The Geist and Geist Mono fonts in skills/motion-broll/engine/fonts are
+licensed separately under the SIL Open Font License 1.1 (see OFL-Geist.txt).
+Icon paths are adapted from Lucide (ISC License).

package/skills/motion-broll/SKILL.md

@@ -0,0 +1,150 @@
+---
+name: motion-broll
+description: Turn a talking-head video and its transcript into motion-graphic B-roll timed to the speaker's words, in a continuous one-shape style (one element that morphs and never cuts, driven by a cursor, spring motion). Use when someone gives a video (and ideally a transcript) and asks for motion graphics, B-roll, animated cutaways or overlays.
+requires: []
+---
+
+# Motion B-roll
+
+You make motion-graphic clips for a creator's video. Every clip is **one shape that never cuts**: it morphs its size, corners and colour from state to state while its content swaps with a short blur. A cursor drives the changes with real clicks and drags, and every change lands on a spoken word.
+
+The output is a set of clips the creator drops into their editor. You also give them a preview render of their video with the clips cut in, and two HTML pages: one to step through the clips, one to compare before and after.
+
+Everything you need is in this skill folder:
+
+- `engine/`: the motion engine (`motion.js`), the page shell (`base.css`), `build.py` (clip → self-contained HTML), `render.js` (frame-by-frame render with motion blur), `beats.js` (contact sheets of stills), fonts (Geist, OFL).
+- `scripts/`: `setup.sh`, `inspect_video.py`, `words.py`, `composite.py`, `make_pages.py`.
+- `reference/engine-api.md`: how to write a clip. **Read it before writing your first clip.**
+- `examples/opus-aoe2/`: six finished clips for a real 54-second video. Use them as the quality bar and as starting points.
+
+Below, `$SKILL` means this skill's folder. Work in a `motion/` folder in the user's project.
+
+## 1. Set up (first run only)
+
+```bash
+bash $SKILL/scripts/setup.sh ./motion
+```
+
+This checks for Node, Python 3 and ffmpeg, and installs Playwright + Chromium into `motion/node_modules`. Run every engine script with `NODE_PATH=./motion/node_modules`.
+
+## 2. Interview
+
+Use the AskUserQuestion tool; keep it to one round. You need:
+
+- **The video.** A path. Copy or reference it as `motion/work/source.*`.
+- **The transcript.** An SRT or VTT with timestamps is best. With plain text only, get word timestamps from the audio (`pip install faster-whisper`) or ask for an SRT.
+- **Density:**
+  - Light: 2–4 clips per minute, only the strongest moments.
+  - Medium (default): 4–7 per minute.
+  - Heavy: most lines covered, with short gaps of face.
+- **Look:**
+  - The default palette: warm gray canvas, black and white components, one orange accent.
+  - Or their brand: colours, and optionally a font. Ask them to drop a logo, screenshots or brand colours into `motion/inputs/`, and read those.
+- **Anything to avoid or include.** Lines to leave on their face, real numbers or names to show, product screenshots to recreate.
+
+Skip any question the user already answered.
+
+## 3. Inspect the footage
+
+```bash
+python3 $SKILL/scripts/inspect_video.py motion/work/source.mp4 motion/work
+python3 $SKILL/scripts/words.py transcript.srt > motion/work/words.txt
+```
+
+Look at `motion/work/contact.png` yourself. `video.json` gives resolution, fps and layout sections:
+- **full:** the speaker fills the frame.
+- **pip:** the speaker is in a box and the rest is empty. It includes the box position and a warning if the box changes size or moves.
+
+Clips must match the video's resolution and fps. Word times from an SRT are estimates (±0.2s); treat them as such.
+
+## 4. Plan, and get approval before any code
+
+Show a table with one row per clip:
+
+| # | In–Out | The line it covers | What the shape does, on which words | Treatment | Why |
+
+**Creative direction: decide how much of the frame each clip takes.** This is the most important call; make it per clip and give the reason.
+
+- **Full-frame cutaway.** The frame is all speaker, and the line describes something to *see*: a product, a process, a comparison, a number, a chapter change.
+  - Cut away for the length of the idea (3–10s), then give the face back.
+  - Don't cut away in the first second of the hook or on personal, emotional or opinion lines.
+  - Leave at least ~2s of face between cutaways.
+- **Panel in the empty space.** The edit already leaves room: a PiP box, a split, a plain region.
+  - Render a transparent clip (`bg:null`) centred in the empty area, sized to stay clear of the speaker's box at every moment.
+  - It can run long (15s+) as one continuous morph, because the speaker stays on screen.
+  - If `inspect_video.py` reports the box changing, ask whether that's intended, then size for the largest box or split the panel at the change.
+- **Nothing.** The line is about the speaker, or it's too close to another clip.
+
+**Content rules:**
+- Show the subject's real objects: the folder, the terminal, the file, the product, the result. Pull them from the words. Map each idea onto an interaction from the vocabulary in `reference/engine-api.md` (pill + click, progress, check, status island, card with a drag, slider, toggle, tabs, chart + tooltip, search/filter, file drag-and-drop, terminal typing, side-by-side comparison, chapter card).
+- **Never invent numbers, quotes, prices or results.** Use relative bars, skeleton text lines or labels taken from the transcript, and list what is illustrative. Put real figures in only when the user gives them.
+- One idea per clip. A continuous stretch (a whole PiP section) can be one long clip with several states.
+- Pace to speech, not music: one change per spoken beat, about 0.4–1.2s apart.
+
+Wait for the user to approve or edit the plan.
+
+## 5. Build
+
+Write one fragment per clip in `motion/clips/NN-name.html`, following `reference/engine-api.md` and the examples. Then build:
+
+```bash
+python3 $SKILL/engine/build.py motion/dist motion/clips/*.html
+```
+
+Put each state change on its word: clip-local time = word time − clip in-point.
+
+## 6. Check stills on the key words
+
+```bash
+NODE_PATH=./motion/node_modules node $SKILL/engine/beats.js motion/dist/NN-name.html motion/work/NN.png 0.4 1.2 2.1 …
+```
+
+Pick the times where each state has settled and a couple of mid-morph moments. Look at every sheet yourself. Fix anything cramped, clipped, unreadable or off-word, or where the cursor leaves the frame. Then check once more. Panel clips render on black in the sheet so you can judge them.
+
+## 7. Render
+
+```bash
+NODE_PATH=./motion/node_modules node $SKILL/engine/render.js motion/dist/NN-name.html motion/out/NN-name_0m32s40.mp4 30000/1001
+```
+
+- Use the video's fps.
+- Panel clips (`bg:null`) must be written to `.mov`, which gives ProRes 4444 with alpha.
+- Name each file by its timeline in-point (`0m32s40` = 0:32.40).
+- Rendering takes 4 subframes per frame, so it is slower than real time. Run two clips in parallel on a multi-core machine.
+
+## 8. Deliver
+
+Write `motion/plan.json` (schema in `reference/engine-api.md`), then:
+
+```bash
+python3 $SKILL/scripts/composite.py motion/plan.json motion/out/preview.mp4
+python3 $SKILL/scripts/make_pages.py motion/plan.json motion/out/preview.mp4
+```
+
+The user gets, all in `motion/out/`:
+- the clips
+- `TIMING.md`: file, in, out, the line it covers, the treatment, and what is illustrative
+- `preview.mp4`: their video with the clips cut in, hard cuts, original audio
+- `viewer.html`: step through the clips
+- `compare.html`: original vs preview, synced, as side by side, stacked or wipe
+
+Say plainly that the preview is for review: for the final cut they place the clips in their own editor, where they can nudge timing, add transitions and mix audio.
+
+## Style defaults
+
+The user's brand overrides these.
+
+- **Colour:** canvas `#E9E7E2`, ink `#0B0B0B`, white components, one accent `#FF5A1F`. Panel clips on dark footage use light shapes (`#F4F2EE`).
+- **Type and icons:** Geist for UI text, Geist Mono for code, file names and terminals. One icon set with one stroke weight (`M.icon`).
+- **Motion:** springs with a tiny overshoot at most. Leading and trailing edges ride different springs so indicators stretch. The camera zooms so each state fills the frame.
+- **Banned:** bouncy easing, particles, glows, gradients on UI chrome, mixed icon strokes, dead time, anything that looks like a template, made-up data.
+
+## Gotchas
+
+- Never put `will-change` on anything the camera scales; text renders blurry.
+- Text swapping inside a morphing container needs its own enter and exit timing (`M.vis` din/lin/lout), or the old and new text overlap.
+- `mix-blend-mode: difference` labels must sit in a layer that has the blend mode itself. A filtered parent isolates them.
+- Items that slide under a highlight need `M.FAST` springs, or the highlight row sits empty for a moment.
+- Keep the cursor inside the frame at every camera zoom, including during morphs.
+- Word estimates from an SRT drift within a cue; put important changes on the first or last word of a cue when you can.
+- A clip ends by holding its last state; the composite holds the last frame if its slot is longer.

package/skills/motion-broll/SOURCE.md

@@ -0,0 +1,6 @@
+# 출처
+
+- 원천: https://github.com/Barty-Bart/motion-graphics (`skills/motion-broll/`) · 커밋 `e8d610adcf946367430c8b43a97aad8059befaad`(2026-09-25) · MIT(원문 = 이 폴더 `LICENSE` · Copyright (c) 2026 Bart)
+- 들인 날: 2026-09-28 · 용도: 공식 팩 elanous-media · video-broll 플러그인의 클립 저작
+- 원천과 달라진 것(고칠 때마다 한 줄):
+  - `SKILL.md` 머리에 `requires: []` 한 줄 — 저장소 스킬 경계 관문(자격·서비스 목록 · 이 스킬은 로컬 도구 Node·Python 3·ffmpeg 만 쓴다).

package/skills/motion-broll/engine/base.css

@@ -0,0 +1,19 @@
+@font-face{font-family:'Geist';src:url(data:font/woff2;base64,__GEIST__) format('woff2');font-weight:100 900}
+@font-face{font-family:'Geist Mono';src:url(data:font/woff2;base64,__GEISTMONO__) format('woff2');font-weight:100 900}
+html,body{margin:0;background:#E9E7E2;overflow:hidden}
+html.alpha,html.alpha body{background:transparent}
+body.preview{height:100vh;background:#1b1b1b}
+html:not(.alpha) body.preview{background:#E9E7E2}
+#wrap{position:relative;transform-origin:50% 50%}
+body.preview #wrap{position:fixed;left:50%;top:calc(50% - 10px)}
+#stage{position:relative;overflow:hidden;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#0B0B0B;font-feature-settings:"tnum" 1}
+#world{position:absolute;left:0;top:0;transform-origin:0 0}
+#shape{position:absolute;overflow:hidden;isolation:isolate;box-shadow:0 1px 2px rgba(20,18,14,.06),0 10px 30px -8px rgba(20,18,14,.16)}
+html.alpha #shape{box-shadow:none}
+.L{position:absolute;width:0;height:0;transform-origin:0 0}
+.a{position:absolute}
+.row{position:absolute;display:flex;align-items:center;white-space:nowrap}
+.blend{mix-blend-mode:difference}
+.mono{font-family:'Geist Mono',ui-monospace,monospace}
+svg{display:block;overflow:visible}
+#cursor{position:absolute;left:0;top:0;height:auto;transform-origin:3px 3px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));z-index:10}

package/skills/motion-broll/engine/beats.js

@@ -0,0 +1,11 @@
+// NODE_PATH=motion/node_modules node beats.js dist/clip.html out/sheet.png t1 t2 ... -> contact sheet of stills at those times
+const {chromium}=require('playwright');const path=require('path');const {execSync}=require('child_process');const fs=require('fs');
+(async()=>{const [html,out,...ts]=process.argv.slice(2);
+ const b=await chromium.launch();const p=await b.newPage({viewport:{width:1920,height:1080}});const errs=[];p.on('pageerror',e=>errs.push(e.message));
+ await p.goto('file://'+path.resolve(html)+'?render');await p.evaluate(()=>document.fonts.ready);
+ const dir=fs.mkdtempSync('/tmp/bt');const alpha=await p.evaluate(()=>{const a=document.documentElement.classList.contains('alpha');if(a){document.documentElement.style.background='#000';document.body.style.background='#000';}return a;});
+ for(let i=0;i<ts.length;i++){await p.evaluate(t=>seek(t),+ts[i]);await p.screenshot({path:`${dir}/${String(i).padStart(3,'0')}.png`});}
+ await b.close();
+ const cols=Math.min(4,ts.length),rows=Math.ceil(ts.length/cols);
+ execSync(`ffmpeg -loglevel error -y -i ${dir}/%03d.png -vf "scale=640:-1,tile=${cols}x${rows}:padding=4:color=white" -frames:v 1 ${out}`);
+ if(errs.length) console.log('ERR',errs);})();

package/skills/motion-broll/engine/build.py

@@ -0,0 +1,21 @@
+"""Assemble clip fragments + engine + fonts into self-contained HTML files.
+usage: python3 build.py <out_dir> clips/01-name.html [clips/02-name.html ...]"""
+import base64, re, sys, pathlib
+E = pathlib.Path(__file__).resolve().parent
+b64 = lambda p: base64.b64encode(open(p, 'rb').read()).decode()
+CURSOR = '<svg id="cursor" viewBox="0 0 40 56"><path d="M3 3 L3 41 L12.5 32 L19 47 L25.5 44.2 L19.2 29.8 L32 29.8 Z" fill="#0B0B0B" stroke="#fff" stroke-width="2.6" stroke-linejoin="round"/></svg>'
+def build(src, dst):
+    frag = open(src, encoding='utf-8').read()
+    m = re.search(r'<title>(.*?)</title>', frag); title = m.group(1) if m else pathlib.Path(src).stem
+    css = ''.join(re.findall(r'<style>(.*?)</style>', frag, re.S))
+    slot = lambda n: (re.search(rf'<div data-slot="{n}">(.*?)</div><!--/{n}-->', frag, re.S) or [None, ''])[1]
+    js = ''.join(re.findall(r'<script>(.*?)</script>', frag, re.S))
+    base = open(E/'base.css').read().replace('__GEIST__', b64(E/'fonts/Geist-Variable.woff2')).replace('__GEISTMONO__', b64(E/'fonts/GeistMono-Medium.woff2'))
+    html = (f'<!doctype html><html><head><meta charset="utf-8"><title>{title}</title><style>{base}{css}</style></head><body>\n'
+            f'<div id="wrap"><div id="stage"><div id="world">{slot("world")}<div id="shape">{slot("shape")}</div>{slot("over")}</div>{CURSOR}</div></div>\n'
+            f'<script>{open(E/"motion.js").read()}</script><script>{js}</script></body></html>')
+    open(dst, 'w', encoding='utf-8').write(html)
+if __name__ == '__main__':
+    out = pathlib.Path(sys.argv[1]); out.mkdir(parents=True, exist_ok=True)
+    for s in sys.argv[2:]:
+        d = out/(pathlib.Path(s).stem + '.html'); build(s, d); print('built', d)

package/skills/motion-broll/engine/fonts/OFL-Geist.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2023 Vercel, in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/skills/motion-broll/engine/motion.js

@@ -0,0 +1,146 @@
+/* motion-kit engine: one shape that never cuts.
+   Every style is a pure function of time inside seek(t). No CSS transitions, no timers. */
+(function(){
+const M = window.M = {};
+const clamp = M.clamp = (x,a=0,b=1)=>Math.min(b,Math.max(a,x));
+M.lerp = (a,b,u)=>a+(b-a)*u;
+const eo = M.eo = x=>{x=clamp(x);return 1-Math.pow(1-x,3)};
+const eio = M.eio = x=>{x=clamp(x);return x*x*x*(x*(6*x-15)+10)};
+
+// closed-form spring step response 0 -> 1 (zero initial velocity)
+const S = M.S = (tau,w,z)=>{
+  if(tau<=0) return 0;
+  if(!isFinite(w)) return 1;
+  if(z<1){const wd=w*Math.sqrt(1-z*z);return 1-Math.exp(-z*w*tau)*(Math.cos(wd*tau)+z*w/wd*Math.sin(wd*tau));}
+  return 1-Math.exp(-w*tau)*(1+w*tau);
+};
+M.MORPH=[15,0.84]; M.FAST=[27,0.86]; M.SLOW=[12.5,0.9]; M.SOFT=[10,0.95]; M.CAM=[7.5,1]; M.INSTANT=[Infinity,1];
+
+// a value that changes target many times = the sum of one spring per change.
+// period>0 and a closed loop adds the previous cycle's residue so t=period == t=0.
+M.track = (v0,keys,def=M.MORPH,period=0)=>{
+  let prev=v0; const ks=[];
+  for(const k of keys){const d=k[1]-prev; prev=k[1]; const sp=k[2]||def; if(d!==0) ks.push([k[0],d,sp[0],sp[1]]);}
+  const loop = period>0 && Math.abs(prev-v0)<1e-9;
+  return t=>{let v=v0; for(const k of ks){v+=k[1]*S(t-k[0],k[2],k[3]); if(loop) v+=k[1]*(S(t+period-k[0],k[2],k[3])-1);} return v;};
+};
+const hex = M.hex = h=>[1,3,5].map(i=>parseInt(h.slice(i,i+2),16));
+M.ctrack = (h0,keys,def=[20,1],period=0)=>{
+  const c0=hex(h0); const tr=[0,1,2].map(i=>M.track(c0[i],keys.map(k=>[k[0],hex(k[1])[i],k[2]]),def,period));
+  return t=>`rgb(${tr.map(f=>Math.round(clamp(f(t),0,255))).join(',')})`;
+};
+// step helper: pick the latest value whose time has passed
+M.step = (v0,keys)=>t=>{let v=v0; for(const k of keys) if(t>=k[0]) v=k[1]; return v;};
+
+// content swap: exit blurs out fast; enter waits, then blurs in (own timings -> no overlap)
+M.vis = (t,tin,tout,o={})=>{
+  const din=o.din??0.07, lin=o.lin??0.26, lout=o.lout??0.12, bl=o.blur??12;
+  const a = tin==null?1:eo((t-tin-din)/lin);
+  const b = tout==null?0:eo((t-tout)/lout);
+  return {o:a*(1-b), blur:(1-a)*bl+b*bl*0.8, s:(0.94+0.06*a)*(1-0.03*b), a, b};
+};
+M.apply = (el,v,extra='')=>{
+  if(v.o<0.002){el.style.display='none';return false;}
+  el.style.display=''; el.style.opacity=v.o.toFixed(4);
+  el.style.filter=v.blur>0.05?`blur(${v.blur.toFixed(2)}px)`:'none';
+  el.style.transform=`scale(${v.s.toFixed(4)})${extra}`;
+  return true;
+};
+M.setText = (el,s)=>{ if(el._t!==s){ el.textContent=s; el._t=s; } };
+
+// one icon set, 24-grid, stroke normalised so every icon has the same world stroke width
+M.IC = {
+ arrow:['M5 12h14','M13 5l7 7-7 7'], check:['M20 6 9 17l-5-5'], x:['M18 6 6 18','M6 6l12 12'], plus:['M5 12h14','M12 5v14'],
+ folder:['M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'],
+ terminal:['m4 17 6-6-6-6','M12 19h8'], file:['M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z','M14 2v4a2 2 0 0 0 2 2h4','M8 13h8','M8 17h5'],
+ pencil:['M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z','m15 5 4 4'],
+ coin:['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z','M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8','M12 18V6'],
+ clock:['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z','M12 6v6l4 2'],
+ chip:['M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z','M9 9h6v6H9z','M9 1v3','M15 1v3','M9 20v3','M15 20v3','M20 9h3','M20 14h3','M1 9h3','M1 14h3'],
+ sparkle:['M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z'],
+ castle:['M3 21V9l3-1v2h3V7l3-2 3 2v3h3V8l3 1v12','M3 21h18','M10 21v-4a2 2 0 0 1 4 0v4','M6 13h1','M17 13h1'],
+ search:['M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z','m21 21-4.3-4.3'],
+};
+M.icon = (name,size,color,sw=2.2)=>`<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="${(sw*24/size).toFixed(3)}" stroke-linecap="round" stroke-linejoin="round">${M.IC[name].map(d=>`<path d="${d}"/>`).join('')}</svg>`;
+
+// cursor path: keyframes [t,x,y] in world coords, eased between keys with a slight human arc
+M.path = (CK)=>t=>{
+  if(t<=CK[0][0]) return {x:CK[0][1],y:CK[0][2]};
+  const L=CK[CK.length-1]; if(t>=L[0]) return {x:L[1],y:L[2]};
+  let i=0; while(t>=CK[i+1][0]) i++;
+  const [t0,x0,y0]=CK[i],[t1,x1,y1]=CK[i+1];
+  const u=eio((t-t0)/(t1-t0)), dx=x1-x0, dy=y1-y0, arc=Math.sin(Math.PI*u)*0.06;
+  return {x:x0+dx*u-dy*arc, y:y0+dy*u+dx*arc};
+};
+M.presses = (clicks=[],drags=[])=>{
+  const k=[];
+  for(const c of clicks){k.push([c-0.07,1,[45,1]],[c+0.035,0,[22,0.72]]);}
+  for(const [a,b] of drags){k.push([a-0.04,1,[45,1]],[b,0,[22,0.72]]);}
+  k.sort((a,b)=>a[0]-b[0]); return M.track(0,k);
+};
+// time at which a monotonic function first crosses a threshold (precomputed at 1ms)
+M.crossTimes = (f,t0,t1,ths)=>ths.map(th=>{for(let t=t0;t<=t1;t+=0.001) if(f(t)>=th) return t; return Infinity;});
+
+/* scene runner
+ cfg = { W,H, center:[x,y], bg:'#hex'|null(alpha), SH:{name:{w,h,r,bg,cam}}, start:'name', SEQ:[[t,'name'],...],
+         layers:[{el,tin,tout,anchor:'c'|'t'|'l',o,update(t,g)}], cursor:{keys,clicks,drags,size}, shapePress:[t],
+         intro:t|null, geom(t,g) -> g, extra(t,g), T }                                                              */
+M.scene = (cfg)=>{
+  const $=id=>document.getElementById(id);
+  const {W,H}=cfg; const [CX,CY]=cfg.center||[W/2,H/2];
+  const stage=$('stage'), world=$('world'), shape=$('shape'), cur=$('cursor');
+  stage.style.width=W+'px'; stage.style.height=H+'px'; $('wrap').style.width=W+'px'; $('wrap').style.height=H+'px';
+  stage.style.background=cfg.bg||'transparent';
+  if(!cfg.bg) document.documentElement.classList.add('alpha');
+  const P0=cfg.SH[cfg.start], SEQ=cfg.SEQ;
+  const sp=cfg.spring||M.MORPH;
+  const tr=k=>M.track(P0[k],SEQ.map(([t,n])=>[t,cfg.SH[n][k]]),sp);
+  const shW=tr('w'), shH=tr('h'), shR=tr('r');
+  const shBG=M.ctrack(P0.bg,SEQ.map(([t,n])=>[t,cfg.SH[n].bg]),[20,1]);
+  const cam=M.track(P0.cam,SEQ.map(([t,n])=>[t,cfg.SH[n].cam]),cfg.camSpring||M.CAM);
+  const press=M.track(0,(cfg.shapePress||[]).flatMap(c=>[[c-0.07,1,[45,1]],[c+0.035,0,[22,.72]]]));
+  const intro=cfg.intro===undefined?0.02:cfg.intro;
+  const cpath=cfg.cursor?M.path(cfg.cursor.keys):null, cpress=cfg.cursor?M.presses(cfg.cursor.clicks,cfg.cursor.drags):null;
+  if(cfg.cursor) cur.style.width=(cfg.cursor.size||46)+'px'; else cur.style.display='none';
+  const layers=(cfg.layers||[]).map(L=>({...L,node:$(L.el)}));
+  const seek=(t)=>{
+    let g={t, w:shW(t), h:shH(t), r:shR(t), bg:shBG(t), s:cam(t), cx:0, cy:0, fx:0, fy:0, sc:1-0.035*press(t), op:1};
+    if(intro!=null){const a=S(t-intro,13,0.78); g.sc*=0.55+0.45*a; g.op=clamp((t-intro)/0.12);}
+    g.cursor=cpath?cpath(t):null;
+    if(cfg.geom) g=cfg.geom(t,g)||g;
+    g.r=Math.min(g.r,g.h/2,g.w/2);
+    world.style.transform=`translate(${(CX-g.s*g.fx).toFixed(3)}px,${(CY-g.s*g.fy).toFixed(3)}px) scale(${g.s.toFixed(5)})`;
+    const st=shape.style;
+    st.left=(g.cx-g.w/2).toFixed(3)+'px'; st.top=(g.cy-g.h/2).toFixed(3)+'px';
+    st.width=g.w.toFixed(3)+'px'; st.height=g.h.toFixed(3)+'px'; st.borderRadius=g.r.toFixed(3)+'px';
+    st.background=g.bg; st.transform=`scale(${g.sc.toFixed(5)})`; st.opacity=g.op.toFixed(4);
+    for(const L of layers){
+      const v=M.vis(t,L.tin,L.tout,L.o||{});
+      if(M.apply(L.node,v)){
+        const an=L.anchor||'c';
+        L.node.style.left=(an==='l'?0:g.w/2).toFixed(3)+'px';
+        L.node.style.top=(an==='t'?0:g.h/2).toFixed(3)+'px';
+        if(L.update) L.update(t,g,v);
+      }
+    }
+    if(cfg.extra) cfg.extra(t,g);
+    if(cpath){
+      const c=g.cursor, sx=CX+g.s*(c.x-g.fx), sy=CY+g.s*(c.y-g.fy);
+      cur.style.transform=`translate(${(sx-3).toFixed(2)}px,${(sy-3).toFixed(2)}px) scale(${(1-0.13*cpress(t)).toFixed(4)})`;
+    }
+  };
+  window.seek=seek; window.DURATION=cfg.T;
+  // preview mode: loop in the browser, scaled to fit
+  const RENDER=location.search.includes('render');
+  document.body.classList.add(RENDER?'render':'preview');
+  seek(0);
+  if(!RENDER){
+    const fit=()=>{const k=Math.min(innerWidth/W,(innerHeight-30)/H);const wr=$('wrap');wr.style.transform=`translate(-50%,-50%) scale(${k})`;};
+    fit(); addEventListener('resize',fit);
+    const t0=performance.now();
+    const loop=()=>{seek(((performance.now()-t0)/1000)%(cfg.T+0.8));requestAnimationFrame(loop);};
+    requestAnimationFrame(loop);
+  }
+  return seek;
+};
+})();