Show HN: React Weather Effects

A beautiful, interactive weather effects demo built with React, Next.js, WebGL, and Three.js. Experience realistic rain, snow, and fog scenes, each with unique visual effects and controls.

Live demo

• Rain: Realistic WebGL rain with custom shaders, and lightning effects.
• Snow: Gentle and stormy snow scenes powered by Three.js particle systems.
• Fog: Light and dense fog overlays using Three.js and custom blending.
• Interactive: Switch between weather types and subtypes (e.g., storm, drizzle) with a modern UI.
• Responsive: Works on desktop and mobile browsers.

• Rain
  • Rain
  • Storm (with lightning)
  • Drizzle
  • Fallout
• Snow
  • Gentle
  • Storm
• Fog
  • Light
  • Dense

• React & Next.js (App Router)
• WebGL (custom shaders for rain)
• Three.js (snow and fog effects)
• GSAP (for smooth lightning and fog animations)
• Tailwind CSS (for modern UI)

Open http://localhost:3000 in your browser.

• /src/app/rain/ – Rain effect (WebGL, shaders, rain types)
• /src/app/snow/ – Snow effect (Three.js, snow types)
• /src/app/fog/ – Fog effect (Three.js, fog types)
• /src/app/components/Navbar.jsx – Navigation bar for switching weather types

• Rain shaders & inspiration:
  Lucas Bebber – RainEffect Shadertoy rain shader
• Snow & fog inspiration:
  React three Fiber docs Freezing cube Images from Unsplash Snow effect inspiration #1 Snow effect inspiration #2 Smoke effect

MIT