Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Component
This is a hover-triggered text reveal component for Framer, recreated from the “Invisible Ink” effect in iMessage. On hover, the hidden text is smoothly revealed, making it perfect for playful interactions or secret messages. Feel free to copy it to your project, tweak the style, and use it to add a subtle surprise to your site.
Created by
To use the Magic Text Reveal component, start by adding the text you want to animate — it can be a word, phrase, or short sentence. Style it to match your design using the font controls for size, weight, alignment, spacing, and more. The color setting applies to both the text and the animated particles, keeping everything visually consistent.
You can adjust the spread to control how far particles scatter, tweak the speed for a calm or energetic feel, and set the density to decide how detailed the reveal looks. Turn on repeat to replay the effect on every hover, and use preview to see the animation live inside the Framer editor as you build.
To use the Magic Text Reveal component, start by adding the text you want to animate — it can be a word, phrase, or short sentence. Style it to match your design using the font controls for size, weight, alignment, spacing, and more. The color setting applies to both the text and the animated particles, keeping everything visually consistent.
You can adjust the spread to control how far particles scatter, tweak the speed for a calm or energetic feel, and set the density to decide how detailed the reveal looks. Turn on repeat to replay the effect on every hover, and use preview to see the animation live inside the Framer editor as you build.
To use the Magic Text Reveal component, start by adding the text you want to animate — it can be a word, phrase, or short sentence. Style it to match your design using the font controls for size, weight, alignment, spacing, and more. The color setting applies to both the text and the animated particles, keeping everything visually consistent.
You can adjust the spread to control how far particles scatter, tweak the speed for a calm or energetic feel, and set the density to decide how detailed the reveal looks. Turn on repeat to replay the effect on every hover, and use preview to see the animation live inside the Framer editor as you build.
The magic text reveal component properties in Framer.
The magic text reveal component properties in Framer.
The magic text reveal component properties in Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
