Component
Cursor Attract Component for Framer
This is a recreation of the Cursor Attract effect for Framer, from Daniel's work. It adds interactive gravity to your elements with attract and repel effects. Simply copy and paste it into your project for engaging interactions.
Created by
About the resource
To use the Cursor Gravity component, you can customize how shapes interact with the cursor through various settings. The Direction feature allows you to choose between Repel (items move away from the cursor) and Attract (items move toward the cursor). Adjust the Intensity to control the strength of the cursor gravity and the Range to determine the distance in pixels where the gravity effect applies.
You can choose between Circles or Squares under Shapes, or connect multiple Framer layers using the Layers option. Customize the Color of shapes by either applying a single color or enabling random colors for each shape.
The Count setting lets you define the number of circles or squares generated, while the Size option adjusts their minimum and maximum size. For square shapes, you can control the Radius (in %) to set corner roundness.
You can also adjust the Rotation setting to either keep shapes unrotated or apply random rotation. The Margin feature allows you to expand the hitbox of shapes, adding a visual gap between colliding items.
You can enhance the component’s appearance by adding a Background color and adjusting the component’s overall Radius for smoother edges.
About the resource
To use the Cursor Gravity component, you can customize how shapes interact with the cursor through various settings. The Direction feature allows you to choose between Repel (items move away from the cursor) and Attract (items move toward the cursor). Adjust the Intensity to control the strength of the cursor gravity and the Range to determine the distance in pixels where the gravity effect applies.
You can choose between Circles or Squares under Shapes, or connect multiple Framer layers using the Layers option. Customize the Color of shapes by either applying a single color or enabling random colors for each shape.
The Count setting lets you define the number of circles or squares generated, while the Size option adjusts their minimum and maximum size. For square shapes, you can control the Radius (in %) to set corner roundness.
You can also adjust the Rotation setting to either keep shapes unrotated or apply random rotation. The Margin feature allows you to expand the hitbox of shapes, adding a visual gap between colliding items.
You can enhance the component’s appearance by adding a Background color and adjusting the component’s overall Radius for smoother edges.
About the resource
To use the Cursor Gravity component, you can customize how shapes interact with the cursor through various settings. The Direction feature allows you to choose between Repel (items move away from the cursor) and Attract (items move toward the cursor). Adjust the Intensity to control the strength of the cursor gravity and the Range to determine the distance in pixels where the gravity effect applies.
You can choose between Circles or Squares under Shapes, or connect multiple Framer layers using the Layers option. Customize the Color of shapes by either applying a single color or enabling random colors for each shape.
The Count setting lets you define the number of circles or squares generated, while the Size option adjusts their minimum and maximum size. For square shapes, you can control the Radius (in %) to set corner roundness.
You can also adjust the Rotation setting to either keep shapes unrotated or apply random rotation. The Margin feature allows you to expand the hitbox of shapes, adding a visual gap between colliding items.
You can enhance the component’s appearance by adding a Background color and adjusting the component’s overall Radius for smoother edges.
Properties of the component.
Properties of the component.
Properties of the component.
