New
New
New
Effect
Pixel Trail Effect for Framer
This is a recreation of Pixel trail effect for Framer, from Daniel’s work. The grid pixels recolor and follow the cursor. It adds a pixel trail interaction to your elements — as you hover, the cursor transforms into a trail of floating pixels, creating a captivating parallax effect.
About the resource
This component works by placing it within the desktop frame of your Framer project — it's that simple.
Quick tip: add it to your entire page by setting the component to fixed position, pin it to all sides with 0 pins, and set the component’s z-index to 10. Also, don’t forget to set its pointer events to “none” so elements below the component will stay clickable.
Once added, the component introduces an engaging pixel trail effect where your cursor transforms into a trail of floating pixels, creating a captivating parallax effect. You can fully customize the effect with several property controls available in the right panel.
About the resource
This component works by placing it within the desktop frame of your Framer project — it's that simple.
Quick tip: add it to your entire page by setting the component to fixed position, pin it to all sides with 0 pins, and set the component’s z-index to 10. Also, don’t forget to set its pointer events to “none” so elements below the component will stay clickable.
Once added, the component introduces an engaging pixel trail effect where your cursor transforms into a trail of floating pixels, creating a captivating parallax effect. You can fully customize the effect with several property controls available in the right panel.
About the resource
This component works by placing it within the desktop frame of your Framer project — it's that simple.
Quick tip: add it to your entire page by setting the component to fixed position, pin it to all sides with 0 pins, and set the component’s z-index to 10. Also, don’t forget to set its pointer events to “none” so elements below the component will stay clickable.
Once added, the component introduces an engaging pixel trail effect where your cursor transforms into a trail of floating pixels, creating a captivating parallax effect. You can fully customize the effect with several property controls available in the right panel.
The pixel trail component properties in Framer.
The pixel trail component properties in Framer.
The pixel trail component properties in Framer.
For example, the "Background" property allows you to set the background color of the component, while the "Trail" property defines the color that replaces the background color when hovering over the element. You can also remove the "Trail" color to create a transparent effect. The "Size" property adjusts the size of each square in the trail, with a minimum size of 5px.
The "Trigger" property lets you control how the trail is created: set to "hover," and the trail appears as you move your mouse; set to "click," and the trail is only active while the mouse click is held down. The "Mode" property offers two options: "Trail" mode, where you can adjust delay and transition settings for a smooth fade-out effect, and "Drawing" mode, where the pixels stay visible and never fade, mimicking a drawing effect.
For example, the "Background" property allows you to set the background color of the component, while the "Trail" property defines the color that replaces the background color when hovering over the element. You can also remove the "Trail" color to create a transparent effect. The "Size" property adjusts the size of each square in the trail, with a minimum size of 5px.
The "Trigger" property lets you control how the trail is created: set to "hover," and the trail appears as you move your mouse; set to "click," and the trail is only active while the mouse click is held down. The "Mode" property offers two options: "Trail" mode, where you can adjust delay and transition settings for a smooth fade-out effect, and "Drawing" mode, where the pixels stay visible and never fade, mimicking a drawing effect.
For example, the "Background" property allows you to set the background color of the component, while the "Trail" property defines the color that replaces the background color when hovering over the element. You can also remove the "Trail" color to create a transparent effect. The "Size" property adjusts the size of each square in the trail, with a minimum size of 5px.
The "Trigger" property lets you control how the trail is created: set to "hover," and the trail appears as you move your mouse; set to "click," and the trail is only active while the mouse click is held down. The "Mode" property offers two options: "Trail" mode, where you can adjust delay and transition settings for a smooth fade-out effect, and "Drawing" mode, where the pixels stay visible and never fade, mimicking a drawing effect.
Using the component in "Drawing" mode.
Using the component in "Drawing" mode.
Using the component in "Drawing" mode.
Finally, the "Delay" property sets the number of seconds before the transition starts, and the "Transition" property controls how the trail smoothly fades back into the background color, with an instant option to remove the fade effect completely. This allows you to create a fully customized and interactive experience tailored to your design needs.
Finally, the "Delay" property sets the number of seconds before the transition starts, and the "Transition" property controls how the trail smoothly fades back into the background color, with an instant option to remove the fade effect completely. This allows you to create a fully customized and interactive experience tailored to your design needs.
Finally, the "Delay" property sets the number of seconds before the transition starts, and the "Transition" property controls how the trail smoothly fades back into the background color, with an instant option to remove the fade effect completely. This allows you to create a fully customized and interactive experience tailored to your design needs.
