Jacob's Ladder

Written for the variant you picked above: Violet

Write a WebGL1 full-screen fragment shader background (no libraries): a Jacob's ladder. Two thin metal rails rise from the bottom centre and open into a V (half-gap 3.5% of the height at the bottom, widening by 24% of the height per unit of height). An arc runs between the rails on a cycle (default 2.6s). Each cycle it strikes at the bottom with a brief flash, then climbs, accelerating like heated air (height = 5% + 86% × phase^1.45), bowing upward in the middle more as it rises, and fades out in the last 7% before the next strike. Its path is jagged: three layers of 1D value noise along x, two of them re-seeded many times a second so it crackles, with a new seed every strike. Draw it as a hot white Gaussian core (about 0.2% of the height), a coloured glow falling off exponentially, and a wide faint haze, clipped softly at the rails; add four fading copies a moment behind so it leaves a trail as it climbs, and flicker the whole arc slightly. Behind it, a soft vertical column of glow brightest at the arc's height. The rails are brushed metal that light up near the arc. Tone-map the result with 1 − exp(−x) and vignette the corners. The pointer bends the arc towards it, in a soft neighbourhood of the pointer's x, easing in and out. Render at 0.85× device pixels (lower and about 30fps on touch), pause offscreen and in hidden tabs, draw one still frame mid-climb under reduced motion, and fall back to a soft CSS glow column without WebGL. Children sit above the canvas. Selected variant — Violet (violet): Palette { ground #0b0716, glow #9a6bff, core #f6efff, metal #8c8a99 }: a violet arc in a dark lab. 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 the arc to pull it towards you. Motion: A strike every 2.6 seconds: flash, climb, stretch, fade; the arc's path flickers many times a second. The pointer's pull eases in and out. Reduced motion draws one still frame mid-climb, with no flicker. Accessibility: Decorative and hidden from assistive tech. It flickers, but softly, at low contrast and never as a full-screen flash; reduced motion removes all movement. Keep text away from the centre column. Responsive behavior: Fills its container; the ladder stays centred at the same proportions; device pixel ratio capped at 2. Touch: No pointer effect on touch; the arc keeps climbing on its own. 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 the arc to pull it towards you.

Motion

A strike every 2.6 seconds: flash, climb, stretch, fade; the arc's path flickers many times a second. The pointer's pull eases in and out. Reduced motion draws one still frame mid-climb, with no flicker.

Accessibility

Decorative and hidden from assistive tech. It flickers, but softly, at low contrast and never as a full-screen flash; reduced motion removes all movement. Keep text away from the centre column.

Responsive

Fills its container; the ladder stays centred at the same proportions; device pixel ratio capped at 2.

On touch

No pointer effect on touch; the arc keeps climbing on its own.