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.
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.
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.
For support, feedback, or feature requests:
X / Twitter: @Karim Saif
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.
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.
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.
For support, feedback, or feature requests:
X / Twitter: @Karim Saif
