@magic-spells/physics-engine

Physics
Engine

Spring-driven animation with real physics. These demos pair Physics Engine with @magic-spells/frame-engine to map spring motion onto any CSS property — colors, transforms, filters — all feeling alive.

Install npm i @magic-spells/physics-engine
Size (gzip) ~1.1 KB 
import PhysicsEngine from '@magic-spells/physics-engine'

// Create a spring with custom tension & damping
const spring = new PhysicsEngine({
  attraction: 0.026,
  friction:   0.28
})

// Listen for physics updates every frame
spring.on('change', ({ position, progress }) => {
  element.style.transform = `translateX(${progress * 500}px)`
})

spring.on('complete', () => console.log('settled'))

// Animate from 0 → 1000 with initial velocity 20
await spring.animateTo(0, 1000, 20)

Metamorphosis

A spring drives progress through five Frame Engine keyframes. The orb morphs color, border-radius, scale, and glow — all with natural spring overshoot and settle.

Spring Traverse

Physics spring propels a shape across the stage. Frame Engine maps the spring progress to compound transforms, color shifts, and border-radius — each interpolated independently.

Parameter Lab

Adjust attraction and friction to feel how spring dynamics change. Higher attraction snaps faster. Higher friction damps the bounce. The shape auto-animates on each change.

Attraction 0.026
Friction 0.28
Distance 1200
Velocity 20

Cascade

Eight elements, each driven by its own spring, launched in sequence. The same Frame Engine keyframes applied to every dot — the staggered timing creates a wave of color and motion.