Drift Visualiser

Interactive mathematical visualisation built with Canvas 2D, adaptive quality controls, and real-time input mapping.

OVERVIEW

A client-side flow-field visualisation where particles follow a time-varying noise landscape. The piece is designed as a real-time interaction proof-point with no backend calls, deterministic math primitives, and theme-aware rendering inside a fixed-size canvas.

ARCHITECTURE

The implementation combines a typed config schema, pure noise functions, normalised input hooks, and a lifecycle-aware animation loop. A canvas renderer maps pointer and scroll input into flow-field coefficients, while adaptive quality controls reduce particle density under sustained frame pressure. The component is loaded through a dynamic SSR-safe wrapper and pauses automatically when off-screen.

FUNCTIONALITY

  • Reusable `ArtConfig` contract for math function, palette, input mapping, and animation parameters
  • Noise-based particle flow field with continuous time progression
  • Normalised pointer, touch, and scroll input mapped into real-time parameter modulation
  • IntersectionObserver + reduced-motion aware animation loop to reduce idle GPU cost
  • Adaptive quality scaling that reduces particle/iteration complexity under sustained frame pressure
  • Theme-reactive palette switching based on root class and palette mutations
  • Client-only dynamic import with fixed aspect ratio to keep CLS stable
  • Graceful visual fallback when rendering contexts are unavailable

HOW IT WORKS

On mount, the component instantiates a canvas renderer from an `ArtConfig` object, then tracks pointer and scroll state in normalised ranges. Every animation frame, the renderer computes active parameters by combining base coefficients, mapped user input, and elapsed time before drawing the next frame. Visibility and reduced-motion checks control the frame loop, while a lightweight adaptive policy dials visual complexity up or down based on sustained frame times.

OUTCOMES

  • Demonstrates GPU-adjacent interactive rendering capability beyond standard CRUD/LLM demos
  • Increases on-page engagement with a tactile, mathematically grounded experience
  • Maintains production resilience with zero backend dependencies and explicit fallback behaviour
  • Keeps UX stable through pre-sized layout, theme adaptation, and off-screen render pause