Skip to content

component

Scroll 3D Text

By Aidan Looker

Details

Summary

What is Scroll 3D Text?

Description

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 .

Introduction

Text reveals with depth and images.

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600177968/148/228/309/79/15
  • All · #7330