--- name: alesha-pro-tools title: tools kind: skill-folder description: 2 skills kept together in one folder, by alesha-pro. skills: 2 updated: 2026-09-29 authored_by: alesha-pro source_url: https://github.com/alesha-pro/tools page: https://innernet.live/community/skills/alesha-pro/tools --- # tools a folder of 2 skills by alesha-pro, kept on innernet at https://innernet.live/community/skills/alesha-pro/tools (source: https://github.com/alesha-pro/tools). every skill in it is below, whole. each one starts with its own manifest: what it does, when to load it, whose it is. you do not need all of them at once. read the index, then use the skill that fits the task in front of you. each skill also has its own link, if only one is wanted. ## the skills 1. **hand drawn canvas animation**: Create hand-drawn short films with whole-pose drawings, expressive strokes and intentional exposure in JavaScript and Canvas 2D: ink, pencil, risograph, screen print, or brush-pen doodles on photos. Includes performance animation, real-motion tracing, sand animation and pop-up paper. Use for hand-drawn cartoons, animated explainers, procedural films, rotoscope, sand stories or drawings interacting with objects. Not for UI animation or slide decks. https://innernet.live/skills/alesha-pro-hand-drawn-canvas-animation 2. **motion reel**: Create finished code-rendered motion graphics: showreels, product launch films, kinetic typography, continuous UI morphs and animated explainers, with music, frame critique and verified MP4 exports. Use for motion-video production or an explicit motion-reel request, not ordinary slide decks, video summaries or editing existing footage. https://innernet.live/skills/alesha-pro-motion-reel --- --- name: alesha-pro-hand-drawn-canvas-animation title: hand drawn canvas animation kind: skill description: > Create hand-drawn short films with whole-pose drawings, expressive strokes and intentional exposure in JavaScript and Canvas 2D: ink, pencil, risograph, screen print, or brush-pen doodles on photos. Includes performance animation, real-motion tracing, sand animation and pop-up paper. Use for hand-drawn cartoons, animated explainers, procedural films, rotoscope, sand stories or drawings interacting with objects. Not for UI animation or slide decks. updated: 2026-09-21 authored_by: alesha-pro author_url: https://github.com/alesha-pro source_url: https://github.com/alesha-pro/tools/tree/main/skills/hand-drawn-canvas-animation brought_by: SD license: MIT --- # Hand-drawn canvas animation Produce a film that feels drawn by hand in both its marks and its movement. For character animation, default to whole-pose drawings, expressive strokes and intentional exposure. Design the keys and breakdowns before any rig or texture. A rig may guide construction and contacts; the final drawing must carry the pose. Canvas 2D is the renderer; SVG path data may be used for authored shapes. No Blender or video model is needed. WebGL is not a dependency. Deliver an HTML film with its local modules and an offline MP4. Length and format follow the brief; a short, finished action is the starting point for a longer film. ## Choose the right references - Read [style.md](references/style.md) for the five looks and their quality gates. - For a film combining looks or techniques, read [mixed-media.md](references/mixed-media.md). Plan why the material changes and what carries through the transition before drawing separate style samples. - Read [redrawn-animation.md](references/redrawn-animation.md) for the default stroke-led character workflow, whole cels, assisted inbetweens and exposure sheets. - Read [motion.md](references/motion.md) before animating characters or a camera. - Read [studio.md](references/studio.md) for exposure tracks, stable strokes, contact IK and materials for optional deformation and construction helpers. - Read [architecture.md](references/architecture.md) for core APIs and export. - Read [doodle.md](references/doodle.md) for photo sourcing, anchors and masking; [found-motion.md](references/found-motion.md) for traced movement; [sand.md](references/sand.md) or [paper3d.md](references/paper3d.md) for those media. - [palettes.md](references/palettes.md), [scenes.md](references/scenes.md) and [reference-films.md](references/reference-films.md) contain optional palettes, scene devices and historical references. They are not mandatory film structures. ## Workflow 1. Fill [brief-template.md](references/brief-template.md). Infer routine choices; ask only for missing decisions that materially affect the result. Specify the intended material and acting reference separately. Pick a primary aspect ratio; alternate formats need composition review, not just a different canvas size. 2. Create one project folder. Copy `assets/core.js`, `assets/studio.js`, `assets/cels.js`, optional `assets/materials.js`, `scripts/render.mjs` and `scripts/package.json` into it. For characters, study `examples/sketchbook-bird.html` and build an original cast with whole drawings. Its example imports use `../assets/`; change these to local module paths in a standalone project. `assets/film-template.html` is a legacy rig demonstration, useful for runtime wiring, not the default visual model. Install the local renderer dependencies with `npm i --no-audit --no-fund`; system Chrome and ffmpeg are required. Keep reusable engine edits in the skill, not in film copies. 3. Establish the drawing: silhouette, proportions, expressions, necessary views, line hierarchy, recognizable stroke gestures and a few material samples. Render at delivery size and at 240 px. A material cannot rescue an unclear pose. Use designed curves and replacement drawings where simple primitives fail. 4. Plan the keys and breakdowns of the hardest action. Mark contacts, gaze, anticipation, weight transfer and reaction. Use enough controls to express it; there is no fixed part count or parameter limit. Build a finite exposure sheet of whole drawings. Use geometric inbetweens only for corresponding forms; redraw changed overlaps, head angles, compressed silhouettes and expressions. Establish timing without decorative textures first. Do not add springs to rigid or motor-driven motion. 5. Finish one representative production shot before building the whole film. Evaluate normal-speed playback, consecutive-frame strips and stills. Correct anatomy, spacing, contacts and line stability before adding more scenes. 6. Build the remaining shots using a beat sheet: start, duration, what the viewer notices, main action, camera and sound cue. Cuts, transitions, blueprint views, montages, anchors and sign-offs are artistic choices. Give each action time to read. When mixing materials, carry the character's action, position or a physical object across the change. A palette swap alone does not establish a new style; several impressive but disconnected shots do not establish a story. 7. Render and inspect. Start with `--grid 24`, then use `--strip 48,12` around a fast action or contact, and `--only 48` for full-size detail. Run the full renderer for the MP4 and generated score. A contact sheet alone cannot pass motion QA. If playback is unavailable, explicitly report that limitation. 8. Deliver the source, dependencies/assets, MP4, contact sheet and the remaining known limitations. Verify duration, dimensions, frame count and successful decode. Never call a film studio-quality solely because its code or checklist passed; assess the actual result against the chosen visual reference. ## Production invariants - `defineFilm` defaults to **24 fps**. A scene receives continuous `tau`; `i` remains the legacy 12 Hz index for `pulse`, `boil` and older clips. Use exposure tracks per action. Ones, twos, threes and held drawings are all valid. - Separate camera timing, drawing exposure and root motion. Check their combined screen-space motion, especially in a tracking shot. Avoid quantizing twice. - Randomness is seeded. Make strokes once per drawing, with stable semantic ids. A held drawing holds its marks too. Seed changes belong to a new drawing, not every output frame. In a deformation workflow, use stable rest-space marks. Specify whether a texture belongs to the paper, an object or the screen. A fixed seed does not prevent swimming if sampling positions or topology change. - Each frame must reproduce after seeking in the same pinned runtime. Sand uses fixed-step simulation and bounded checkpoints. Font and browser differences can change pixels between machines; provide fonts or use path lettering when reproducibility matters. Allow fonts and photos to load before export. - Preserve physical contacts until their planned release. IK clamps unreachable targets; check the returned error and fix the pose rather than stretching bones. - Record sources/licences for external media. Use only assets permitted for the intended delivery. Optional SVG is path geometry, not automatic rigging. ## Quality gates **Drawing:** clear silhouette; consistent proportions across views; controlled outer/inner line weights; purposeful pressure, taper and gaps; no accidental tangencies or broken joints. Avoid assembled oval limbs with a texture laid over them. Clean curves and aligned fills remain valid for the selected medium, but the default sketch should retain visible drawing gestures. Wobble, misregistration and boil require a purpose. **Motion:** whole poses that feel redrawn, meaningful keys, readable breakdowns, deliberate spacing, convincing weight and planted contacts. Inspect overshoot, camera tracking, topology changes and fast movement at normal speed and frame by frame. Use a designed smear when needed; legacy `smear()` makes a ghost trail, not a new drawing. **Material:** ink hatching follows form; graphite respects pressure and tone; riso plates register coherently; screen ink may be solid; doodles interact with the photo. Avoid excessive grain, changing raster phase and unintended shimmer. For mixed-media work, inspect the transitions as actions, not only a style board. If weather drives the scene, its force should affect both setting and character. If paper unfolds, show a compact starting state, the hinges and an attached base. **Delivery:** no page errors, accidental blank frames, clipped action, stale frames or unfinished final lettering. If a closing card is requested, let it finish and hold long enough to read. Check the encoded video, not only PNGs. ## Working examples and commands [`examples/becoming-phoenix/phoenix.html`](examples/becoming-phoenix/phoenix.html) is a complete 60-second film with original music. It combines all five looks, sand and paper projection through one story. Study `inkScene` for a moving storm, `ensurePrintedPage` for an actual print becoming a page, and `unfoldPhoenix` for staggered wing and tail opening. Its branding is specific to the example. Use the techniques that serve the new brief, not its shot list. `examples/sketchbook-bird.html` is the primary pencil/ink drawing study: nine whole-body keys, assisted inbetweens, a replacement blink and an exposure sheet. `examples/weight-study.html` is a secondary seven-second contact/weight study rendered in five looks with `--look ink|pencil|riso|screen|doodle`. It demonstrates mechanisms, not the aesthetic target for redrawn characters or proof of feature-film quality. `examples/material-studies.html` adds sand-displacement and page-curl close-ups. Earlier examples remain useful for particular scene devices; see their references above. ```bash node scripts/render.mjs examples/sketchbook-bird.html --look pencil --grid 18 --out /tmp/pencil-preview node scripts/render.mjs examples/sketchbook-bird.html --strip 58,24 --out /tmp/motion-preview node scripts/render.mjs examples/sketchbook-bird.html --width 1920 --out /tmp/drawn-film node scripts/verify.mjs ``` The renderer honours the film's aspect ratio unless `--ar` is supplied. Each full render stages its own frames, then replaces that film's outputs after successful encoding. Old PNGs cannot extend a shorter revision. `--grid`, `--strip` and `--only` are preview modes and do not replace the full MP4. For Remotion integration use timebase conversion: `drawFrame(Math.min(__NDRAW - 1, Math.floor(frame * __fps / compositionFps)))`. With film and composition both at 24 fps this is simply `drawFrame(frame)`. --- --- name: alesha-pro-motion-reel title: motion reel kind: skill description: > Create finished code-rendered motion graphics: showreels, product launch films, kinetic typography, continuous UI morphs and animated explainers, with music, frame critique and verified MP4 exports. Use for motion-video production or an explicit motion-reel request, not ordinary slide decks, video summaries or editing existing footage. updated: 2026-09-29 authored_by: alesha-pro author_url: https://github.com/alesha-pro source_url: https://github.com/alesha-pro/tools/tree/main/skills/motion-reel brought_by: SD license: MIT --- # Motion Reel Studio Produce an editable animation project and a verified film, not just a prompt or HTML preview. Adapted from [Movez's course](https://x.com/0xmovez/status/2104216919033192746); implementation and corrections are documented in [provenance](references/provenance.md). Works with any capable coding agent; no particular model, paid service or external skill is required. ## Scope and starting decisions Read the user's brief and existing project instructions. Preserve the requested engine, look, music and format. If a project already uses Remotion or HyperFrames, extend it; consult that framework's installed instructions/current docs. Otherwise use the bundled Canvas + Playwright + FFmpeg starter. The commands below are for this default route only. Establish subject/product URL, purpose, duration, aspect ratios, reference, brand assets and sound. Infer supplied answers; ask only for consequential missing inputs. For an open-ended showreel, choose and state a concept, 15 seconds, 1080×1920, 60 fps and original synthesized audio. Do not make up product claims or screenshots. If real product assets are unavailable, collect them or label an authorized concept demo explicitly. Create the production inside the user's artifact location. In the X repository, use `posts//` for a new film and keep all assets there. Install no project files in the repo root. The skill itself stays in the personal skills directory. Work locally without API spending by default; a requested provider needs available tools, credentials and an authorized budget. Publication is a separate action. ## Production workflow 1. **Reference and assets.** Inspect provided images. For video references, extract frames every 0.5–1 s and inspect motion around cuts. Capture actual product states with browser tools; retain origin URLs and capture dates in `docs/assets.md`. Download fonts/images locally and wait for decoding. Write `docs/style-guide.md`: palette, typography, spatial hierarchy, shot rhythm, transition language, camera, texture, what to borrow and what to avoid. With no reference, define an original visual direction explicitly. 2. **Director's brief.** Read [direction](references/direction.md) for the requested mode. Write `docs/brief.md` and `docs/shotlist.md`; each shot has a purpose, start/end frame, exact copy, visual state, camera, transition, sound cue and asset. Use a single timeline for picture and audio. Show a concise plan and proceed within the authorized request. Wait only if the user asked for a plan/approval gate; silence never supplies that approval. 3. **Sound and beats.** Read [audio and execution](references/execution.md). Analyze supplied music or synthesize a score; save `beats.json` and `cues.json`. A beat detector does not establish bar downbeats. Label estimates and confirm the first downbeat before designing bar-level actions. Keep an unchanged-track request intact; do not stretch or normalize that source without permission. 4. **Stills and animatic.** Build hero compositions and sample every shot before polishing movement. Render a low-resolution animatic in the same aspect ratio, with the intended beat grid. Inspect it for pacing and phone readability. For long films, maintain a character bible and chapter timing contracts before implementing chapters. Do not delegate unless independently authorized. 5. **Animation.** Implement `window.seek(t)` as a pure time-to-frame mapping. Use closed-form spring tracks; seed and reset procedural randomness per frame, or derive noise from time and element identity. No persistent integration, timers, CSS transitions or wall-clock sampling in render mode. Local asset readiness belongs in `window.ready`. Make responsive composition decisions for each aspect ratio; do not crop a wide final into portrait. 6. **Critique and correction.** Read [review](references/review.md). Inspect contact sheets, consecutive frames around fast movement, and the actual playback if a playback tool is available. Fix up to three highest-impact defects per round and re-render affected ranges. Use up to three focused rounds by default; stop when the brief is met and no material issue remains, or report a concrete blocker. Never increase self-scores to manufacture a pass. Stills cannot verify audio or motion playback. 7. **Final and delivery.** Render requested resolutions, mix audio, create QA sheets and verify stream metadata, duration, frame count and full decoding. Deliver `out/final.mp4`, poster, contact sheets, source, a reproducible command and concise remaining limitations. Include `out/loop-check.mp4` only for a requested loop. Public copy follows the project's writing rules and final humanizer pass when available. ## Included working toolchain Read [execution](references/execution.md) before running it. Replace `` with this SKILL.md's directory and `` with the chosen film directory. ```bash python3 /scripts/init_project.py cd npm install npx playwright install chromium node render.mjs --width 360 --height 640 --fps 30 --out out/animatic.mp4 python3 audio.py synth --duration 15 --bpm 120 --out out/score.wav --beats beats.json python3 audio.py sfx --duration 15 --cues cues.json --out out/sfx.wav node render.mjs --width 1080 --height 1920 --fps 60 --sub 4 --out out/silent.mp4 python3 finish.py mix --video out/silent.mp4 --music out/score.wav --sfx out/sfx.wav --out out/final.mp4 python3 finish.py qa --video out/final.mp4 --out out/qa --expected-duration 15 --expected-width 1080 --expected-height 1920 --expected-fps 60 --require-audio ``` The starter is a complete abstract test animation, **not the creative deliverable**. Replace its scenes, copy, score and cues with the brief. `motion.mjs` supplies correct under-, critical- and over-damped springs, multi-target tracks, text swap opacity and seeded noise. `render.mjs` supplies range rendering, subframe blur, local HTTP serving, readiness checks and nonsequential determinism checks. `audio.py` supplies a deterministic score, SFX and optional music analysis. `finish.py` supplies a two-pass loudness mix, full-film paginated contact sheets, phone sheets, action strips, loop copies and technical checks. ## Quality invariants - Content must remain understandable without sound; sound should reinforce real motion events. - Avoid the generic centered-title/gradient/fade template unless requested. Prefer a concrete composition and visible transformation; “new every 2–4 s” is a short-form pacing heuristic, not a rule for every film. - Springs express mass; choose damping for the material. Do not bounce every label or replace intentional linear/periodic motion with springs. - Text enters after a container starts changing and exits before incompatible content arrives. Keep glyphs sharp at final scale and test at 360 px wide. - Modulo time does not make a seam continuous. Match near-end and start position, velocity, visibility and sound; inspect the joined playback. - Keep software/frame determinism separate from aesthetic quality. A reproducible bad frame is still a bad frame.