Live Preview

tsl-morphing-particles.vercel.app

Framework

React

Animation

GSAP/Three.js

Design System

Radix UI/Tailwind CSS

Fonts

System-ui/Menlo

Category

experimental/development tools/tech

Industry

design/technology

Subject

Web & Interactive Design/Art

Project Insights:

Details

Morphing experiment using R3F + TSL! Used DataArrayTexture to store position samples, so the shader just lerps between layers with minimal CPU overhead. It doesn't just use mesh vertices. That would look broken on low-poly models. Instead, I used MeshSurfaceSampler to spawn points directly on the faces. A simple cube and a High-Poly scan get treated the same way, returning the same number of particles. There are two DataArrayTexture buffers. One to sample positions, and one to sample UVs. This keeps shape morphing clean while preserving correct texturing/coloring during transitions. (Text was taken from original post on X. All rights reserved.)

Resources

Have more to say about this website?

Questions

What font does tsl-morphing-particles.vercel.app use?

tsl-morphing-particles.vercel.app uses Menlo, read from the live page.

What is tsl-morphing-particles.vercel.app built with?

tsl-morphing-particles.vercel.app is built with React, GSAP, Three.js, Radix UI, Tailwind CSS.

Where can I find websites like tsl-morphing-particles.vercel.app?

The save.design library groups sites like it under experimental and React, each with its fonts and tech stack.

Check any site yourself with the website analyzer.