readme

README.md

@@ -0,0 +1,80 @@
+<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>
+
+---
+
+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 (`<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 — toggle the dev overlay (the test
+icon in the bottom-right) and hit *Run all*. The Plan, the test runner
+and all suites live in TypeScript so they share the rest of the codebase
+unchanged.