24 · Tauri v1 Keyframe Automation
A standalone Tauri v1/WebGL example for animating visual parameters on an editable timeline.
What this example teaches
- Parameter automation without a framework
- Per-parameter keyframe tracks
- Linear, eased, and stepped interpolation
- Timeline playback, reverse playback, looping, and ping-pong
- Live automation recording from slider movement
- Project serialization and restoration
- Local visual presets versus complete automation projects
- WebGL rendering driven by the evaluated timeline state
Run
Main workflow
- Press Play to run the included demo animation.
- Scrub the timeline or enter a time numerically.
- Press the diamond beside any parameter to add a keyframe.
- Double-click a track to place a keyframe using its current value.
- Drag keyframe diamonds horizontally to retime them.
- Select a keyframe to edit its time, value, and interpolation.
- Enable Arm automation and move sliders while the timeline plays to record changes.
- Export the complete project as JSON.
Keyboard controls
| Key |
Action |
| Space |
Play or pause |
| Left / Right |
Step by the current snap amount |
| K |
Key every parameter at the playhead |
Presets and projects
A preset stores only the current shader mode and parameter values. Presets are stored in WebView localStorage.
A project stores:
- Project title
- Timeline duration
- Playback rate
- Loop and ping-pong settings
- Shader mode
- Current values
- Every parameter track
- Every keyframe time, value, and interpolation type
Project files use the extension pattern:
name.junkpile-automation.json
Folder
24-tauri-v1-keyframe-automation
Architecture
Timeline clock
↓
Per-track keyframe lookup
↓
Interpolation: step / linear / ease
↓
Live parameter state
↓
WebGL uniforms
↓
Procedural shader output
The renderer remains active when a track has no keys. Unautomated parameters stay under manual slider control.