Learning on Web Dev Open is free for all.

Immersive Web > Two things worth showingA background field with no library at all
Phase 07Two things worth showing377 of 434

A background field with no library at all

One full-screen shader, hand-written WebGL, under five kilobytes of JavaScript, behaving itself on every device.

Solo project150 minAI adversary

Done when

  • No 3D library in the bundle, and under 5KB of JavaScript for the effect
  • Caps device pixel ratio, and renders exactly one frame under reduced motion
  • Stops scheduling frames when the tab is hidden or the canvas is off screen
  • Renders nothing and breaks nothing if the WebGL context fails or is lost
  • Colours read from CSS custom properties so the effect follows the site theme

Nobody marks this for you. It goes into your phase checkpoint, where a person does.

You should now be able to

  • Ship a WebGL effect with no 3D dependency
  • Degrade to nothing gracefully when the context is unavailable
Ask the community

Loading…

← PreviousA product configurator under a hard budgetTwo things worth showingNext →What the reviewer runs it onCheckpoint: Immersive