KiriTTS
Showcase · Features · Quick Start · Development · Docs
|
|
|
|
|
|
Motify combines normal HTML/CSS/JavaScript authoring with a visual editor, direct DOM/SVG rendering, and professional GSAP timelines.
- Build compositions from semantic HTML and inline SVG
- Choreograph scenes with GSAP timelines, overlap, stagger, masks, text reveals, and camera movement
- Preview, play, pause, restart, and deterministically scrub the same timeline used for export
- Select elements and adjust position, scale, rotation, opacity, and text in the visual editor
- Navigate scenes from the storyboard and inspect their timing on the editor timeline
- Reuse a focused library of composable animation presets without introducing a custom animation language
- Render images and SVG assets directly in the composition DOM
- Export PNG frames or a full H.264 MP4 from the exact composition shown in the preview
HTML compositions are the project source. Motify does not convert projects into a second format: preview and export mount the same HTML and seek the same GSAP timeline.
Requires Node.js 20.19.0 or newer.
npx @coppsary/motify@latest init my-video
cd my-video
npx @coppsary/motify@latest devThe initializer creates a code-first Motify v2 project and installs the bundled write-motionly and scene-design skills for your coding agent. Those skill and runtime identifiers remain unchanged so existing compositions stay compatible. Use --provider codex, --provider claude, or --all; use --skip-skills when you do not want agent setup.
To add or refresh the skills in an existing project:
npx @coppsary/motify@latest skills add --provider codex
npx @coppsary/motify@latest skills update --provider codexLocal projects keep visuals in composition.html, optional CSS in styles.css, motion in timeline.js, metadata/mounting in index.ts, and media in assets/. The CLI editor reads and saves those files directly. Use your coding agent to change the project source; the Local editor provides the preview, timeline, inspector, presets, assets, source view, and export without an in-editor AI chat.
The browser deployment runs in Cloud mode. It uses the same editor with Tiffy chat, AI generation and editing, and cloud project management.
See the introduction, architecture guide, editor guide, and animation presets for the current workflow.
git clone https://github.com/COPPSARY/Motify.git
cd Motify
npm install
npm run devBefore opening a pull request:
npm run type-check
npm run test:run
npm run build
npm run qa:editorSee Contributing, the Roadmap, and the documentation for project details.
Motify incorporates open-source motion components, blocks, and motion primitives from HyperFrames by HeyGen, Inc. and its community contributors under the Apache License 2.0. See THIRD_PARTY_LICENSES.md for full attribution, licensing details, and component manifests.
Licensed under the Apache License 2.0.