New Framer Particles Component
Learn how to use the new Framer Particles Component to create beautiful animations.
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
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
Grab Mode
grabDistance: How far the cursor can grab particles
grabLinksOpacity: The opacity of the lines between cursor and grabbed particles
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
Repulse Mode
repulseDistance: How far particles move away from cursor
repulseDuration: How long particles stay repelled
Push Mode
pushQuantity: How many particles to add when clicking
Remove Mode
removeQuantity: How many particles to remove when clicking
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:
Direction
None
Basic: Top, Bottom, Left, Right
Diagonal: Top-Left, Top-Right, Bottom-Left, Bottom-Right
Special: Inside, Outside
Basic Settings
Speed: How fast particles move
Random: Particles move at different speeds
Straight: Particles move in straight lines
Vibrate: Adds shaking movement
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
Special Effects
Gravity:
Enable gravity effects
Acceleration: How fast particles fall
Max Speed: Top falling speed
Trail:
Enable trailing effects
Amount: Number of trail particles
Spin:
Enable spinning motion
Acceleration: Spin speed
Attract:
Enable attraction between particles
Distance: How far attraction works
Shape
Pick how your particles look by choosing from these shapes:
Basic Shapes:
Circle
Square
Triangle
Polygon
Star
Character
Type any letter or symbol
Particles will take that character's shape
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:
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
Parallax Effect
Force: How strongly particles move
Smooth: How smooth the movement is
Rotate
Control how particles spin with these settings:
Basic Settings
Value: Set rotation angle
Direction: Choose how particles turn right, left, or random
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.
Don't forget to share this post!