Scroll 3D Text: Premium Sections Component by Aidan Looker

Cinematic scroll-driven typography that animates from 3D space. Each section rotates, translates, and deblurs into view as users scroll — with staggered elements, animated statistics, and an optional image. Four reveal styles, six curated themes, and more.

What is Scroll 3D Text?

Scroll 3D Text is a scroll-driven storytelling component that reveals text sections from 3D space as users scroll through a page. Each section — tag, headline, body, statistic, and image — emerges with cinematic perspective-based transforms including rotation, depth translation, blur, and scale. Built for landing pages, agency portfolios, feature showcases, and editorial storytelling where visual impact drives engagement.

Core Features

Four distinct 3D reveal styles: Fold (book-page Y-axis rotation), Tumble (multi-axis depth rotation), Rise (vertical lift with X-axis tilt), and Fan (corner-pivot rotation)
Staggered child animations where tag, title lines, body, stat, and image cascade into view sequentially within each scroll section
Animated statistics that count up from zero when each section activates — supports integers, decimals, percentages, and suffixed values
Optional per-section image panel with responsive image support and its own 3D reveal animation
Desktop and Mobile layout variants — Desktop renders text and image side-by-side, Mobile stacks text above image in a centred column layout
Six curated theme presets (Dark, Light, Noir, Blush, Sage, Sand) plus full custom colour control

Controls inside Framer

Sections

Tag, title, body text, stat value, stat label, and responsive image per section
Up to 10 sections with array controls

Theme and Style

Theme preset selector with six options plus custom
Reveal style selector: Fold, Tumble, Rise, Fan
Layout variant: Desktop or Mobile

Custom Colours

Text, muted text, accent, and line colour overrides (visible when theme is set to Custom)

Layout

Scroll distance per section (200–800px)

Animation

Stagger delay between child element reveals
3D intensity multiplier (20–200%)
Blur amount control (0–200%)

Typography

Independent font controls for title, body, tag, stat, and stat label
Font controls conditionally hidden when their element is toggled off

Visibility

Individual toggles for tags, body text, stats, accent line, image panel, counter badge, and progress bar

Best use cases

Agency and portfolio landing pages where typography is the hero visual element
Feature showcases and product storytelling sections that need editorial polish
Process, milestone, or capability sections that benefit from sequenced stat reveals
Long-form scroll experiences where each section demands cinematic entrance weight