3D & backgrounds / Three.js
Wave surface
A mesh rises into crossing waves under a fixed light.
Wave surfacePrompt recipe · preview pending
Prompt recipe; no reproduced preview yet. You can use the prompt now; this recipe has not yet been reproduced for the gallery.
Make it fit your project.
Build a moderately subdivided Three.js plane with vertex-shader displacement from two crossing sine waves. Recompute or approximate the normal consistently with displacement, light the surface from one direction, and use a quiet solid material. Drive wave phase from elapsed time.
Build and check.
- Confirm the supplied content, target environment, and required assets before implementing.
- Build a moderately subdivided Three.js plane with vertex-shader displacement from two crossing sine waves. Recompute or approximate the normal consistently with displacement, light the surface from one direction, and use a quiet solid material. Drive wave phase from elapsed time.
- Expose seek(t) so frames can be inspected deterministically; add play, pause, replay, and a reduced-motion still.
- Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.
Know the limits.
- This is a stylized wave study. Real water needs additional optical and simulation work.
- The prompt guides a coding agent; output quality depends on its implementation and review.
Want us to build it?
Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.
Catalog 2026-10-22.a82e12098f76 · Source revision sha256:dfbe6519cbc4fc84acc4cbf926d8a01c7f2e248dd46cedd67a9112b0e928c2ba