echoRipple

Inspiration

The idea came from a simple childhood joy — throwing pebbles into a pond and watching the ripples spread. There's something universally calming and satisfying about that experience. The goal was to recreate this interaction digitally, blending natural sounds, subtle animations, and physics-based effects to make it feel immersive and real.

What it does

• Responsive ripple effects based on stone size
• Realistic splash sound and ambient audio
• Floating leaves and soft wind motion
• Interactive weather modes like rain, sunny, and lightning
• Day/night transitions for immersive visual mood

How we built it

Tech Stack

• React + tailwindcss + typescript
• PixiJS for 2D rendering and animation
• GSAP for smooth animations
• Howler.js for layered ambient sound effects
• Custom JavaScript for physics logic and ripple simulation
• MP3 ambient sounds from Freesound.org and Pixabay

Challenges we ran into

Dynamic Splash & Ripple Simulation

Making the water respond realistically to a thrown stone—especially varying ripple size and splash intensity based on stone size—was complex. It required syncing particle effects, ripple deformation, and physics-driven impact zones without overloading the browser’s performance.

Realistic Sound Feedback

Triggering splash sounds in perfect sync with stone impact wasn’t straightforward. Ensuring consistent playback across devices and browsers involved handling audio context timing, load delays, and volume balancing using libraries like Howler.js.

Natural Look of Splash, Leaves & Water

Designing splash particles, water waves, and floating leaves to feel calm and organic was challenging. It involved fine-tuning easing curves, opacity, and motion randomness to avoid artificial movement. Achieving this balance made the scene feel more immersive and alive without overwhelming the visuals.

Accomplishments that we're proud of

• Created a cohesive, interactive nature scene entirely with web technologies
• Realistic ripple physics and splash particles driven by stone size
• Integrated multi-layered sound and weather systems for full immersion
• Achieved responsive performance on desktop and mobile browsers

What we learned

• How to optimize real-time 2D effects with PixiJS and shaders
• The importance of subtle animation to convey realism
• Layering ambient sound can drastically enhance immersion
• Realism doesn't always need complexity — a well-timed splash can feel just as magical as a physics simulation

What's next for SplashIt

• Add stone skipping mechanics (multi-bounce with trajectory)
• Include wildlife animations (e.g. fish ripples, dragonflies)

Built With

• gsap
• howler.js
• pixijs
• react
• tailwindcss
• typescript