Repository navigation
feat(frontend): full-width WebGL flow-field shader behind the hero - #103
Merged
Merged
Conversation
Use the FlowFieldScene shader (the blue flowing background from the 'Live telemetry, rendered' card) as the full-width hero background in place of the node-network graph, with a radial scrim so the headline stays readable. Reuses ShaderCard (code-split ssr:false, capability + reduced-motion gated, CSS fallback, off-screen pause). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…, light default - Dissolve the hero shader into the next section via a cloud-scalloped mask (.hero-shader-fade) + a softer scrim, so there's no hard seam. - Make the flow-field shader theme-aware (colors from useThemeColors, vignette fades to the theme bg) so it's light on the light theme instead of a dark patch; theme-aware CSS fallback too. - Ground the 'Live telemetry, rendered' card text on a card-color scrim + brighter copy for readability. - Default theme is now light (Osaka Dawn); dark is opt-in via the toggle. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…dashboard - Replace the scalloped hero mask with a single long elliptical dissolve so the shader melts into the next section with no seam; also fade the clouds band's bottom clip. - Add the flow-field shader to the monitors dashboard as a top-right corner accent (.shader-corner-fade) that dissolves inward — a different placement from the landing hero. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Puts the blue flowing WebGL shader — the same
FlowFieldSceneused as the background of the "Live telemetry, rendered" features card — full-width behind the hero, replacing the node-network graph there.ShaderCard(code-splitnext/dynamic ssr:false, capability + reduced-motion gated, CSS gradient fallback, off-screen pause) atopacity-75.--backgroundtoward the center/edges) so the headline + CTAs stay readable over the shader.HeroSignature(node-network) from the hero.tscclean,pnpm buildgreen; page serves 200 with the shader code-split out of the initial HTML.cd frontend && pnpm dev): shader intensity/opacity and headline contrast over it are the things to check; both are easy to dial.🤖 Generated with Claude Code