---
title: "Gradient Type Waves — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Can Girgin · Text. What it is Hero Type Waves turns any headline into a fluid, wave-driven showpiece."
canonical: "https://framer.elliotli.dev/component/gradient-type-waves"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Gradient Type Waves

# Gradient Type Waves

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

![Gradient Type Waves preview image 1](https://framer.elliotli.dev/og/component/gradient-type-waves/3afa6dd49bc569a5/1600x1200.jpg)

## Summary

What it is Hero Type Waves turns any headline into a fluid, wave-driven showpiece.

## Description

## What it is

**Hero Type Waves** turns any headline into a fluid, wave-driven showpiece. It’s SVG-based (no libraries), fully responsive, and built for performance.

## Highlights

-   **Auto-fit type**: headline fills the path without clipping
    
-   **Per-device control**: separate sizes or scales for mobile & tablet
    
-   **Seamless gradient flow** (no flicker or resets)
    
-   **Smooth motion**: high-resolution wave path
    
-   **Accessible**: respects prefers-reduced-motion
    
-   **Framer-ready**: single drop-in component, no dependencies
    

## Controls (props)

-   **Text / Font** – your headline & Framer font
    
-   **Auto-fit** – let the component size text to the wave (recommended)
    
-   **Desktop / Tablet / Mobile Size (px)** – manual sizes when Auto-fit is off
    
-   **Mobile Scale / Tablet Scale** – tweak only those breakpoints when Auto-fit is on
    
-   **Use Gradient, Color 1, Color 2** – brand colors with endless flow
    
-   **Wave Amplitude, Wave Speed** – motion feel
    
-   **Gradient Speed** – how fast the gradient travels
    
-   **Align** – left / center / right
    
-   **Background** – optional backdrop color
    

## How to use

1.  Drop **Hero Type Waves** into your frame and set a height.
    
2.  Type your headline and pick your **Font**.
    
3.  Leave **Auto-fit: Yes** for instant sizing, or turn it off to enter Desktop/Tablet/Mobile sizes.
    
4.  Adjust **Wave/Gradient** speeds to taste.
    
5.  Optional: fine-tune **Mobile/Tablet Scale** for tiny screens.
    

## Accessibility

-   Honors prefers-reduced-motion: animations pause for motion-sensitive users.
    
-   Pure text masking, so screen readers still announce your headline.
    

## Performance

-   GPU-friendly SVG + CSS; no external libraries.
    
-   Animations pause in Framer Canvas (when needed) to keep editing smooth; Preview/Publish run at full quality.
    

## Notes

-   Works with any background (images, videos, solid colors).
    
-   For ultra-long words, reduce Wave Amplitude or use Auto-fit.
    

## Support

Questions or ideas? Reach out and I’ll help you tune it for your brand.

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

-   All · #10672

## Details

- **Author**: Can Girgin
- **Price**: $5.00
- **Published**: 2025-08-13
- **Updated**: 2025-11-10
- **Added**: 2025-08-09
- **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