---
title: "Wave Type"
canonical_url: "https://framerhub.io/components/wave-type"
last_updated: "2026-06-15T14:46:32.501Z"
---

## Wave Type

Add a calming, fluid motion to your text with Wave Type. This component maps your typography onto a 3D plane that ripples and flows like fabric or water.

## Features

**3D Text Mapping**
Your text is rendered into a high-quality texture and draped over a 3D plane geometry.

**Wave Animation**
A smooth sine-wave distortion ripples through the text, creating a hypnotic relaxing effect.

**Interactive 3D**
Includes auto-rotation that can be adjusted or combined with mouse interactions.

**Customizable Styling**
Full control over text colors, background colors, and typography branding.

## Use Cases

**Hero Sections** — Create a sophisticated, abstract background for your landing page.

**Mood Setters** — Perfect for wellness, spa, or creative portfolio sites.

**Typography Showcases** — Display fonts in a unique, dimensional way.

![Wave Type Preview](/framerhub/img/components/control/wave-type.jpg)

## How to Use

### Installation

1. Copy the component URL
2. Open your Framer project
3. Paste the component (Cmd/Ctrl + V)

### Customization

**Text & Font**
Enter your text and select any font. Bold, typographic fonts work best for the wave effect.

**Colors**

- **Text Color**: The color of the letters.
- **Plane Color**: The background color of the 3D plane itself (fills the gaps).

**Animation**

- **Wave Speed**: How fast the ripples move.
- **Auto Rotate**: Enable/disable slow rotation of the plane.
- **Rotation Speed**: Speed of the rotation.

### Quick Tips

**Matching Colors** — Set the **Plane Color** and **Background** to the same hex code to make the text appear floating in space without visible edges.

**Font Looping** — Use repetitive text (e.g., "RELAX RELAX RELAX") to create a seamless pattern effect.

**Performance** — This uses Three.js. It is performant, but keeps an eye on CPU usage if you have multiple instances.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!