---
title: "Scroll Burn Text — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Karim Saif · Text. Scroll Burn Text is an interactive, scroll-driven typography component for Framer."
canonical: "https://framer.elliotli.dev/component/scroll-burn-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Scroll Burn Text

# Scroll Burn Text

Cinematic burn-off visual effect

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

![Scroll Burn Text preview image 1](https://framer.elliotli.dev/og/component/scroll-burn-text/a7d2f4aaa7ae4811/1600x1186.jpg)

## Summary

Scroll Burn Text is an interactive, scroll-driven typography component for Framer.

## Description

Scroll Burn Text for Framer

**Scroll Burn Text** is an interactive, scroll-driven typography component for Framer. Built around a cinematic burn-off visual effect, it transitions sequential blocks of text through custom glyph-level opacity animations, chromatic aberration, film grain overlays, and perspective scaling as the user scrolls through a sticky viewport.

## Key Features

-   **Sequential Text Burn**: Smoothly transition text blocks using dynamic glyph opacity calculations and subtle scale perspective transformations based on scroll progress.
    
-   **Chromatic Aberration & Film Grain**: Built-in RGB offset text-shadows combined with a custom fractal-noise SVG grain overlay for a raw, tactile aesthetic.
    
-   **Scroll-Linked Sticky Viewport**: Pins content inside a full-height container while dynamically driving animations based on custom viewport runway height (`vh`).
    
-   **Accessibility & Motion Safeguards**: Includes screen-reader hidden text blocks (`sr-only`), `prefers-reduced-motion` fallbacks to a clean readable layout, and canvas-safe static previews.
    
-   **Real-time Navigation UI**: Features a dynamic section counter display (`01 / XX`) and scroll indicator prompts that fade gracefully as interaction begins.
    

## Property Controls

**Content**

-   **Sections**: Array list to input sequentially burning text paragraphs.
    
-   **Scroll Hint**: Custom string prompt shown prior to initial scroll interaction.
    
-   **Show Scroll Hint**: Toggle switch for the scroll prompt indicator.
    
-   **Show Numbers**: Toggle switch for the section index readout.
    

**Scroll & Viewport**

-   **Runway (VH)**: Adjust scroll distance per section (50vh to 400vh) to customize transition speeds.
    

**Typography & Styling**

-   **Font Size**: Pixel size control for reading text (16px to 80px).
    
-   **Font Weight**: Font weight selection (100 to 900).
    
-   **Text Color**: Primary color picker for typography and overlay UI.
    
-   **Background**: Color picker for sticky background container.
    

## Need Help?

For support, feedback, or feature requests:

-   **X / Twitter**: [@Karim Saif](/community/creator/@karim-saif/)
    

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

-   All · #4907

## Details

- **Author**: Karim Saif
- **Price**: $5.00
- **Published**: 2026-08-12
- **Updated**: 2026-09-16
- **Added**: 2026-08-12
- **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