+
+
+
+ A timeline-based animation editor that runs in your browser. +
+ +--- + +RUWIO is a browser-native authoring tool for short interactive animations. +It pairs a Konva-driven canvas with a keyframe timeline, exports a +self-contained HTML/JS bundle, and ships everything as a Vue 3 single-page +app you can serve from any static host. + +## Highlights + +- **Keyframes everywhere** — animate position, rotation, scale, fill, stroke, + shadow, and shape-specific properties. Optional separated position / + rotation tracks. End keyframes terminate a layer cleanly. +- **Layer modifiers** + - **Kaleidoscope** — radial repeats of a layer or a clip instance, + with per-arm time offset for time-pinwheel effects. + - **Wiggle** — deterministic procedural shake (position + rotation). + - **Masks** — destination-in / destination-out cascade, scoped to + track groups, clips, and SVG assets. +- **Asset kinds** — rect, circle, polygon (with vertex / bezier editing), + freeform path, text (14 bundled Google fonts + custom .woff2 / .ttf + upload), images, audio, button-with-states, nested SVG assets, and + reusable clips with their own internal timeline. +- **Scenes** — multiple pages per project; jumpToScene / jumpTo / jumpToFrame + scripted actions; markers; per-scene background video and audio tracks. +- **Render parity** — the canvas2d offline renderer, the Konva live stage, + and the exported runtime all share the same sampling math. What you see + on stage is what gets exported. +- **Eyedropper** colour picking, **motion-path** overlay, global + **seconds / frames** display toggle, custom font upload to + localStorage — the polish kit. + +## Quickstart + +```bash +npm install +npm run dev # start the editor at http://localhost:5200 +npm run type-check # vue-tsc strict pass +npm run build # production bundle to dist/ +npm run pack # zip dist/ into dist-archive/ +``` + +## Stack + +- Vue 3 (`