[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-96033":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},96033,"bang-motion","bangtutorial\u002Fbang-motion","bangtutorial","Agent skill for browser motion graphics — openers, promos, bumpers, kinetic typography, and five explainer styles that move like video, not slides. Single index.html output. Works with Claude Code, Codex, Gemini CLI, Cursor.",null,"HTML",133,22,105,0,28,46.89,"MIT License",false,"main",true,[],"2026-09-20 04:01:32","\u003Cdiv align=\"center\">\n\n\u003Cimg src=\"icon.svg\" width=\"120\" alt=\"Bang Motion icon\">\n\n# Bang Motion\n\n**An agent skill for building motion graphics in the browser — product openers and promos, bumpers and idents, channel intros, kinetic typography, lower thirds, and explainers.**\n\n[![Version](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fversion-1.0.0-2f6fd6?style=flat-square)](CHANGELOG.md)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-3fa34d?style=flat-square)](LICENSE)\n[![Agent Skills](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fformat-Agent%20Skills-1c2a4a?style=flat-square)](#install)\n[![Works with](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fworks%20with-Claude%20Code%20%C2%B7%20Codex%20%C2%B7%20Gemini%20CLI%20%C2%B7%20Cursor-7a5af5?style=flat-square)](#install)\n\nOutput is a single `index.html` — double-click to play. Autoplay, loop, no player chrome.\n\n\u003C\u002Fdiv>\n\n---\n\n## Why\n\nAsk an AI agent for \"a video\" and you usually get **slides**: one section per idea, a photo, a title, a fade between them.\nBang Motion encodes what a working motion designer would insist on — one continuous world, a camera that actually moves, a subject that persists across scenes, numbers that live inside the scene instead of floating on top — as **structural checks an agent can verify in its own code**, backed by starters that make the right architecture the path of least resistance.\n\n## What you get\n\n- **General motion graphics, not just explainers**: openers, promos, bumpers, idents, intros, kinetic typography, titles — with a shared camera rig, deterministic timeline, and anti-slide rules.\n- **Style born from the theme, never from the starter or the reference**: a required style brief fixes the palette (from the brand), a display face with character, the background surface, the background motion, the transitions, and a motion signature — each picked from a menu, each required to differ from the previous project. References contribute rhythm, not skin.\n- **Menus, not defaults**: every place where an agent tends to grab the cheapest option (a dark nebula, streaks sliding sideways, a flat block wiping the frame, a pill with a sparkle) is replaced by a menu — eight style directions, eleven background motions, six background surfaces, nine transitions, six highlight shapes — and a rule that the same choice may not repeat across projects.\n- **Five explainer styles**, each with its own starter: cartoon collage · visual journalism · white catalog · vintage sketch · continuous action (pure vector).\n- **One rig, two motion modes**: a flowing world (parallax strips, one hero, world objects sweeping past) or a collage the camera travels through (push-through → glide → settle).\n- **Instrument catalog** so the viewpoint keeps changing: map simulation, speedometer cab, elevation profile, map race, cabin interior, head-on approach.\n- **Hard anti-slide checks**: no fading `\u003Csection>`s, a visual through-line, at most two text levels, motion every second, varied transitions.\n- **Sane defaults**: 16:9, no captions, no player, autoplay + loop; `?debug=1` for a scrub bar, `?clean=1` for export.\n- **Voice-over workflow**: the agent hands you the script, you record or generate it, send the audio back, and the timeline is re-timed to your voice — with a browser-only pause detector when ffmpeg isn't installed.\n- **Deterministic timeline**: every frame is a pure function of time, so scrubbing is exact and frame-by-frame export drops nothing.\n\n## The five styles\n\n| Style | Look | Best for |\n|---|---|---|\n| **Cartoon collage** | cream paper, flat illustration cutouts, hand-written notes, colored highlight pills | science, education |\n| **Visual journalism** | black, real photos with source tags, yellow highlighter, dashed annotations | news, current issues |\n| **White catalog** | white grid, photo cutouts, mixed typography, scribbles | products, brands |\n| **Vintage sketch** | sepia paper, engraving-style art, classic serifs, rust annotations | history, biography |\n| **Continuous action** | flowing vector world, one subject that never leaves, numbers inside the world, changing viewpoints | speed, routes, processes |\n\n## Quick start\n\n**An opener:** *\"Make a 30-second opener for my note-taking app, here's the logo.\"*\nThe agent writes a style brief (palette from your logo, a display font with character, one background language, a motion signature), a scene rundown, and only then the code. Two different products never come out wearing the same look.\n\n**An explainer:** *\"Make an explainer about the Whoosh high-speed train.\"*\n1. It asks **one** question: style (five options + a recommendation), aspect ratio, duration, sound.\n2. You get `index.html` (open it — it just plays) plus the voice-over script.\n3. Record or generate the VO with any voice, send the audio back → the agent syncs the video to it.\n\n## Install\n\nBang Motion follows the open **Agent Skills** layout: a folder with `SKILL.md` (frontmatter + instructions), `references\u002F`, `assets\u002F`, `scripts\u002F`. It also ships as a Claude Code **plugin**, so it can be installed and updated with two commands.\n\n### As a plugin (Claude Code)\n\n```\n\u002Fplugin marketplace add bangtutorial\u002Fbang-motion\n```\n```\n\u002Fplugin install bang-motion@bang-motion\n```\n\nThe skill then shows up in your skill list and stays updatable with `\u002Fplugin marketplace update bang-motion`.\n\n### Manual (any agent)\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fbangtutorial\u002Fbang-motion\n```\n\n| Agent | Where it goes |\n|---|---|\n| Claude Code | `~\u002F.claude\u002Fskills\u002Fbang-motion` (Windows: `C:\\Users\\\u003Cyou>\\.claude\\skills\\bang-motion`) |\n| Codex CLI | your Codex skills folder, or add to `AGENTS.md`: *\"For motion graphics \u002F explainers, read and follow `bang-motion\u002FSKILL.md`.\"* |\n| Gemini CLI · Cursor · others | copy into the project and reference `SKILL.md` from `GEMINI.md`, `.cursor\u002Frules`, or the system prompt |\n| Plain chat (no agent) | paste `SKILL.md` + `references\u002Fexplainer.md` as instructions; attach a starter from `assets\u002F` |\n\nThe skill triggers on requests like \"make an explainer…\", \"promo video…\", \"opener…\", or a complaint that a web animation \"looks like PowerPoint\".\n\n## Requirements\n\n| To… | You need |\n|---|---|\n| **Watch** the result | a browser + internet (GSAP and fonts load from CDN). Nothing else. |\n| Verify frames automatically | Node + puppeteer (`scripts\u002Fsnap.mjs`) — optional; `?debug=1` works by hand |\n| Export MP4 | Node + puppeteer + ffmpeg (`scripts\u002Fexport-frames.mjs`) — optional |\n| Sync to voice-over | ffmpeg, **or** nothing: `scripts\u002Fvo-pauses.html` detects pauses in the browser |\n\nA deliverable never requires `npm install` to be watched.\n\n## How the rules work\n\n- **Style brief first**: theme, brand palette, display font, background surface, background motion, transitions, motion signature, one special moment — approved before any code; the opener starter is deliberately grey, with every WebGL color bound to the CSS tokens, so leftovers are obvious.\n- **Free expression inside the rules**: the rules lock structure, contrast, and novelty — not taste. Rich gradients, light, 3D depth, texture, and bold color are encouraged; only the cheapest repeated default is banned. When two options both pass, pick the braver one.\n- **Living typography, obedient background**: sentence case at medium weight, one highlighted keyword per line (the highlight shape is chosen per project, not inherited), punctuation popping last, size and entry direction alternating — over a background that stays dark (or light) under the text instead of competing with it.\n- **Structural bans** the agent checks in code before delivering: scenes change because the world or camera moves, not because a section fades; a subject or shared world persists; at most two text levels; background motion comes from a chosen language rather than objects streaking past; at least two transition types with one in real depth (no flat blocks wiping the frame); the background is layered, never flat; explainers start from the style's starter.\n- **Viewpoint must change**: no three consecutive scenes from the same angle; each fact gets its own instrument.\n- **Camera choreography**: close-up → glide → zoom out → hold; text appears only after the zoom-out finishes.\n- **Every named entity is shown**: people, companies, places, and products get a picture in their scene.\n- **Readable on phones**: no text under 30 px on a 1080-wide stage.\n\nFull detail lives in `SKILL.md` and `references\u002F`.\n\n## Layout\n\n```\nSKILL.md                     rules & workflow (read by the agent)\n.claude-plugin\u002F              plugin + marketplace manifests (Claude Code install)\nreferences\u002F\n  anti-ppt.md                real rejected patterns → fixes\n  explainer.md               five styles, camera recipes, VO re-timing\n  architecture.md            stage, camera rig, determinism, export\n  techniques.md              motion blur, split text, transitions\nassets\u002F\n  starter.html               opener \u002F promo (GSAP + Three.js)\n  starter-explainer.html     continuous action (vector world)\n  starter-explainer-*.html   cartoon · journalism · catalog · sketch\nscripts\u002F\n  snap.mjs                   verify: capture key seconds\n  export-frames.mjs          export: frame-by-frame PNG → MP4\n  vo-pauses.html             VO pause detection, no ffmpeg needed\n  serve.py                   no-cache dev server (optional)\n```\n\n## Contributing\n\nIssues and pull requests are welcome. The rules here come from real revisions on real projects — if you add one, say which failure it prevents. Bump `version` in `SKILL.md` and add a line to `CHANGELOG.md`.\n\n## License\n\n[MIT](LICENSE) © 2026 [Bang Tutorial](https:\u002F\u002Fyoutube.com\u002Fbangtutorial)","Bang Motion 是一个面向 AI 编程代理（如 Claude Code、Cursor 等）的浏览器端动态图形生成技能，用于生成单文件 HTML 格式的运动图形内容。其核心功能包括支持产品开场、频道标识、动态字幕、五种视频级解说风格（如卡通拼贴、手绘风、矢量连续动作等），并内置结构化约束机制（如统一摄像机系统、防幻灯片检查、风格菜单化选择），确保输出为连续流畅的视觉叙事而非静态分页。输出为自包含的 index.html，双击即可自动播放、循环，无播放器控件。适用于需要快速生成轻量级、可嵌入、视频感强的网页动效内容的场景，如产品预览、AI 辅助创意原型、营销素材初稿等。",2,"2026-09-08 02:30:11","CREATED_QUERY"]