Interface researchFLAGSHIP / A03

Physics-native Bento

A portfolio with a stable canonical reality and a physically expressive runtime.

PROOF / SYSTEMCANONICAL GRID / PHYSICAL RUNTIME
STATUS
LIVE
ARCHITECTURE
06 STAGES
STACK
04 SYSTEMS
01 / PROBLEM

Add physically expressive interaction without letting simulation state compromise navigation, reading order, responsiveness, or accessibility.

02 / ARCHITECTURE

SYSTEM FLOW

  1. 01Authored CSS grid
  2. 02Pointer + keyboard input
  3. 03Interaction state machine
  4. 04Rapier 2D simulation
  5. 05Canvas renderer
  6. 06Reconstruction controller
03 / ENGINEERING DECISIONS

WHY IT IS BUILT THIS WAY

01

Why keep CSS as the source of truth?

The document remains readable and responsive even when the physics runtime is unavailable.

02

Why render fragments on one canvas?

A shared overlay avoids multiplying DOM work while cards fracture and reconstruct.

03

Why deterministic reconstruction?

Every fragment retains a home anchor, so expressive motion always resolves into usable structure.

04

Why runtime quality tiers?

Particle count and simulation quality adapt to device capability and motion preferences.

04 / TECHNICAL CHALLENGES
  • Synchronizing DOM geometry with physics bodies
  • Preserving pointer attachment during grid reflow
  • Bounding concurrent simulations
  • Respecting reduced-motion preferences
  • Restoring canonical layout after interruption
05 / WHAT I BUILT
Architecture
Canonical layout, interaction state, physics lifecycle, and recovery model.
Frontend
React interface, keyboard controls, responsive grid, and animation system.
Runtime
Rapier simulation, Canvas 2D rendering, adaptive effects, and PWA behavior.
Infrastructure
Vinext build, Cloudflare Worker, D1 APIs, and edge deployment.
06 / STACK
Rapier 2DReactCanvas 2DAccessible motion

Layout remains the source of truth. Every draggable surface stays attached to the pointer, returns to a tiled slot, and yields to reduced-motion preferences.

OPEN LIVE SYSTEM
NEXT PROJECT / B01Canvas Claw