Component
Animated Pattern Background in Framer
This is an animated pattern background component for Framer, inspired by Liam Matteson. Feel free to copy the component and create cool ASCII or pixel patterns with customizable speed, scale, and colors.
About the resource
To use the Pattern Generator in Framer, you can customize various properties to create unique patterns with text or pixel squares. Choose between ASCII and Pixel styles to build patterns with different visual aesthetics. Control the pattern's appearance by setting the scale, which adjusts the zoom level and font size. You can apply solid colors, gradients, or duotone effects to the characters, with adjustable thresholds for duotone colors.
Select from three distinct mathematical patterns and modify the easing to shift values towards darker or lighter ends. The invert option allows you to flip color or character values for a contrasting effect. Morph 1 and 2 control the movement of two points orbiting around the center, affecting how the pattern radiates. Adjust Speed 1 and 2 to set the pace of each point's movement, and use Interval to determine how frequently the pattern updates. The background radius option lets you shape the pattern's boundaries for a refined finish.
About the resource
To use the Pattern Generator in Framer, you can customize various properties to create unique patterns with text or pixel squares. Choose between ASCII and Pixel styles to build patterns with different visual aesthetics. Control the pattern's appearance by setting the scale, which adjusts the zoom level and font size. You can apply solid colors, gradients, or duotone effects to the characters, with adjustable thresholds for duotone colors.
Select from three distinct mathematical patterns and modify the easing to shift values towards darker or lighter ends. The invert option allows you to flip color or character values for a contrasting effect. Morph 1 and 2 control the movement of two points orbiting around the center, affecting how the pattern radiates. Adjust Speed 1 and 2 to set the pace of each point's movement, and use Interval to determine how frequently the pattern updates. The background radius option lets you shape the pattern's boundaries for a refined finish.
About the resource
To use the Pattern Generator in Framer, you can customize various properties to create unique patterns with text or pixel squares. Choose between ASCII and Pixel styles to build patterns with different visual aesthetics. Control the pattern's appearance by setting the scale, which adjusts the zoom level and font size. You can apply solid colors, gradients, or duotone effects to the characters, with adjustable thresholds for duotone colors.
Select from three distinct mathematical patterns and modify the easing to shift values towards darker or lighter ends. The invert option allows you to flip color or character values for a contrasting effect. Morph 1 and 2 control the movement of two points orbiting around the center, affecting how the pattern radiates. Adjust Speed 1 and 2 to set the pace of each point's movement, and use Interval to determine how frequently the pattern updates. The background radius option lets you shape the pattern's boundaries for a refined finish.
The animated pattern background component properties in Framer.
The animated pattern background component properties in Framer.
The animated pattern background component properties in Framer.
