RUWIO

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

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 (<script setup>) + Pinia state
Konva for the live canvas (vue-konva bindings)
Vite for dev / build
TypeScript everywhere; tests live in src/devtools/tests.ts and run inside the app via the in-browser test overlay
gifenc, upng-js for image-sequence exports

Project layout

src/
  components/        Vue SFCs (CanvasStage, Timeline, PropertiesPanel, …)
  composables/       Reusable hooks (theme, time-format, eyedropper, …)
  lib/               Pure logic: render.ts, exportPlayer.ts, interpolate.ts,
                     wiggle.ts, kaleido.ts, ruwFile.ts (zip pack/unpack), …
  stores/            Pinia stores
  types/             Scene + project type definitions
  i18n/              English + German translations
  devtools/          In-app test runner + tests
public/
  fonts/             Bundled .woff2 files

Tests

The test runner lives inside the app. Open the editor (npm run dev) and hit Ctrl+Shift+Alt+T to toggle the overlay; from there you can run individual suites or the whole pile. The runner, all suites and the components they exercise are plain TypeScript / Vue, so the tests run the real code path — no separate harness.