RUWIO/README.md

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

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/.

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 (<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.