Neon Veins

Written for the variant you picked above: Violet

Write a WebGL1 full-screen fragment shader background (no libraries): thin glowing veins wandering through a near-black field, with stars. Build a smooth field n from three-octave value noise (few octaves, so the lines bend smoothly instead of fraying), domain-warped once by two broader lookups, at a scale of about 3.4 per screen height, drifting slowly. The veins are its contour at 0.5: e = |n − 0.5|; a crisp core smoothstep(0.012, 0, e) plus a glow exp(−34e) × 0.55 and a faint wide halo exp(−9e) × 0.12. Width varies naturally where the field is flat, giving bright pools along the lines. Add fainter secondary contours at 0.32 and 0.68. Modulate brightness along the veins with another slow noise so some stretches burn and others almost vanish, and brighten them near the pointer with a Gaussian. Over the top: a sparse dust of tiny stars (one random point in about one cell in five of a 26-per-height grid, each twinkling at its own rate) and six soft out-of-focus lights drifting very slowly. Tone-map with 1 − exp(−1.25 × colour) so the cores saturate gracefully. Render through a small WebGL1 harness: a full-screen triangle, the device pixel ratio capped at 2 and scaled down (and about 30fps) on touch, paused offscreen and in hidden tabs, one still frame under reduced motion, the pointer eased in with a slow lerp and released when it leaves, and a CSS gradient fallback without WebGL. Add a little per-pixel noise so the gradients never band. An optional fade prop softens the bottom edge into the ground colour: a gradient to the ground plus a backdrop blur masked to grow towards the edge. Children sit above the canvas. Selected variant — Violet (violet): Deep purple veins with lilac cores: bg #040308, vein #5b1ef2, core #9e70ff, star #e8e6f2. 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: Move the pointer to brighten the veins near it. Motion: The veins drift and reshape slowly; stars twinkle; the soft lights wander. Reduced motion draws one still frame. Accessibility: Decorative and hidden from assistive tech. The field is very dark, so white text reads well; avoid placing small text right over a bright vein. Responsive behavior: Fills its container at any aspect ratio; device pixel ratio capped at 2. The optional fade softens the bottom edge into the ground colour. Touch: No pointer response on touch; the veins keep drifting. 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

Move the pointer to brighten the veins near it.

Motion

The veins drift and reshape slowly; stars twinkle; the soft lights wander. Reduced motion draws one still frame.

Accessibility

Decorative and hidden from assistive tech. The field is very dark, so white text reads well; avoid placing small text right over a bright vein.

Responsive

Fills its container at any aspect ratio; device pixel ratio capped at 2. The optional fade softens the bottom edge into the ground colour.

On touch

No pointer response on touch; the veins keep drifting.