Component
SVG Path Shimmer Component
This is a customizable SVG path shimmer component for Framer, inspired by Verse's work, that adds smooth, shimmering animations to SVG paths with flexible design controls.
About the resource
To use this component, simply copy and paste it onto your canvas and adjust its properties from the right panel. Select between "Graphic" and "SVG" modes. In "Graphic" mode, connect to a "Graphic" layer on the canvas containing a single path—this will use the path color from that layer. In "SVG" mode, upload an SVG file (though other formats like PNG, JPG, and WEBP may appear available, only SVG is actually supported).
You can set a background color for the path in SVG mode. The "Shimmer" property controls both the shimmer color and its length as a percentage of the total path. Animation is controlled through "Transition" and "Trigger" options. Triggers include immediate animation on appearance or animation when the component enters the viewport.
Choose from animation styles like "Loop," "Mirror," or "Once." The "Replay" option determines whether the animation repeats when the layer re-enters view (only available when "Trigger" is set to "Layer in View" and "Animation" is "Once"). Finally, set the "Direction" to either default (start to end) or reverse (end to start).
About the resource
To use this component, simply copy and paste it onto your canvas and adjust its properties from the right panel. Select between "Graphic" and "SVG" modes. In "Graphic" mode, connect to a "Graphic" layer on the canvas containing a single path—this will use the path color from that layer. In "SVG" mode, upload an SVG file (though other formats like PNG, JPG, and WEBP may appear available, only SVG is actually supported).
You can set a background color for the path in SVG mode. The "Shimmer" property controls both the shimmer color and its length as a percentage of the total path. Animation is controlled through "Transition" and "Trigger" options. Triggers include immediate animation on appearance or animation when the component enters the viewport.
Choose from animation styles like "Loop," "Mirror," or "Once." The "Replay" option determines whether the animation repeats when the layer re-enters view (only available when "Trigger" is set to "Layer in View" and "Animation" is "Once"). Finally, set the "Direction" to either default (start to end) or reverse (end to start).
About the resource
To use this component, simply copy and paste it onto your canvas and adjust its properties from the right panel. Select between "Graphic" and "SVG" modes. In "Graphic" mode, connect to a "Graphic" layer on the canvas containing a single path—this will use the path color from that layer. In "SVG" mode, upload an SVG file (though other formats like PNG, JPG, and WEBP may appear available, only SVG is actually supported).
You can set a background color for the path in SVG mode. The "Shimmer" property controls both the shimmer color and its length as a percentage of the total path. Animation is controlled through "Transition" and "Trigger" options. Triggers include immediate animation on appearance or animation when the component enters the viewport.
Choose from animation styles like "Loop," "Mirror," or "Once." The "Replay" option determines whether the animation repeats when the layer re-enters view (only available when "Trigger" is set to "Layer in View" and "Animation" is "Once"). Finally, set the "Direction" to either default (start to end) or reverse (end to start).
The svg path shimmer component properties in Framer.
The svg path shimmer component properties in Framer.
The svg path shimmer component properties in Framer.
