Particles Text for Framer

Copy component

Particles Text for Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

New

New

New

Component

Particles Text for Framer

This is a Framer component that turns any text into an interactive particles, inspired by the work of Louis Hoebregts. You can customize the font, colors, particle size, density, hover area, and more to create playful effects. Feel free to copy and paste it into your project and start experimenting.

image of Nandi Muzsik
image of David
image of Prianca S.
Image of Louis

Created by

,

,

and

Framer University text made of interactive animated particles
Framer University text made of interactive animated particles
Framer University text made of interactive animated particles

About the resource

To use the Particles Text component, enter any word or phrase you'd like to animate as particles. Customize its appearance by choosing a font style, size, and letter spacing, and select one or more colors for a multi-colored particle effect. Adjust how the particles respond to interaction by changing the hover area, particle size, and movement friction. You can also control how many particles make up the text and whether they start from their final shape or form it gradually.

About the resource

To use the Particles Text component, enter any word or phrase you'd like to animate as particles. Customize its appearance by choosing a font style, size, and letter spacing, and select one or more colors for a multi-colored particle effect. Adjust how the particles respond to interaction by changing the hover area, particle size, and movement friction. You can also control how many particles make up the text and whether they start from their final shape or form it gradually.

About the resource

To use the Particles Text component, enter any word or phrase you'd like to animate as particles. Customize its appearance by choosing a font style, size, and letter spacing, and select one or more colors for a multi-colored particle effect. Adjust how the particles respond to interaction by changing the hover area, particle size, and movement friction. You can also control how many particles make up the text and whether they start from their final shape or form it gradually.

Text to particles component settings with hover and motion controls

The particles text component properties in Framer.

Text to particles component settings with hover and motion controls

The particles text component properties in Framer.

Text to particles component settings with hover and motion controls

The particles text component properties in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Curved text ticker component preview for Framer UI

    Curved Text Ticker Component

    Component

    Curved text ticker component preview for Framer UI

    Curved Text Ticker Component

    Component

    Curved text ticker component preview for Framer UI

    Curved Text Ticker Component

    Component

  • Tech-themed pricing card UI with monthly plan selected

    Docking Pricing Plans Interaction in Framer

    Component

    Tech-themed pricing card UI with monthly plan selected

    Docking Pricing Plans Interaction in Framer

    Component

    Tech-themed pricing card UI with monthly plan selected

    Docking Pricing Plans Interaction in Framer

    Component