Scroll Burn Text

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

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

Cinematic burn-off visual effect