---
title: "Floating Letters — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Noman · Text. Description Floating Letters transforms regular text into an interactive experience."
canonical: "https://framer.elliotli.dev/component/floating-letters"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Floating Letters

# Floating Letters

[View on Framer](https://framer.com/marketplace/components/floating-letters/?via=elliot-li)

![Floating Letters preview image 1](https://framer.elliotli.dev/og/component/floating-letters/da75a9aa099ef3a7/1600x1200.jpg)

## Summary

Description Floating Letters transforms regular text into an interactive experience.

## Description

This component is part of [Framercrafts](https://framercrafts.com/), 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #10069

## Details

- **Author**: Noman
- **Price**: $10.00
- **Published**: 2025-07-30
- **Updated**: 2025-08-24
- **Added**: 2025-07-29
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos