Framer AI AgentsDesign and publish professional sites with AI
Launching today
Particle Studio turns your images into interactive, customizable particle compositions. Upload an image, choose from circles, squares, triangles, or cubes, and fine-tune particle size, motion trails, and cursor interaction to create your own visual experience. When you're happy with the result, share it instantly with Copy Link or take it beyond the studio with Export HTML Bundle to create an offline, interactive version you can experiment with using your own images.
Particle Studio
Particle Studio is a creative playground that transforms ordinary images into interactive particle experiences.
Upload an image and turn it into a customizable particle composition. Experiment with Circle, Square, Triangle, and Cube particles, adjust particle size, and control how your creation moves and responds to interaction.
Q. Want something more atmospheric?
Enable Motion Trail to create fluid, dreamy effects, fine-tune the trail intensity, and adjust the cursor radius to shape how you interact with the particle field.
✨ Additional Features
🔗 Copy Link: Instantly share your particle creation with others.
💻 Export HTML Bundle: Take your creation beyond the studio with an offline, interactive HTML experience. (Desktop only).
Built for designers, developers, creators, and anyone who enjoys experimenting with images, motion, and creative technology.
Upload an image. Customize the particles. Add motion. Make it interactive. 🚀
PicWish
@stelvin_saji how heavy is the Export HTML Bundle for a standard high-res image? curious if it relies on canvas or webgl to render the cube and triangle particles without lagging.
Particle Studio
@mohsinproduct It uses Canvas 2D rather than WebGL. The exported workspace downsamples the source image to a maximum of 800px before generating particles and caps the particle count at around 16K, with lower budgets for more expensive shapes like cubes and triangles. The cube and triangle rendering are also optimized using lightweight fillRect() operations. The bundle size mainly depends on the embedded source image, since it’s packaged directly into the standalone HTML.
Love projects like this! This is kind of those things that you always need exactly that for some project, and you're thinking to yourself, probably someone already created a fine version of that. It's so satisfying to learn that yeah, someone did.