---
title: "Colorful TypeMotion — Free Framer component · Best of Framer"
description: "Free Framer component · by Petry Yuri Oliveira · Text. Colorful TypeMotion brings high-end motion design to your Framer projects with an elegant multi-color sweep animation that reveals…"
canonical: "https://framer.elliotli.dev/component/colorful-typemotion"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Colorful TypeMotion

# Colorful TypeMotion

Multi color layer animated text reveal

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

![Colorful TypeMotion preview image 1](https://framer.elliotli.dev/og/component/colorful-typemotion/0a1477daa5bf001d/1600x1200.jpg)

## Summary

Colorful TypeMotion brings high-end motion design to your Framer projects with an elegant multi-color sweep animation that reveals text as the bar retracts.

## Description

Colorful TypeMotion brings high-end motion design to your Framer projects with an elegant multi-color sweep animation that reveals text as the bar retracts.

Built for designers who care about detail and control, this component allows you to fully customize the animation behavior, timing, typography, and color layering — without writing any additional code.

### ✨ Features

-   Multi-layer color sweep (up to 5 customizable colors)
    
-   Sequential color stagger for dynamic motion
    
-   Text revealed character-by-character
    
-   Perfect sync between sweep retraction and text reveal
    
-   Adjustable animation duration and delay
    
-   Customizable corner radius (with masked color layers)
    
-   Full Framer Font Control support (any installed font)
    
-   Clean, performant CSS animation
    

### 🎯 Perfect for

-   Hero sections
    
-   Portfolio intros
    
-   Landing page headlines
    
-   Brand statements
    
-   Motion-focused websites
    

Colorful TypeMotion is designed to feel smooth, intentional, and premium — giving your typography a bold animated entrance while remaining fully customizable inside Framer.

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

-   All · #6153

## Details

- **Author**: Petry Yuri Oliveira
- **Published**: 2026-03-03
- **Updated**: 2026-03-03
- **Added**: 2026-02-24
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing