---
title: "Animated Text Popout — Framer component · Best of Framer"
description: "$5.00 · Framer component · by SOSOTAR · Text. 3D popout text with image or color mask"
canonical: "https://framer.elliotli.dev/component/masked-popout-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Animated Text Popout

# Animated Text Popout

3D pop-out text, can be animated

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

![Animated Text Popout preview image 1](https://framer.elliotli.dev/og/component/masked-popout-text/009038eb6587b182/1600x1200.jpg)

## Summary

3D popout text with image or color mask

## Description

⏹ ⏹ Features ⏹ ⏹

-   **Image Mask:** Fill the extruded body with any image, with zoom and position controls
    
-   **Fallback Color:** Solid color fill when no image is set
    
-   **Depth and Angle:** Control how far the text pops out and in which direction
    
-   **Face Color:** Separate color for the front text surface
    
-   **Scroll Animation:** Letters rise from the ground into position when the component enters view
    
-   **Per-letter Stagger:** Each letter lifts on its own offset timeline
    
-   **Easing:** Choose Linear, Ease Out, Ease In Out, or Spring (with a subtle overshoot)
    
-   **Delay:** Hold before the animation begins after entering view
    
-   **Manual Line Breaks:** Use \\n to break text across multiple lines
    
-   **Full font control:** Family, size, weight, style, and tracking via Framer's native Font picker
    
-   **Text Alignment:** Left, center, or right, active when text wraps to multiple lines
    

Made with ♡ by SOSOTAR. If you have any question, email [play@sosotar.com](mailto:play@sosotar.com)

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

-   All · #8738

## Details

- **Author**: SOSOTAR
- **Price**: $5.00
- **Published**: 2026-03-02
- **Updated**: 2026-09-11
- **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