MotionSites Web Builder

motionmaxxing is an open-source agent skill for Claude Code and other agents that read a SKILL.md folder. It generates motion-graphics films from plain HTML, using GSAP and a vendored Three.js runtime for frame-by-frame animation, 3D hero objects, typography, native-style product UI, and deterministic Chrome/FFmpeg rendering. Its ten-step process covers brand capture, concept and storyboard creation, scripting and voice, building the hardest beat first, rendering, scripted inspection, sound-to-picture, and delivery. The skill uses measured motion precedents and quality gates for render validity, empty frames, end-card duration, composition, and page-chrome patterns; it produces files including final.mp4, editable index.html, STORYBOARD.md, and NOTE.md. Installation checks Node.js, Python, FFmpeg, and Google Chrome without installing system-wide dependencies. The repository is licensed Apache-2.0, while bundled third-party components retain their own licenses, and the project describes itself as an early release with limitations including visual checks that remain manual and limited WebGL rendering speed.

A Claude Code skill for creating motion-design videos in code using HTML, Playwright, ffmpeg, Python, and Chromium. It computes each frame from a deterministic seek(t) function, renders frames with Playwright, blends subframes for motion blur, and encodes the result with ffmpeg. Its motion system includes closed-form springs, log-space camera keyframes, shared-element handoffs, masked word-by-word text, color floods, and ports of selected 21st.dev components. The workflow moves from inputs and a beat map through still-frame approval, full rendering, pop detection, audio generation, and final muxing. Audio processing finds musical drops by band energy, aligns the song to a key visual frame, places sound effects at measured peaks, and applies two-pass loudness normalization. The repository also includes a remake mode for frame-locked recreations with shot analysis, side-by-side verification, and royalty-free replacement audio. The code is MIT-licensed; downloaded third-party media remains under its respective license.

An open-source AI agent skill for Claude Code, Codex, and similar coding agents that produces cinematic product, marketing, launch, and demo videos with Remotion. It provides shot recipe cards, motion previews, a reusable video template, and workflows for storyboarding, real page capture, animation, 2.5D camera moves, sound design, beat-synced cuts, and visual checks. The repository includes native Remotion components driven by normalized progress values, a gallery for browsing motion previews, and an optional JianYing project export that separates shot plates, captions, sound effects, and background music into editable tracks. It can be installed through the skills CLI, by cloning the repository, or by linking it into a Claude Code or Codex skills directory.

Bang Motion is an agent skill for building browser-based motion graphics such as product openers, promos, bumpers, channel intros, kinetic typography, lower thirds, and explainers. It produces a single index.html that plays in a browser and encodes anti-slide rules: scenes change through camera or world movement rather than section fades, subjects or shared worlds persist, motion occurs continuously, and text and numbers remain part of the scene. Its deterministic timeline makes each frame a pure function of time for exact scrubbing and frame-by-frame export, while a shared camera rig supports flowing-world and camera-through-collage modes. The skill includes five explainer starters—cartoon collage, visual journalism, white catalog, vintage sketch, and continuous action—along with configurable style briefs, background motion, surfaces, transitions, highlight shapes, voice-over re-timing, and optional Puppeteer and FFmpeg scripts for verification and MP4 export. It can be installed as a Claude Code plugin or copied into Claude Code, Codex CLI, Gemini CLI, Cursor, or another agent workflow; watching the output requires only a browser and internet connection. The repository is licensed under MIT.

Machine Skill is an open-source Agent Skill for Claude Code that turns a one-line description of a machine, mechanism, engine, instrument, or device into an interactive 3D simulation in a single HTML file. It researches the real machine, generates procedural three.js geometry with real proportions and named parts, assigns materials, and uses a small machine-specific physics solver—such as a Brayton cycle, rocket chamber and nozzle model, pump curve, or torsional oscillator—to drive motions and displayed values. The resulting pages support drag interaction, explode views, solid-face cutaways, X-ray mode, live labels, slow motion, and a computed “break it” scenario; the repository states that its physics is an explanatory model rather than CFD or FEA and that geometry is proportionally accurate rather than manufacturing-tolerance accurate. The skill also provides a deterministic browser film mode and Node-based scripts for recording simulations to video or stills, including optional music, sizing, supersampling, motion blur, and frame validation. Its runtime is an inline ES module based on three.js, with templates, solver references, example machines, and scripts for screenshots, recording, pink-frame detection, and inlining. It can be installed as a Claude Code skill with the Skills CLI or Git, and its pages run in browsers with WebGL 2; recording requires Node, Playwright, and ffmpeg. The repository is licensed under MIT.