STARDUST

The whole player is particles. The picture is tens of thousands of glowing dots, the buttons morph out of stardust, and when the video ends it blows away like dust.

Design thinking

Late-90s screensavers and demoscene intros turned a computer screen into flying light: starfields, particle bursts, color-split shockwaves. STARDUST builds an entire video player out of that. The picture itself is a WebGL2 field of tens of thousands of particles, each colored live from the video frame, lifted into 3D by its brightness, and pushed out on every bass hit. The controls, timeline, clock, title and frame are particle glyphs too, and they flow between shapes when anything changes, so play pours itself into pause. It assembles out of a scattered starfield when it loads, and a starfield keeps drifting behind it that speeds up with the playback speed.

Every state is a particle event. Seeking sends a shockwave with a color split rolling across the picture. Pausing leaves the frame hanging in mid-air. Muting drains the color and drops the volume meter into a pile. Playing at 1.5x or 2x leaves motion trails. When the video ends the picture blows away like dust, and playing again pulls it back together. Move your cursor through the picture, or tap it, and the dust parts around you. Every particle control has a real Video.js control on top, so keyboard, screen readers and touch work as usual with visible focus rings. With reduced motion the particles hold still, and without WebGL2 it falls back to the plain picture with visible controls.

Controls

  • Space Play or pause
  • ← → Seek 10 seconds
  • ↑ ↓ Volume
  • 0–9 Jump to 0–90%
  • M Mute
  • F Fullscreen
  • 2× tap Sides seek, center goes fullscreen

Skin by GiveMePrompts. Part of a 90s skin pack built on Video.js v10.