EXP 001 · WebGL · Physics

Albireo

The gold and blue double star behind our homepage. Move the sliders and it changes as you watch.

Controls

1.0×
100%
100%
Quality preset

Full adds physics, glow and grain. Lite drops physics and post effects. Static shows one still frame.

Downloads a PNG of the sky as you set it.

What it is

Albireo is the double star at the head of Cygnus, the swan. To the eye it looks like one star. Through a small telescope it splits into two: one gold, one blue.

We named the studio after Cygnus, so we drew its brightest pair as the sky behind our homepage. The two stars circle each other, the swan’s stars sit around them, and a ring of small pieces parts around your pointer. Gold stands for our own products. Blue stands for the products we build with clients.

How it's made

  1. Two stars, one orbit · The gold and blue stars circle a shared centre on one tilted orbit. The orbit is drawn for the picture, not taken from a star chart, and it moves by elapsed time, so it looks the same on a slow phone and a fast laptop.
  2. Light in layers · Each star is a bright core, a wide soft halo and a fine grain on top. Stacked, they read as light. Alone, any one of them reads as a flat circle.
  3. A pointer with weight · Your pointer pushes. The pieces around the pair part as it passes, and the stars are nudged away, then spring back when you move on. On a phone, your finger does the same.
  4. Three quality tiers · Full runs the physics, glow and grain. Lite keeps the scene and drops physics and post effects for weaker graphics chips. Static shows a still image for reduced motion or browsers without WebGL2.

What we learned

Driving the orbit by elapsed time, not by frames, kept it the same on a slow phone and a fast laptop.

If motion bothers you

With reduced motion turned on, the sky stays still and the controls change the still image. Every control works with a keyboard, and Pause motion stops the orbit at any time.