J.REED /DEV
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

  • 1
    Spring-Mass Physics Solver: Drag-and-drop nodes to create interconnected webs that sway and bounce realistically.
  • 2
    Framer Motion Exporter: Live code editor displaying ready-to-paste spring variants based on physical damping ratios.
  • 3
    Tactile Toolbar: Large Neo-brutalist tool selectors supporting rapid toggling of gravity, wind velocity, and node creation.
  • 4
    Local 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