Orbit Dawn

Written for the variant you picked above: Violet

Build a full-bleed dark background with no text: a ringed light rising over a horizon near the bottom, under a faint star chart. Draw it in one WebGL1 full-screen triangle (no libraries) and leave an optional slot for content on top. Units: measure everything in u = min(height, 0.75 × width), so phones keep the arch inside the frame. The centre sits at x 50%, y 90% of the height (+0.02u), just under a horizon at 88%. Dawn ring, from the inside out, with r the distance from the centre in u: a dome of the glow colour inside r 0.125; a thin white-hot ring (Gaussian at r 0.112, width 0.011); a lilac gap ring at 0.14; a broad bright band at 0.19 (width 0.036); six thin fringe-colour striations from r 0.226, every 0.0115, each fainter; a soft fringe ring at 0.25; then the glow colour falling off exponentially (0.11 near, 0.42 far) into a wide halo. Sum the layers and tone-map with 1 − exp(−1.15x) so the core whitens but the halo stays saturated. Two noise layers sampled along the angle and radius drift with time and modulate the striations and band, so thin bright streaks shimmer round the arch; the whole ring breathes ±4%. Orbits: five 1px hairlines centred on the same point at r 0.287, 0.42, 0.56, 0.71 and 0.87, white at 8.5% (fainter outward). Each carries three small hollow circles (radius 0.0084u, 1px stroke, 20%) near 43°, 89° and 136°, drifting round slowly, alternate rings in opposite directions. Stars: a jittered grid (cells 0.028u); the chance of a star rises from 3.5% far away to 25% near the glow; each is a 0.6–1.4px dot twinkling at its own rate. A faint lift of the glow colour sits at the top centre. Horizon: below 88% everything is dimmed to 62% (as if seen through frosted glass) with a soft haze, a band of light lies along the horizon (Gaussian 0.018u, fading sideways) and a faint 1px line marks it. Motion: about 30fps, paused offscreen and in hidden tabs; reduced motion draws one still frame. A fine pointer leans the centre up to 1.5% toward it, eased. Without WebGL a radial gradient from the same palette stands in. Props: palette [night, glow, fringe, core], lift (ring size), speed, motion, children. Selected variant — Violet (violet): Palette [#05031a night, #7239ea glow, #ee9cf6 fringe, #fbf6ff core]: a violet dawn with pink striations on indigo-black. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: A fine pointer leans the whole sky a little toward it; there is nothing to click. Content placed inside works as normal. Motion: Ring breath ±4% on a ~12s cycle, striation streaks drift at 0.35–0.5 per second, nodes orbit at 0.012–0.024 rad/s, stars twinkle at 0.6–2.2 rad/s; pointer lean eased at 0.04; about 30fps. Accessibility: Decorative and aria-hidden. Reduced motion renders one still frame. Text placed over the upper half sits on near-black; keep it off the white band. Responsive behavior: Fills its container. Sizes follow min(height, 0.75 × width), so on phones the arch narrows to stay inside the frame; DPR capped at 2. Touch: No pointer lean on touch; the light keeps breathing and the stars keep twinkling. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

A fine pointer leans the whole sky a little toward it; there is nothing to click. Content placed inside works as normal.

Motion

Ring breath ±4% on a ~12s cycle, striation streaks drift at 0.35–0.5 per second, nodes orbit at 0.012–0.024 rad/s, stars twinkle at 0.6–2.2 rad/s; pointer lean eased at 0.04; about 30fps.

Accessibility

Decorative and aria-hidden. Reduced motion renders one still frame. Text placed over the upper half sits on near-black; keep it off the white band.

Responsive

Fills its container. Sizes follow min(height, 0.75 × width), so on phones the arch narrows to stay inside the frame; DPR capped at 2.

On touch

No pointer lean on touch; the light keeps breathing and the stars keep twinkling.