Floating Letters
A text component that creates interactive hover effects where letters transform into colorful floating shapes with customizable gradients, animations, and text properties.
Make it with Workshop
Build your own component with AI
This component is part of Framercrafts, a library of supercharged Framer components and overrides.
Description
Floating Letters transforms regular text into an interactive experience. When users hover over letters, they disappear and are replaced by colorful floating shapes with gradient effects. Each letter produces a unique shape, direction, and color combination, creating a playful and engaging text display.
Use Cases
1. Interactive Headlines - Engaging section titles for websites
2. Creative Typography - Artistic text displays for portfolios
3. Hover Effects - Interactive elements for navigation or buttons
4. Attention-Grabbing Text - Highlight important messages or quotes
5. Decorative Elements - Add visual interest to otherwise static text
Customizations
• Text Content - Any text to display with the effect
• Gradient Colors - Custom color palette for the floating shapes
• Float Distance - Control how far shapes float from their origin
• Font Properties - Size, color, weight, line height, and alignment
• Shape Variety - Random shapes including circles, rectangles, ovals, and triangles
