Add WebGL lightning background animation#12
Merged
Conversation
Adds a full-screen neon lightning background rendered with a single WebGL fragment shader. Three layered bolts use fbm domain warping and stacked sines to produce swooshing electric arcs tinted green / cyan / hot-white. The canvas sits at z-index 10 with mix-blend-mode: screen so only the bright pixels show and text / nav / video backgrounds stay readable on top. Half-resolution rendering (dpr capped at 1), rAF-driven, pauses on tab hide, degrades gracefully on no-WebGL, and drops to a single static frame when prefers-reduced-motion is set. https://claude.ai/code/session_01W7B4JkZktZyNdyAf7BZthU
- Canvas moves to z-index: -1 with no mix-blend-mode, so it reads as part of the page's background rather than an overlay. Cards, image / video backgrounds and the nav all sit in front of it. - Body and section surfaces become transparent (via --body-background and --body-background-alt) so the canvas shows through the gaps. - Base palette darkened: --color-bg, --color-card-bg and --color-accent all drop a couple of stops. html is given a near-black fallback colour in case WebGL fails. - Shader dimmed and given a dark base tone so the viewport doesn't flash pure black between strokes now that we're no longer screening the glow on top of existing colour. https://claude.ai/code/session_01W7B4JkZktZyNdyAf7BZthU
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<canvas>).z-index: 10withmix-blend-mode: screen, so only bright pixels add glow to content — text, nav, images, and the existing video backgrounds all stay readable on top.Performance
min(devicePixelRatio, 1.0)— half-res on retina, upscaled. The soft glow hides pixelation.requestAnimationFrame, pauses viadocument.visibilitychange.prefers-reduced-motion→ draws one static frame and stops.Test plan
https://claude.ai/code/session_01W7B4JkZktZyNdyAf7BZthU
Generated by Claude Code