Sci-fi interface

A HUD made of loose pieces: partial arcs and rows of dashes, each ring at its own distance from the eye. Tilt it and the rings slide past each other. Move the pointer over the frame.

How it's built

  • Arcs with a value and a from-N draw a partial band anywhere on a ring; arcs without one split the ring, and a transparent one leaves a gap. See arcs.
  • The dashes are vectors written by the script, 48 on a 240° range and 16 on 100°.
  • depth on the .gravity-spot turns each ring into a layer, and --o-z places it in front or behind. Layers keep their apparent size, so the face looks flat until it tilts. See depth.
  • outer-perspective leaves the perspective to the stage, so the whole universe can turn with rotateY and rotate: x.
  • Two rings also spin with a CSS animation on rotate, which adds to the depth transform instead of replacing it. The button pauses them and the sway.

Related