---
title: "Design Title Text — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Text. Staggered Entrance Animation"
canonical: "https://framer.elliotli.dev/component/design-title-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Design Title Text

# Design Title Text

Staggered Entrance Animation

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

![Design Title Text preview image 1](https://framer.elliotli.dev/og/component/design-title-text/d6a768b98e8e11a4/1600x1043.jpg)

## Summary

Staggered Entrance Animation

## Description

## **About**

**Design Tiles Text** is a dynamic, typographic hero component that turns any headline into an interactive sequence of colorful, blocky text tiles. As visitors view or interact with the text, the background tile colors shuffle smoothly while letter blocks physically react to cursor hovering—creating a bold, memorable graphic statement.

## **What it does**

-   **Staggered Entrance Animation:** Words reveal themselves sequentially from left to right with a smooth expanding tile animation.
    
-   **Ambient Color Shuffling:** Tile backgrounds continuously cycling through vibrant color combinations at random intervals, keeping your page feeling alive.
    
-   **Interactive Letter Heights:** As visitors move their cursor across individual letters, the background highlight blocks subtly expand in height beneath the pointer.
    
-   **Hover Recolor:** Hovering over any word instantly triggers a fresh color swatch shift.
    
-   **Canvas & Reduced-Motion Safe:** Automatically renders in a static preview state inside Framer Canvas and respects visitor system accessibility settings (`prefers-reduced-motion`).
    

## **What you can customize**

Full control directly from Framer’s right-hand property panel — no code needed:

-   **Text** — Enter any sentence or phrase (each space-separated word becomes an interactive tile)
    
-   **Font** — Select any web or system typography family
    
-   **Background** — Set a custom container background color or leave it transparent
    

## **Need help?**

Questions or feedback? Reach out anytime at [**karimsaif010@gmail.com**](mailto:karimsaif010@gmail.com) or on X [@karimsaif0](https://x.com/karimsaif0).

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

-   All · #2857

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-23
- **Updated**: 2026-07-23
- **Added**: 2026-07-23
- **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