English · 简体中文 · 日本語 · Español · 한국어
Water Ripples is an interactive web page featuring realistic WebGL water ripple physics, floating yolk-yellow plumeria blossoms, and a premium borderless liquid-glass settings card that warps the underlying ripples in real-time.
To view the demo, visit: https://ripple.carsonye.com/
- Realistic Water Simulation: A coarse grid CPU simulation mapped onto a WebGL shader pass with diffuse lighting, specular glints, and automatic ambient water breathing.
- Liquid-Glass Interface: A premium settings panel styled as transparent liquid glass, with real-time WebGL lens refraction that warps underlying waves, fading out smoothly on panel blur.
- Procedural Plumeria Flowers: Dynamic 5-petal yellow plumerias drawn on canvas with vivid yolk-orange centers and crisp white outlines.
- Responsive Circular Cursor: Smooth scaling pointer that drops ripples on click/move.
- Auto-Localization: Detects browser locale to dynamically translate UI controls between Chinese and English.
- Mobile Adapted: Responsive panel dimensions and a smart resize listener that ignores minor height shifts (e.g. mobile Safari/Chrome address bars toggling) to prevent physics resets.
npm installnpm run devnpm run build