NovaMotion

Physics-driven UI for the modern web.

Define forces. Motion emerges.

Website  •  Demos  •  Installation  •  Quick Example  •  Docs

---

What is NovaMotion?

NovaMotion is a physics engine for UI.

Instead of writing animations for each element, you define forces and fields. The interface responds naturally.

Traditional animation:

animate element → move → stop

NovaMotion:

define environment → motion emerges

---

Installation

npm install novamotion

pnpm add novamotion

---

Quick Example

import { scene } from "novamotion"

scene()
  .add(".card", {
    spring: true,
    enter: { type: "fall" },
    stagger: 0.08,
  })
  .attract(".card", "#cursor", { strength: 350 })
  .repel(".pill",  "#cursor", { strength: 600, radius: 120 })
  .floor()
  .start()

No timelines. No keyframes. Just physics.

---

React Example

import { Field } from "@novamotion/react"

<Field type="magnet" target="cursor" strength={500} radius={250}>
  <Card />
  <Card />
  <Card />
</Field>

One field defines the physics environment. Every child responds automatically.

---

Features

• Field-based UI physics
• Real-time force simulation
• React integration — <Field>, <Motion.*>, hooks
• CLI project scaffolding — Vanilla, React, Next.js, Astro
• CSS transform rendering — no layout thrashing
• 60fps interaction systems

---

Physics Fields

Field	Behavior
MagneticField	Attraction to cursor or points
GravityField	Directional gravitational pull
RepulsionField	Push objects away
VortexField	Orbital spinning motion
FlowField	Organic vector field movement
WindField	Directional turbulence
SpringAnchorField	Elastic layout systems
BlackHoleField	Newtonian r⁻² gravity, event horizon
ShockwaveField	Expanding repulsion wavefront

---

Demos

Universe UI Cursor becomes a gravity well. Elements orbit, collide, and respond to Newtonian forces. Click to create a black hole.
	Black Hole Event Click triggers a BlackHoleField. Bodies crossing the event horizon are consumed with real tidal physics and accretion disk visualization.
Gravity Grid 12 UI cards across 5 switchable field modes — Magnetism, Repulsion, Gravity, Vortex, Flow Field. Live physics HUD.
	Benchmark NovaMotion physics simulation vs spring animation side by side. Select 40 to 1000 bodies. Different categories — not a speed comparison.

Run locally:

npm run dev

Open http://localhost:3000/demos

---

CLI

npx novamotion init my-app

Templates:

• vanilla — HTML + TypeScript + Vite
• react — React 18 + Vite + @novamotion/react
• next — Next.js App Router + Field components
• astro — Astro + React islands + NovaMotion

---

Project Structure

novamotion/
  packages/
    ├─ core        engine · RAF loop · entity system · Scene API
    ├─ physics     Vec2 · forces · constraints · PhysicsWorld
    ├─ react       Motion.* · Field · hooks
    ├─ cli         npx novamotion init
    └─ devtools    canvas debug overlay
  demos/
    ├─ gravity-grid
    ├─ universe
    └─ benchmark
  docs/
  website/

---

Philosophy

User interfaces should behave like physical systems, not scripted timelines.

Gravity. Momentum. Inertia. Fields.

The browser becomes a simulation environment for UI.

---

Author

Created by Rohit Bagewadi

github.com/rxhtt  ·  Portfolio

---

Contributing

Feedback, experiments, and contributions are welcome.

See CONTRIBUTING.md for development setup, force implementation guidelines, and performance requirements.

---

License

MIT License