LARGE DOTS
MID DOTS
SMALL DOTS
UI ACCENT
TEXT
BUTTONS
DENSITY & SIZE
100
1.0
15
1.0
BACKGROUND
PREMIUM ANIMATED TEMPLATE

HELIOS

Five interactive scenes, one seamless story. Galaxy, sphere, waves, control room and the final outcome — all driven by scroll and the movement of your mouse.

BEGIN BRIEFING →
SCROLL TO ENTER
01 — CHAPTERS

A story in five scenes.

Every section has its own particle animation that morphs into the next one as you scroll. No heavy video, just ~30 KB of pure canvas code.

SCENE 01
Galaxy
A particle spiral turning around its core. Reacts to your mouse.
SCENE 02
Sphere
A 3D field of dots forming a breathing globe.
SCENE 03
Waves
Smooth waves across the floor, parallax that follows the cursor.
SCENE 04
Console
A grid of data points — control, visualised.
SCENE 05
Outcome
A pulsing ring, the signal of a finished project.
02 — CALIBRATION

Two weeks in the control room.

We sat with the operators through 47 plasma cycles — watched what broke, replayed every keystroke through the legacy system.

  • Pure HTML / CSS / JS — no framework
  • Zero dependencies, ~30 KB compressed
  • Fully responsive, mobile-first
  • 5 customisable colour schemes
  • Mouse interaction on every scene
  • SEO-ready, accessible, lazy-load fallback
47PLASMA CYCLES
2 142KEYSTROKES REPLAYED
~30 KBTOTAL BUNDLE
0EXTERNAL DEPENDENCIES
03 — CONSOLE

The operator's experience.

Every element here has a reason. No decorative particles — the cursor draws the field in around itself, so visitors feel the interface answering them. The small detail that turns a page into a product.

60 FPSON MID-RANGE HW
5UNIQUE SCENES
1 FILEDEPLOY-READY
04 — OUTCOME

Want HELIOS on your site?

This is a live demo — one of the Lab templates. Head back to the catalogue, pick a template and start the AI brief.

← Back to Lab Start AI brief →