Scroll 3D Text

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

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.