---
title: "Particle Shapes — Free Framer component · Best of Framer"
description: "Free Framer component · by Expert & UI/UX Designer | High-Performance Websites · Interactive. Particle-built shapes"
canonical: "https://framer.elliotli.dev/component/particle-shapes"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Particle Shapes

# Particle Shapes

Particle-built shapes

[View on Framer](https://framer.com/marketplace/components/particle-shapes/?via=elliot-li)

![Particle Shapes preview image 1](https://framer.elliotli.dev/og/component/particle-shapes/89cdefe94eac457d/1600x1200.jpg)

## Summary

Particle-built shapes

## Description

ParticleShapes turns any layer into a living particle field. Thousands of light-points assemble into one of 10 forms — Heart, Star, Disk, Ring, Galaxy, Wave, Infinity, Triangle, Square, or your own text (particles sample the glyph pixels) — and hold formation with spring physics.

The pointer is the interaction. Move the cursor and the field repels, gathers or vortices around it; flick fast and your stroke velocity throws the particles like a hand through smoke. Release, and everything flows home.

Fully controllable from the panel — particle count, dot size & variance, fuzz, scale, rotation, position, two-colour ramp, glow/normal blend, pointer mode, radius and force, return spring, damping, idle drift, twinkle, speed, quality caps and a touch-capture toggle for mobile drags.

Built to be safe everywhere • Canvas & exports: `useIsStaticRenderer()` swaps WebGL for a still SVG dot field (or your own static image) — no animation, no timers, no GPU cost while designing. • Published site: one `gl.POINTS` draw call, typed-array physics, loop paused off-screen and in hidden tabs, device-aware quality caps, reduced-motion support. • No WebGL or lost context degrades to the same still field, never a broken layer.

Use it behind a hero headline, as a logo reveal ("Text" shape + your brand ramp), or full-bleed with Glow (Add) blend on dark sections.

## Rank history [How rankings work →](/terms#rankings)

-   All · #820

## Details

- **Author**: Expert & UI/UX Designer | High-Performance Websites
- **Published**: 2026-09-11
- **Updated**: 2026-09-11
- **Added**: 2026-09-11
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step