SKILL

motion-design-html

Code-only motion design pipeline (no After Effects) for Raphaël / Howseen: launch films, showreels, product promos, LinkedIn/X videos, meme clips. Use when asked to make a motion design video, a promo/launch film, a showreel, "remake this video", a video from a prompt (e.g. "make a 15s motion graphics video…"), to change a video's music/SFX, or to prepare memes for posts. Covers the brief → beat map → stills → seek(t) HTML engine → Playwright render → ffmpeg → music/SFX → QA flow, plus asset sourcing (Mixkit, Pexels, Unsplash, svgl, 21st.dev) and every gotcha hit so far.

Original · translation is not supported for this source language

Target: Design & content creation. Automatically collected · unverified.

Excerpt from the author’s documentation

Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.

Read the original text

Topics in the source

Motion design, 100 % code (Howseen pipeline)
00. Start from the library (fastest path)
0. Non-negotiables
1. Flow (always in this order)
2. The engine (one HTML file)
3. Render (scripts/rendertemplate.py)
4. Music & SFX (scripts/audiotemplate.py, analyzesong.py)
5. Assets

Full Production Studio note: this skill comes from another creator's own setup. Brand names, people and folder paths in it (for example OpenEd, Skill Stack, Howseen, /Desktop/...) are their examples. Replace them with the user's brand, voice and folders (use the arabic-voice Voice Card when available) and never write in that other brand's voice. Built and battle-tested 25-27/09/2026 on: promo60 (60 s VO ad), loop, launch film, showreel v1/v2, frame. (Apple-keynote prompt), Crave (food-app prompt), reel15 (howseen.ai in 1 prompt + "make it better" pass), Baguette Pro (Apple framework parody), Howseen LinkedIn v1→v5 (4:5). Workdir: /Desktop/Howseen AI/howseen-video/ (one folder per film). Every film folder = .html + render.py + audio.py + out/. Our stack vs the "AI motion" stack people post (Opus + Higgsfield + Blender + After Effects + Suno + Soundly): we replace Blender/After Effects with a deterministic HTML engine rendered frame by frame, Higgsfield with real stock (Pexels/Unsplash) or coded visuals, Suno with Mixkit music, Soundly with Mixkit SFX. 0 € and fully reproducible. Suno/Envato/Higgsfield only if Raphaël asks and has credits. Read howseen-video/INDEX.md first: every fil

This is an excerpt. Refer to the complete source and its current requirements.

Source repository: alfaris/full-production-studio
Source file: skills/motion-design-html/SKILL.md
Fixed revision: 223f74cc6dceb4c16858c4d58b5d066e7c5eeb83

Read the complete original documentation ↗

Requirements

Only the author’s Skill metadata is included. Read the full instructions to check dependencies, licensing and conditions of use.

A small first task

先阅读原作者说明，再决定是否在自己的 AI 工具中使用。

Instructions for your AI tool

Author documentation is not live verification by this site. Without evidence, we do not mark a resource as compatible, safe or free.

Sources and evidence

This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.

Author: alfaris/full-production-studio · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T12:01:33.890Z.

Categories are inferred from names, descriptions and paths. They do not establish compatibility.

License and attribution

MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.

Original license ↗

Synchronization, copying and user-reported success do not mark a resource as runtime-tested.

Original project ↗Original documentation ↗

Limitations and notes

Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.