---
title: "Statement Fill — Free Framer component · Best of Framer"
description: "Free Framer component · by Rahul Chaurasiya · Text. Text fills as it scrolls into view"
canonical: "https://framer.elliotli.dev/component/statement-fill"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Statement Fill

# Statement Fill

Text fills as it scrolls into view

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

![Statement Fill preview image 1](https://framer.elliotli.dev/og/component/statement-fill/524f688f9a110221/1600x1200.jpg)

## Summary

Text fills as it scrolls into view

## Description

Text starts as a hollow outline. As you scroll, it fills in solid from the top down, one line at a time. Scroll back up and it empties again.

The page never pins or takes over your scroll. The fill just follows where you are on the page.

You can set the font, the outline color and width, the fill color, how soft the fill edge is, and where in the scroll it starts and stops.

Wrap a word in _asterisks_ to make it italic.

One thing to know: the fill follows the text moving up the screen, so you need a page taller than the window. On a short page the text just stays hollow. Lower the End value if you want it to fill sooner.

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

-   All · #4523

## Details

- **Author**: Rahul Chaurasiya
- **Published**: 2026-08-01
- **Updated**: 2026-08-01
- **Added**: 2026-08-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