Back to Works
Creative DevPhysics EngineFramer Motion
NovaCanvas Studio
RoleMotion Engineer
Duration2 Months
Tech Stack
ReactHTML5 CanvasTailwind CSSTypeScriptFramer Motion
// 01. CORE PURPOSE
An interactive browser-based physics playground built for motion designers and creative developers. Users can sketch vectors, attach elastic springs between objects, adjust gravity constraints, and immediately export matching React Framer Motion configurations.
// 02. ARCHITECTURAL FEATURES
- 1Spring-Mass Physics Solver: Drag-and-drop nodes to create interconnected webs that sway and bounce realistically.
- 2Framer Motion Exporter: Live code editor displaying ready-to-paste spring variants based on physical damping ratios.
- 3Tactile Toolbar: Large Neo-brutalist tool selectors supporting rapid toggling of gravity, wind velocity, and node creation.
- 4Local Sandbox State: Instant save and load functionality with serialized canvas configurations stored in localStorage.
https://nova-canvas.dev/simulator
// UI SPRING PHYSICS PRESETCLICK NODES
stiffness: 180 | damping: 12
// paste this into framer motion:
transition={{ type: "spring", stiffness: 180, damping: 12 }}
SYSTEM_STATUS: OKSANDBOX v1.0