New Framer Particles Component

In this article, I will show you how to use the new Framer Particles Component to make beautiful animations.

I have been using the Particles Component from the Framer team for a long time, but it was recently deprecated. Since I could not find a good replacement, I decided to rebuild the old component using the latest version of the particles library.

How to Add the Particles Component to Your Project

First, remix this project by clicking the remix button. You'll get a copy of the project in your Framer account. You can find the Particles component in the Components folder and copy it to the project you want to use it in.

How to Use the Particles Component

The component contains a lot of properties to customize the particles. Let's take a look at the most important ones.

Fill

This property allows you to change the color of the particles.

Color

The color settings let you customize how particles are colored. You have two main options: the first one is to use a single color for all particles, and the second one is to use multiple colors.

Amount

This setting controls how many particles appear on your screen.

Tip: Start with a lower number and increase gradually to find the right balance for your design.

Size

This property allows you to change the size of the particles. It can be a single value or a range with a minimum and maximum value.

Opacity

This property allows you to change the opacity of the particles. It can be a single value or a range with a minimum and maximum value.

Links

Links create lines between particles. When links are enabled, you can adjust the color, opacity, distance to choose how far particles can connect, and the width of the lines.

Modes

1. Connect Mode

   • connectDistance: Maximum distance between particles to form connections

   • connectRadius: The radius around each particle where connections can form

   • connectLinksOpacity: The opacity of the lines connecting particles

2. Grab Mode

   • grabDistance: How far the cursor can grab particles

   • grabLinksOpacity: The opacity of the lines between cursor and grabbed particles

3. Bubble Mode

   • bubbleDistance: How close the cursor needs to be to create bubbles

   • bubbleSize: The maximum size particles can grow to

   • bubbleDuration: How long the bubble effect lasts

4. Repulse Mode

   • repulseDistance: How far particles move away from cursor

   • repulseDuration: How long particles stay repelled

5. Push Mode

   • pushQuantity: How many particles to add when clicking

6. Remove Mode

   • removeQuantity: How many particles to remove when clicking

7. Trail Mode

   • trailQuantity: How many particles to create in the trail

   • trailDelay: Delay between trail particle creation

Move

Control how particles move around your design. First, enable movement to access these options:

1. Direction

   • None

   • Basic: Top, Bottom, Left, Right

   • Diagonal: Top-Left, Top-Right, Bottom-Left, Bottom-Right

   • Special: Inside, Outside

2. Basic Settings

   • Speed: How fast particles move

   • Random: Particles move at different speeds

   • Straight: Particles move in straight lines

   • Vibrate: Adds shaking movement

3. Out Mode

   • Out: Particles wrap around to the opposite side

   • Destroy: Particles disappear when leaving

   • Bounce: Particles bounce off edges

   • None: Particles stop at edges

   • Split: Particles split when hitting edges

4. Special Effects

   1. Gravity:

      • Enable gravity effects

      • Acceleration: How fast particles fall

      • Max Speed: Top falling speed

   2. Trail:

      • Enable trailing effects

      • Amount: Number of trail particles

   3. Spin:

      • Enable spinning motion

      • Acceleration: Spin speed

   4. Attract:

      • Enable attraction between particles

      • Distance: How far attraction works

Shape

Pick how your particles look by choosing from these shapes:

1. Basic Shapes:

   • Circle

   • Square

   • Triangle

   • Polygon

   • Star

2. Character

   • Type any letter or symbol

   • Particles will take that character's shape

3. Image

   • Upload your own image

   • Set image width and height

Click

Make your particles react when users click. First, enable clicking to use these effects:

• Attract: Particles move toward your click

• Bubble: Particles grow bigger near clicks

• Push: Add new particles where you click

• Remove: Delete particles you click

• Repulse: Push particles away from clicks

• Pause: Stop particle movement on click

• Trail: Create a trail of particles as you click

Hover

Make particles react when users move their mouse. First, enable hovering to access these effects:

1. Hover Modes

   • Bubble: Particles grow larger under the mouse

   • Repulse: Particles move away from the mouse

   • Trail: Create particles behind mouse movement

   • Attract: Pull particles toward the mouse

   • Bounce: Particles bounce off the mouse

   • Connect: Draw lines to nearby particles

   • Slow: Particles move slower near the mouse

2. Parallax Effect

   • Force: How strongly particles move

   • Smooth: How smooth the movement is

Rotate

Control how particles spin with these settings:

1. Basic Settings

   • Value: Set rotation angle

   • Direction: Choose how particles turn right, left, or random

2. Animation

   • Speed: How fast particles spin

   • Sync: Make all particles spin together

Radius

This setting controls the border radius of the particles component.

And voila, you can now create beautiful particles animations in Framer.