Visual Editor for Reanimated
summary
A visual editor called Key Framer compiles live Reanimated + Gesture Handler code on web and mobile, with a browser canvas and QR mobile preview that actually runs Reanimated. It supports three orchestrators: single progress orchestrator keyframe timelines, event-driven sequences, and a node graph with 50+ node graphs (physics, snap points, interpolate color). Easing curves are sampled 10× and Bezier inversion uses Newton–Raphson; AI helpers (Sonet and gous) generate keyframes; live reload autosaves with a 2.5s live reload debounce via Cloudflare Durable Objects + D1.
AI-written summary · about
chapters (10)
- 0:00The vision for a visual editor
- 4:00Single-progress orchestration
- 7:08Interpolation and math logic
- 12:11Keyframe animation demo
- 13:45Sequences and gesture control
- 16:38Node graph solution
- 20:07Advanced editor features
- 23:26AI-assisted generation
- 25:29Real-time synchronization
- 27:59System architecture and wrap-up
related talks
32mAnimations Should Be Fun
44mFigma deep dive: Motion
32mManaging animations (sanely) in (insanely) complex apps
34mFrame.JS
47mCreating Animations for Google’s Mobile Platforms
28mA visual programming language for animation, geospatial and the web
15mWeb Animations: Tools and Techniques
39mReturn to Web Animation Wonderland