Sci-fi and game interfaces
Sci-fi interfaces live on circles: concentric rings, turning bezels, curved labels, geometry in the background. Orbit builds those from HTML and CSS, and animates them with ordinary keyframes on rotate and opacity, which the browser composites without your script.
Where it fits
- HUDs and menus over a web game, as a DOM layer on top of the canvas.
- Game interfaces prototyped in HTML before they move to an engine.
- Game websites that should speak the game's visual language.
- Decorative backgrounds: mandalas, turning bezels, rings behind content.
Where it does not
- The game itself. Orbit is for the interface around it.
- Pixel art. Orbit draws smooth geometry.
Start from
RadarA sweeping beam and contacts that flash in time.
Sci-fi interfaceArcs and dashes at different depths, tilting with the pointer.
Abstract orbital mapPlanets that are systems of their own, each ring turning.
Pie menuA radial menu with submenus.
Radial symmetry mandalaGeometry for backgrounds and emblems.
A cockpit could be a slow mandala behind everything, gauges for shields and hull, a cluster of sub-dials for cooldowns and the target's name in curved text around the bezel. For layers that move in z, see depth layers.