Component
Text Area Scramble for Framer
This is a Framer recreation of the Scramble Hover effect, originally created by David Haz. It’s a fully customizable component right inside Framer that can add a bit of spice to your Web3 or sci-fi vibe websites. Feel free to remix the project or copy the component to your own site and start playing around with it.
Created by
About the resource
Using the component is simple. Just drag and drop it onto your canvas and start tweaking it using the properties panel on the right. You can add any amount of text, change the font and color settings, and adjust plenty of other things too.
About the resource
Using the component is simple. Just drag and drop it onto your canvas and start tweaking it using the properties panel on the right. You can add any amount of text, change the font and color settings, and adjust plenty of other things too.
About the resource
Using the component is simple. Just drag and drop it onto your canvas and start tweaking it using the properties panel on the right. You can add any amount of text, change the font and color settings, and adjust plenty of other things too.
The property controls of the Scramble Area component.
The property controls of the Scramble Area component.
The property controls of the Scramble Area component.
As you can see in the image above, you can also set the percentage, which basically controls how many characters in your hover radius get scrambled. Want to scramble all the characters in the circle? Set it to 100. Want to scramble just a few? Set it to a lower value. Feel free to play around with it and create something cool.
Quick tip: make sure to also think about the role of your text layer. Is it the main heading on your website? Set the component to
h1. Is it just a paragraph? Set it top.
As you can see in the image above, you can also set the percentage, which basically controls how many characters in your hover radius get scrambled. Want to scramble all the characters in the circle? Set it to 100. Want to scramble just a few? Set it to a lower value. Feel free to play around with it and create something cool.
Quick tip: make sure to also think about the role of your text layer. Is it the main heading on your website? Set the component to
h1. Is it just a paragraph? Set it top.
As you can see in the image above, you can also set the percentage, which basically controls how many characters in your hover radius get scrambled. Want to scramble all the characters in the circle? Set it to 100. Want to scramble just a few? Set it to a lower value. Feel free to play around with it and create something cool.
Quick tip: make sure to also think about the role of your text layer. Is it the main heading on your website? Set the component to
h1. Is it just a paragraph? Set it top.
