Ember Plumes

Written for the variant you picked above: Coral

Write a WebGL1 full-screen fragment shader background (no libraries): feathery plumes of fire-coloured smoke that curl in from the left and right edges and leave the middle dark, like a long exposure. Work in coordinates centred on the screen, measured in screen heights. A side mask keeps the plumes at the edges: the horizontal distance from the centre as a fraction of half the width, roughened by a slow noise and pushed a little further in at the top corners, through smoothstep(0.42, 1.0). Inside it, build a long exposure: domain-warp the position once with two fBm lookups, choose a smear direction from a slow low-frequency noise (turned by ±2 radians, and tilted outwards on each side), then take eight samples of fBm along a slightly curved line in that direction, each through smoothstep(0.36, 0.6), and average them; the result is clumps of smoke smeared into feathers. The same loop gives the slope across the smear (each sample weighted by its signed offset); use it to brighten one side of every petal and shade the other, and to lay the hottest colour on the lit crests. Add a fine fBm stretched about twelve times along the flow for hair-like filaments. Colour the density through four tones — ground, a deep ember, the main flame colour, a pale hot crest — and drift soft olive blotches of out-of-focus light through the dark middle. Vignette the corners slightly. The pointer parts the plumes: pixels near it are pushed away along a Gaussian. Everything drifts slowly (time × 0.05). 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 — Coral (coral): Coral fire on a black-olive ground: bg #0a0b06, deep #4d1006, mid #d4461d, hot #ffb07a, spot #30320f. 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 near a plume and it parts around it. Motion: The smoke smears and drifts slowly; plumes billow in and out at the edges. Reduced motion draws one still frame. Accessibility: Decorative and hidden from assistive tech. The middle stays dark, so white text over the centre reads well; keep text off the bright edges. 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 plumes keep drifting at a lower frame rate. 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 near a plume and it parts around it.

Motion

The smoke smears and drifts slowly; plumes billow in and out at the edges. Reduced motion draws one still frame.

Accessibility

Decorative and hidden from assistive tech. The middle stays dark, so white text over the centre reads well; keep text off the bright edges.

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 plumes keep drifting at a lower frame rate.