motionmaxxing
Tejashmakwana/motionmaxxing · Apache-2.0 · 88 entries
An agent skill and a small GSAP runtime for making short launch films in plain HTML, with written rules of taste, measured timings and scripts that check the finished render.
- Get it
git clone https://github.com/Tejashmakwana/motionmaxxing ~/.claude/skills/motionmaxxing && bash ~/.claude/skills/motionmaxxing/install.shBy our read of the installer, it checks for Node, Python, FFmpeg and Chrome, links the folder into a skills directory, and downloads nothing. We did not run it.
- Needs
Node 22, Python 3.9, FFmpeg and Chrome. Optional and paid: an ElevenLabs key for voice and music. No Remotion: a film is an HTML page rendered through Chrome.
- Sends off your machine
Nothing by itself. Three scripts go online when you run them: voice (ElevenLabs), the logo fetch, and the brand reader, which loads the website you name.
- We watched it run
Its 9-second demo film stepped through frame by frame in a headless browser: a headline builds, a prompt types, a counter runs to 10,000.
Its own seek test passed. Jumping to a frame gave the same picture as playing to it.
- Not tried here
We made no film with the skill, so nothing here shows its films are better. The render script and its checks were read, not run.
- License
Apache-2.0
Its NOTICE file lists what is not covered: the bundled GSAP, three.js and fonts keep their own licenses.
Everything in it
HTML to video
- docs/hero (README banner source)The source page of the README's animated banner: type and vector only, made with the runtime, with a note on how it was made and checked.
- examples/demo (every runtime call once)A 9-second film for an invented brand that uses each runtime call once: a word-by-word headline with an accent on the arriving word, a…
- examples/phoneA 6-second lock-screen scene built with the native-ui kit: a notification rolls up and the camera pushes to a macro on it. Invented apps…
- examples/selftest (runtime regression page)A test page for the runtime itself: visibility tracks, per-word options, multi-line typing, origin claims, keyframe steps. It must print…
- motion.js (seek-safe GSAP runtime)One plain script on top of GSAP, no build step, one global called Motion. You author in frames; it builds a single paused GSAP timeline and…
- native-ui (phone and notification builders)Builders that return HTML for a true-proportion phone, status bar, lock screen, notifications, banner, list, tab bar and app icon, plus two…
Shot recipes
- C1. Wordmark crash-in, then perpetual contractionThe name slams in oversized, settles, then keeps shrinking slowly so the end frame is never dead. Carries a warning: on near-black with a…
- C10. CTA words focusing in placeThe last words come into focus where they stand, beside a mark built from a character; quiet energy for playful brands.
- C2. Logo built from partsThe mark assembles from pieces of the film. Carries a warning that this ending is a default in generated films.
- C3. Emblem enters oversized and blurredThe emblem arrives large and soft and halves its excess every two frames.
- C4. Icon on white, settling from 1.86xA hard cut to white and a shape mark that settles from 1.86 times its size; for a mark that is a pure shape, after a dark scene.
- C5. Mosaic / pixel dissolve into the markA field of squares resolves into the mark; only when the texture is truly the brand's.
- C6. Logo morph from a previous identityA per-letter flip from an old name to a new one in about a second; for a rename or rebrand.
- C7. Dive into the logo to enter the productThe camera dives into a feature of the logo that becomes a container, such as an underscore that becomes an input.
- C8. Button click, cut before releaseThe cursor presses the product's own control and the film cuts at maximum compression. Warns against a logo plus a download pill, which is…
- C9. Typed CTA prompt, cut before sendA prompt line is typed with a human rhythm and the film cuts before it is sent, handing the action to the viewer.
- T1. Hard cut on motionThe cut lands mid-move at peak speed, never on a settled frame. Written as what, mechanics with measured frame numbers, when to use and…
- T10. Pixel / mosaic dissolve with stepped coverageA field of hard-edged cells dissolves or resolves in steps; opacity is not used. Written as what, mechanics with measured frame numbers…
- T11. Zoom-through / dive into a logo detailThe camera scales into one detail of the logo at a constant rate until it becomes the next surface. Written as what, mechanics with…
- T12. Pull-back reveal with snapThe product is shown as one magnified fragment, then revealed by pulling back. Written as what, mechanics with measured frame numbers, when…
- T13. Whip pan with content changing during the whipA fast pan in which the old content leaves and the new arrives inside the move. Written as what, mechanics with measured frame numbers…
- T14. Scale cutScale changes in one frame, not by a zoom tween, ideally with a content change on the same frame. Written as what, mechanics with measured…
- T15. Ground flips by act (dark / light)The ground inverts at an act boundary, always caused by an object or hidden in motion. Written as what, mechanics with measured frame…
- T16. Localized glitch rectangles as a bridgeA few black static rectangles over part of the frame for six frames or fewer bridge a hard cut. Written as what, mechanics with measured…
- T17. OcclusionA rising or sliding surface covers the old content; nothing fades. Written as what, mechanics with measured frame numbers, when to use and…
- T18. One-frame double exposure and carry-over ghostsOne to three frames where both scenes coexist, or a one-frame ghost carries across. Written as what, mechanics with measured frame numbers…
- T19. Hard replacement of a word or lineText is swapped without a transition, words dropped or added on single frames. Written as what, mechanics with measured frame numbers, when…
- T2. Carried-object match cutThe same object sits at the same place and pose on both sides of the cut. Written as what, mechanics with measured frame numbers, when to…
- T20. Strobe / reel flipMany plates flip on a rhythm (about 15 a second) to read as range or volume. Written as what, mechanics with measured frame numbers, when…
- T3. The effect becomes the next sceneThe thing that finishes scene A (a burst, a growing shape) is the ground of scene B. Written as what, mechanics with measured frame…
- T4. Container replacementThe old bar, card or pill contracts and a new container takes its slot at full size. Written as what, mechanics with measured frame…
- T5. Grey/flat dip hiding a theme flipA four-frame wash to one flat gray frame hides a light-to-dark flip and a magnification. Written as what, mechanics with measured frame…
- T6. Blur-matched cutThe exit ends blurred and the entrance starts more blurred, so the cut vanishes in defocus. Written as what, mechanics with measured frame…
- T7. Wipe that starts in A and finishes in BA band begun at the end of one scene completes in the first frames of the next. Written as what, mechanics with measured frame numbers…
- T8. Mask / clip-edge wipe through glyphsA clip edge sweeps through text so lines erase and reveal mid-letter, with no crossfade. Written as what, mechanics with measured frame…
- T9. Stair / block wipe in screen-grid stepsA wipe whose front advances in whole grid jumps with no in-between. Written as what, mechanics with measured frame numbers, when to use and…
- UI demo recipe A: prompt, send, agent resultA frame-by-frame timeline at 30 fps for a product demo beat: prompt, send, agent result; about 205 frames (6.8 s). Only when the product is…
- UI demo recipe B: toggle, cascade, claimA frame-by-frame timeline at 30 fps for a product demo beat: toggle, cascade, claim; about 175 frames (5.8 s). The file calls these…
- UI demo recipe C: drag, drop, output cascade, headlineA frame-by-frame timeline at 30 fps for a product demo beat: drag, drop, output cascade, headline; about 135 frames (4.5 s). The file calls…
- UI demo recipe D: checklist, revealA frame-by-frame timeline at 30 fps for a product demo beat: checklist, reveal; about 165 frames (5.5 s). The file calls these mechanics…
- UI demo recipe E: select from a carousel, commit into a formA frame-by-frame timeline at 30 fps for a product demo beat: select from a carousel, commit into a form; about 270 frames (9 s), two clips…
GSAP motion
- GSAP 3.12.5 (bundled copy)Link onlyA minified copy of GSAP 3.12.5 that the runtime loads. The NOTICE says it is not under this repo's Apache license: 'Copyright 2024…
- M.camera, M.snap, M.whip, M.dive, M.driftFive camera moves on a wrapper element: keyframed camera, a snap that covers most of its distance in one frame then tails off, a whip pan…
- M.cascadeRuns one move across several elements with chosen frame gaps and returns the onset frames.
- M.countA counter that shows one value per frame with steps that shrink, lands exactly on the target, and uses tabular numerals; digits are never…
- M.cursor and M.pressA cursor that enters oversized, parks, then presses: the cursor squashes for 2-3 frames and the target answers a frame later.
- M.ease.accelExitMeasured ease: ease-in (about power 2.6), fastest near the end; 13 frames; 5%. Used for the leaving curve: scale exits, pans off frame, the…
- M.ease.bounceHardMeasured ease: big overshoot, peak 1.48; 22 frames; under 1%. Used for rare pops and rotations; the skill says use sparingly.
- M.ease.crashInMeasured ease: slam: touches the mark almost at once, peak 1.18 at 27%, relaxes back; 10 frames; 1%. Used for drops that should punch past…
- M.ease.crashOutMeasured ease: ease-in (power 4) that ends at full speed; 17 frames; 4%. Used for camera pull-offs and exits that end on a hard cut.
- M.ease.cruiseMeasured ease: linear; 9 frames typical; 18% of measured moves. Used for fades, drift, camera creep, counters, anything ambient.
- M.ease.gentleInMeasured ease: ease-in (about power 2); 9 frames; 9%. Used for exits, blur-out and fade-out starts, slow push-ins that run into a cut.
- M.ease.glideMeasured ease: gentle ease-out (about sine.out); 10 frames; 14%. Used for all-purpose medium lands, camera pushes, press-down.
- M.ease.popOverMeasured ease: late lean past the mark, peak 1.08 at 72% of the time; 15 frames; 2%. Used for release after a press, a one-off physical…
- M.ease.snapSettleMeasured ease: 54% done at a tenth of the time, then a long soft tail; 11 frames; 6%. Used for hero entries, logo crash-ins, card landings…
- M.ease.softInOutMeasured ease: S-curve; 9 frames; 14%. Used for opacity and blur ramps, ground and color changes, a number tied to a handle.
- M.ease.softLandMeasured ease: strong ease-out (about power 3); 12 frames; 9%. Used for the workhorse entry: text rises, panels slide, scale-ins.
- M.ease.whipMeasured ease: fast out (about power 2.5); 7-8 frames for a true whip; 6%. Used for big fast moves and the arriving half of a whip pan.
- M.enter and M.exitEntry and exit with a start or end pose and a directional smear that is strongest on the first (entry) or last (exit) frame.
- M.kf, M.show, M.hide, M.cutFrame-numbered keyframes on any property, hard show/hide, and a cut that swaps scenes on one frame and records the cut for the sound mix.