thandClaude Opus 4.7
42c5f68182
README ------ Initial README.md at repo root with the existing src/assets/logo.png header, the editor screenshot from src/assets/ruwio_screenshot.png, a feature-highlights list, quickstart, stack, project layout, and the in-app test runner shortcut (Ctrl+Shift+Alt+T). Effects panel merge ------------------- Wiggle and Kaleidoscope used to live in two separate collapsible sections. Now they share one "Effects" section with a thin border between the two sub-blocks (`.effect-block + .effect-block`), keeping their independent toggles + controls. Same change for the ClipInstance variant. Section preference key flows through one `effects` slot instead of two. Layer kaleido pivot ------------------- Until now only ClipInstance kaleido had a separate pivot; Layer kaleido was locked to the layer's own (x, y). Layers now get optional `kaleidoPivotX/Y` too, mirroring the ClipInstance contract. - types/scene.ts: optional pivot fields on Layer. - lib/kaleido.ts: layerKaleidoPivot + layerArmTransform helpers computing per-arm world (x, y, rotation) around the override. - lib/render.ts: drawLayers + drawMaskShape route through layerArmTransform. - lib/exportPlayer.ts: byte-for-byte JS mirror layerArmTf inside the engine source. RUNTIME_VERSION 32 → 33. - components/CanvasStage.vue: withK now takes the layer + computes rotated x/y/rotation per arm; honours the liveKaleidoPivot ref so a drag updates all copies in real time. Generic kaleidoPivotHandle handles both clip-instance and layer entities (KaleidoPivotEntity discriminated union); manual window-level pointermove drives the drag because Konva's `draggable: true` didn't fire dragmove for shapes inside the clipFunc'd canvas group here. - stores/scene.ts: setLayerKaleidoPivot(id, patch | null) with null-clear semantics. - components/PropertiesPanel.vue: two pivot X/Y inputs in a `.row` inside the layer kaleido sub-block, defaulting to the sampled position. All kaleido inputs (count, offset, pivot) switched from @change to @input so the stage repaints live while the user types or spins the value. Test fixes ---------- - "PropertiesPanel kaleido offset writes back through the mode" dispatched a synthetic 'change' event; the input now binds to @input. Updated to dispatch 'input'. - "PropertiesPanel: Wiggle section toggles the wiggle field" — section open-state persists across tests via the panel's localStorage pref. Test now resets the key before mount and only clicks the header when the body isn't already shown, then restores the prior value. - "PropertiesPanel: layer kaleido pivot inputs render + write back live" used a global value-50 filter that also matched the Transform section's X/Y inputs at the sampled position (50, 50). Scoped the search to the Effects section's body + its `.row`. Tests added (6 new under "layer kaleido pivot — separate orbit centre"): - layerArmTransform math: defaults vs explicit override. - store roundtrip + null-clear of setLayerKaleidoPivot. - drawSceneFrame integration: 4 cardinal pixel checks for a 20×20 red rect at (160, 100), pivot (100, 100), 4 arms — sampled at the rotated body centres. - PropertiesPanel: two pivot inputs render at the sampled position; @input writes pivotX while pivotY stays default. - CanvasStage smoke: pivot handle paths render when a kaleido- on layer is selected (plus toggle-off cleanup). - Engine source carries layerArmTf and bumps RUNTIME_VERSION to '33'. Earlier '32' assertions in the kaleido + wiggle suites also bumped to '33'. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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/
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.tsand run inside the app via the in-browser test overlay gifenc,upng-jsfor 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.