Component
Text Lift on Hover in Framer
This is a Text Lift on Hover in Framer, recreated from Wondermake website, one of those small details that makes an interface feel alive. Remix the file to dig into how it's built, or just drop the component straight into your project.
About the resource
To create this animation, I built a single component with six variants, Default and one hover variant for each letter in STAND. For each letter, multiple text layers of the same character are stacked on top of each other using absolute positioning, giving each letter its depth from the start.
On hover, only the targeted letter's stack shifts upward and to the right, with each text layer offset at a slightly different position to sell the lift. Because every layer is absolutely positioned, nudging them independently creates the illusion of the letter physically rising off the surface rather than just sliding as a flat element.
About the resource
To create this animation, I built a single component with six variants, Default and one hover variant for each letter in STAND. For each letter, multiple text layers of the same character are stacked on top of each other using absolute positioning, giving each letter its depth from the start.
On hover, only the targeted letter's stack shifts upward and to the right, with each text layer offset at a slightly different position to sell the lift. Because every layer is absolutely positioned, nudging them independently creates the illusion of the letter physically rising off the surface rather than just sliding as a flat element.
About the resource
To create this animation, I built a single component with six variants, Default and one hover variant for each letter in STAND. For each letter, multiple text layers of the same character are stacked on top of each other using absolute positioning, giving each letter its depth from the start.
On hover, only the targeted letter's stack shifts upward and to the right, with each text layer offset at a slightly different position to sell the lift. Because every layer is absolutely positioned, nudging them independently creates the illusion of the letter physically rising off the surface rather than just sliding as a flat element.
The stand text component with six variants.
The stand text component with six variants.
The stand text component with six variants.
