gitwtfhub

wtf is raindrop?

jeantimex/raindrop — explained in plain English

Analysis updated 2026-05-18

15TypeScriptAudience · developerComplexity · 4/5Setup · moderate

TL;DR

WebGPU port of the Heartfelt rain-on-glass shader, with grid-placed drops, refraction by slope sampling, and an interactive wiper that clears the mist.

Mindmap

mindmap
  root((raindrop))
    Inputs
      Background image
      Mouse or touch drag
      Parameter panel
    Outputs
      Rain on glass effect
      Refraction
      Wipe mask trail
    Use Cases
      Learn WebGPU shaders
      Study Heartfelt port
      Add ambient web visual
    Tech Stack
      WebGPU
      TypeScript
      WGSL
      Compute shaders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Add a realistic rain-on-glass visual to a hero section of a web page

REASON 2

Learn how to port a Shadertoy shader to WebGPU and WGSL

REASON 3

Study how compute shaders maintain an interactive wipe mask

REASON 4

Tune drop speed, refraction, and lightning parameters for a custom mood

What's in the stack?

WebGPUTypeScriptWGSL

How it stacks up

jeantimex/raindroparedotna/api-examplesceelog/openweread
Stars151515
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderatemoderate
Complexity4/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Needs a WebGPU-capable browser, the effect will not render in browsers without WebGPU support.

Wtf does this do

Raindrop is a small graphics demo that shows realistic raindrops sliding down a glass window in a web browser. It is a reimplementation of a well-known shader called Heartfelt by Martijn Steinrucken, rewritten to run on WebGPU, the newer browser standard for talking to graphics hardware. The effect is computed entirely on the GPU as math, with no actual particles or 3D objects involved. The README walks through how the illusion is built. The screen is divided into a grid, with each cell holding exactly one drop placed at a random spot inside it, and column shifts break up the visible grid pattern. To make the drops behave like real water on glass, the code uses a sawtooth function: each drop sticks in place while surface tension holds it, then slides quickly down once gravity wins, then sticks again. Two layers of drops at different scales add a sense of depth, and tiny static condensation droplets fade in and out in the background. The light-bending look comes from treating each drop as a tiny lens. The shader calculates the slope of each drop by sampling its shape at nearby points, then uses that slope to offset where the background image is read from, which creates the refraction. Background blur is handled by mipmaps, the built-in mini versions of textures the GPU keeps at smaller resolutions, so trails behind drops look softly out of focus while the drops themselves stay sharp. Users can click and drag, or touch on mobile, to wipe the glass clean. A compute shader paints along your drag path into a 512 by 512 wipe mask, and another shader slowly fades that mask back to dirty so rain returns. There is a parameter panel for tuning rain amount, drop speed, refraction, rim light, blur range, lightning flashes, and brush size for the wiper.

Yoink these prompts

Prompt 1
Walk me through the WGSL code in raindrop that computes drop slope and applies refraction to the background sample
Prompt 2
Explain how the sawtooth function in raindrop makes drops stick to the glass then slide under gravity
Prompt 3
Show me how the compute shader in raindrop paints into the 512x512 wipe mask when the user drags
Prompt 4
Embed the raindrop WebGPU effect into a Next.js page and pass it a custom background image
Prompt 5
List the tuning parameters in raindrop and explain how each one changes the visual

Frequently asked questions

wtf is raindrop?

WebGPU port of the Heartfelt rain-on-glass shader, with grid-placed drops, refraction by slope sampling, and an interactive wiper that clears the mist.

What language is raindrop written in?

Mainly TypeScript. The stack also includes WebGPU, TypeScript, WGSL.

How hard is raindrop to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is raindrop for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.