This product was not featured by Product Hunt yet.
It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).

Product upvotes vs the next 3

Waiting for data. Loading

Product comments vs the next 3

Waiting for data. Loading

Product upvote speed vs the next 3

Waiting for data. Loading

Product upvotes and comments

Waiting for data. Loading

Product vs the next 3

Loading

stipple-gl

A 12KB WebGL2 particle field that morphs into any SVG

stipple-gl is a WebGL2 particle field that morphs into any SVG. Particles drift as a loose 3D cloud, then condense into whatever shape you hand them — a logo, an icon, anything. Drive it with one number: 0 is the cloud, 1 is the shape, anything between is a state you can wire to scroll, hover, or a route change. One draw call, no scene graph, no three.js. 12.4 KB gzipped, zero dependencies. TypeScript, with a React binding. Optionally runs on a Web Worker.

Top comment

Hey everyone 👋 I kept running into this particle-morph effect and wanted to know how it actually worked, so I built my own version. It's a single WebGL2 draw call — no scene graph, no three.js underneath. 12.4 KB gzipped, zero dependencies. Drive it with one number: 0 is a dispersed cloud, 1 is your shape, and anything between is a state you can wire to scroll position, a hover, or a route change. Optionally runs the whole simulation on a Web Worker via OffscreenCanvas so it costs the main thread nothing. Happy to answer any questions about the implementation — would love your feedback!

About stipple-gl on Product Hunt

A 12KB WebGL2 particle field that morphs into any SVG

stipple-gl was submitted on Product Hunt and earned 0 upvotes and 1 comments, placing #65 on the daily leaderboard. stipple-gl is a WebGL2 particle field that morphs into any SVG. Particles drift as a loose 3D cloud, then condense into whatever shape you hand them — a logo, an icon, anything. Drive it with one number: 0 is the cloud, 1 is the shape, anything between is a state you can wire to scroll, hover, or a route change. One draw call, no scene graph, no three.js. 12.4 KB gzipped, zero dependencies. TypeScript, with a React binding. Optionally runs on a Web Worker.

On the analytics side, stipple-gl competes within Open Source, Developer Tools and GitHub — topics that collectively have 629.2k followers on Product Hunt. The dashboard above tracks how stipple-gl performed against the three products that launched closest to it on the same day.

Who hunted stipple-gl?

stipple-gl was hunted by Amirmahdi . A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.

For a complete overview of stipple-gl including community comment highlights and product details, visit the product overview.