Cursor-follow particles

Calculate the visual parameters

Scale and opacity

The scale and opacity are determined by the distance between the cursor and the particle. We can enhance the effect by defining a few properties that influence the visual parameters. These properties can then be adjusted through property controls.

Properties:

• Radius = Range within which the particle's scale and opacity will be affected by the cursor's proximity. As the value increases, the impacted area expands.

• minScale = Smallest size for the particle.

• minOpacity = Lowest opacity for the particle.

Next, we calculate the ratio of the distance between the cursor and the particle. If the particle is at its maximum distance, this ratio will be 1.

distance / radius

We ensure the ratio never exceeds 1.

Math.min(distance / radius, 1)

We then invert the ratio. If the particle is at its maximum distance, this will be 0. Essentially, the further away the particle is, the smaller and less opaque it becomes.

1 - Math.min(distance / radius, 1)

Finally, we ensure that the calculations do not fall below the minimum scale and opacity.

const scale = Math.max(1 - Math.min(distance / radius, 1), minScale);
const opacity = Math.max(1 - Math.min(distance / radius, 1), minOpacity);

Color

The color is calculated by performing linear interpolation on the RGBA values between two colors, colorA and colorB, based on the distance of the particle from the cursor. The closer the particle is to the cursor, the closer the color will be to colorA.

The red, green, blue, and alpha (opacity) components of the interpolated color are calculated separately.

const interpolationFactor = Math.min(distance / radius, 1);
const red = colorA.red + interpolationFactor * (colorB.red - colorA.red);

The interpolationFactor is a value between 0 to 1 that represents how far the particle is from the cursor.

When the interpolationFactor is 0, the particle is at the cursor, and this calculation returns the component of colorA. If the interpolationFactor is 1, the particle is at the maximum distance, and it returns the component of colorB. For values in between, it returns a mix of the two colors.

If we were to unpack this in a visualize way, taking an example on how the "R" part of a color works…

This formula is applied for each of the RGBA components (r, g, b, a). They are then combined into a CSS RGBA color string. Since CSS requires the R, G, B parts to be whole numbers, we use Math.round to achieve this.

return `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`;

X, Y Movement

As your cursor moves around the particle grid, we aim to apply a delicate motion to the entire grid that follows your cursor. To accomplish this, we could normalize the previously calculated dx and dy.

const offsetX = dx / window.innerWidth
const offsetY = dy / window.innerHeight

This implies that the offsetX and offsetY values will range between -1 and 1, signifying the relative cursor distance from the particle as a percentage of the window's width and height.

Consider this example for visualization:

We have a webpage with a window width of 1200px and a height of 800px.

1. A particle is positioned at (600px, 400px) - the exact window center.

2. The cursor is positioned at (300px, 200px).

3. The dx will be 300px - 600px = -300px, and the dy will be 200px - 400px = -200px.

4. offsetX will be -300px / 1200px = -0.25.

5. offsetY will be -200px / 800px = -0.25.

We then use these normalized offsets to animate the particle's x and y positions. The maxOffsetX and maxOffsetY are values you could set via the Framer UI to determine the extent of your particle movements.

animate={{
  x: (particleAnim[id]?.offsetX || 0) * props.offset.maxOffsetX,
  y: (particleAnim[id]?.offsetY || 0) * props.offset.maxOffsetY,
}}

If offsetX and offsetY are both -0.25, it indicates that the cursor is located to the particle's left and above it, at 25% of the window's width and height, respectively.

As the cursor moves closer to the particle, these offset values approach 0. If the cursor moves further away, the values approach -1 or 1, based on the movement direction.

The animate property will also be the same for how you define max value for scale and opacity.

animate={{
  scale: (particleAnim[id]?.scale || 1) * props.scale.maxScale,
  opacity: (particleAnim[id]?.opacity || 1) * props.opacity.maxOpacity,
}}