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.
- **Effects**
- **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/
```
## Electron desktop build
RUWIO can also run as an Electron desktop app. The desktop shell uses the
same Vite-built app from `dist/` plus the compiled Electron entry points in
`dist-electron/`.
```bash
npm install
npm run desktop:dev # start Vite, then launch Electron against localhost
npm run desktop:pack # build an unpacked desktop app into release/
npm run desktop:build # build platform installer/package artifacts into release/
```
`desktop:pack` is the quickest compile check because it produces an unpacked
app without creating an installer. `desktop:build` uses `electron-builder` and
targets AppImage on Linux, NSIS on Windows, and DMG on macOS.
## Stack
- Vue 3 (`