---
title: "Scroll 3D Text — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aidan Looker · Text. What is Scroll 3D Text?"
canonical: "https://framer.elliotli.dev/component/scroll-3d-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Scroll 3D Text

# Scroll 3D Text

Text reveals with depth and images.

[View on Framer](https://framer.com/marketplace/components/scroll-3d-text/?via=elliot-li)

![Scroll 3D Text preview image 1](https://framer.elliotli.dev/og/component/scroll-3d-text/9d21a96eba2480d0/1600x1200.jpg)

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #11254

## Details

- **Author**: Aidan Looker
- **Price**: $9.00
- **Published**: 2026-05-07
- **Updated**: 2026-06-13
- **Added**: 2026-04-25
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos