feat(water-ripple): add interactive WebGL water ripple background - #1006
Open
saumyarex wants to merge 1 commit into
Open
feat(water-ripple): add interactive WebGL water ripple background#1006saumyarex wants to merge 1 commit into
saumyarex wants to merge 1 commit into
Conversation
Adds a Water Ripple background component under Backgrounds. It runs a GPU wave simulation and shades the resulting height field as a liquid surface, so ripples spread from wherever the pointer moves. The simulation is a discrete wave equation evaluated in a fragment shader over three ping-pong float render targets, which keeps the simulation from ever sampling the texture it is writing to. A second pass turns the height field's gradient into a surface normal and combines Blinn-Phong specular, fresnel and caustic terms, writing premultiplied alpha so the effect composites over any background. Implementation notes: - Falls back to OES_texture_half_float when OES_texture_float is missing, and to NEAREST filtering when the matching *_linear extension is unavailable. Framebuffer completeness is checked, and the component renders nothing rather than failing silently when the device supports neither float format. - Sizes the canvas by devicePixelRatio (capped at 2) and rebuilds the simulation grid from a ResizeObserver on the container. - Pauses via IntersectionObserver while off-screen, and does not animate at all under prefers-reduced-motion. - Handles webglcontextlost/webglcontextrestored, rebuilding the pipeline when the GPU hands the context back. - Keeps props in a ref so tweaking them never tears down the GL context and discards the waves already on the surface. - Resolves lightColor/shadowColor as CSS colours, including custom properties, and re-resolves them when the document theme changes. Files: - registry/magicui/water-ripple.tsx - registry/example/water-ripple-demo.tsx - content/docs/components/water-ripple.mdx - registry/registry-ui.ts, registry/registry-examples.ts - config/docs.ts Registry artifacts regenerated with pnpm build:registry. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
@saumyarex is attempting to deploy a commit to the product-studio Team on Vercel. A member of the Team first needs to authorize it. |
Yeom-JinHo
self-requested a review
August 27, 2026 12:39
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.
Description
Adds a Water Ripple background component under Backgrounds. It runs a wave
simulation on the GPU and shades the resulting height field as a lit liquid
surface, so ripples spread outward from wherever the pointer moves. Idle by
default; an
autoPlayprop emits ambient ripples without any input.Changes
registry/magicui/water-ripple.tsx— new componentregistry/example/water-ripple-demo.tsx— democontent/docs/components/water-ripple.mdx— docs (usage, 3 examples, props, credits)registry/registry-ui.ts,registry/registry-examples.ts— registry entriesconfig/docs.ts— sidebar entry under Backgroundspnpm build:registryMotivation
I originally built this for my own portfolio site, where I wanted a background that
reacted to the cursor. The Backgrounds section here has grids, patterns, Light Rays and
Noise Texture, but nothing fluid, so thought maybe I should contribute.
Worth flagging: this is distinct from the existing
ripplecomponent, which is a staticstack of concentric CSS circles. This one is a WebGL fluid simulation — the names are
close but the effects are unrelated.
Breaking Changes
None.
Checklist
pnpm checkpasses locallypnpm buildpasses locallypnpm build:registrywas run and the generated files are committed (if you changedregistry/orconfig/site.ts— CI verifies this on every PR)feat(marquee): add reverse prop)