---
title: "Cascading Indent — Free Framer component · Best of Framer"
description: "Free Framer component · by Madri Spengler · Text. This component allows you to create a beautiful cascading indent effect where each line shifts horizontally with incremental spacing."
canonical: "https://framer.elliotli.dev/component/cascading-indent"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Cascading Indent

# Cascading Indent

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

![Cascading Indent preview image 1](https://framer.elliotli.dev/og/component/cascading-indent/74531bd32b04d852/1600x1200.jpg)

## Summary

This component allows you to create a beautiful cascading indent effect where each line shifts horizontally with incremental spacing.

## Description

This component allows you to create a beautiful cascading indent effect where each line shifts horizontally with incremental spacing. Control the base indent, the rate of increase, and apply a subtle reveal animation for a polished, professional look.

**Key Features:**

-   **Cascading Indent Effect:** Automatically applies a progressively larger indent to each line.
    
-   **Full Customization:** Adjust the base indent, indent increase and line spacing, text color and font.
    
-   **Dual-Sided Control:** Apply and control indentation effects from both the left and right sides.
    
-   **Optional Reveal Animation:** Enable a smooth animation that slides each line into place. Controls animation delay and animation duration. The animation has an on and off switch. For easy editing, simply switch the animation off. This allows you to work with your text content directly on the canvas without the animation hiding the text.
    

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

-   All · #7944

## Details

- **Author**: Madri Spengler
- **Published**: 2025-09-11
- **Updated**: 2025-09-11
- **Added**: 2025-09-01
- **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