103 lines
3.9 KiB
Markdown
103 lines
3.9 KiB
Markdown
<p align="center">
|
|
<img src="src/assets/logo.png" alt="RUWIO" width="320" />
|
|
</p>
|
|
|
|
<p align="center">
|
|
<strong>A timeline-based animation editor that runs in your browser.</strong>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<img src="src/assets/ruwio_screenshot.png" alt="RUWIO editor screenshot" width="100%" />
|
|
</p>
|
|
|
|
---
|
|
|
|
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 (`<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.
|