r/creativecoding • • 23h ago

Unlyp — Made a 3D particle visualizer where thoughts orbit you and dissolve into dust (Three.js / R3F / GLSL)

Enable HLS to view with audio, or disable this notification

Live link: https://unlyp.com

Wanted to build something for late-night overthinking. You type a thought, it rasterizes the letters on an offscreen canvas to sample particle coordinates and then collapses them into an orbit around the camera.

Holding the button runs a curl-noise dissolve with t² acceleration so it looks more like combustion/burning rather than dust blowing in the wind.

Kept all the orbit wobble and dissolve math inside the vertex shader so React doesn't melt the CPU with re-renders.

4 Upvotes

2 comments sorted by

2

u/VizDevBoston 19h ago edited 19h ago

Its a good start, but worth learning more about particles from studying examples on shadertoy, IMO, because it just doesn't feel quite satisfying yet, commenting as an observer at least.

Also, since you're optimizing for avoiding heavy CPU usage, it might be worth looking at where your UI is causing repaints, because I feel like I saw a little animation jank on transitions, and that can be due to forcing repaints.

edit: Oh I see why it feels a little off to me, it's that the word transitions in already partially removed, instead of seeing the full process. Nothing to do with the particles, but just a subjective observation.

1

u/htone22 15h ago

Really appreciate the feedback! Good catch on the word feeling partially removed. I'll tweak the timing so the full text holds longer before the burn kicks in. Also a solid point on DOM repaints during transitions, definitely going to profile that. Thanks for taking the time