---
title: "Sphere 3D Timeline — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Sections. What is Sphere 3D Timeline?"
canonical: "https://framer.elliotli.dev/component/sphere-3d-timeline"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Sphere 3D Timeline

# Sphere 3D Timeline

Scroll-driven 3D globe timeline

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

![Sphere 3D Timeline preview image 1](https://framer.elliotli.dev/og/component/sphere-3d-timeline/e21ef54563ceedd0/1600x1200.jpg)

## Summary

What is Sphere 3D Timeline?

## Description

## What is Sphere 3D Timeline?

Sphere 3D Timeline is a scroll-driven storytelling component that maps your milestones onto a rotating 3D sphere. As the viewer scrolls, a glowing progress line spirals across the globe surface, activating crystal milestone nodes that reveal rich content cards with text, images, and video. Ideal for company histories, product roadmaps, portfolio timelines, and case study narratives.

[![](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

-   Scroll-animated progress line that wraps around a 3D sphere with proper depth occlusion — the line visibly disappears behind the globe and re-emerges on the other side
    
-   Crystal milestone nodes with faceted glass styling, pulse animations, and contextual glow effects that activate as the progress line reaches them
    
-   Glassmorphic content cards with connector lines, supporting title, date, category, description, responsive images, and autoplay video
    
-   Four curated color themes — White, Sapphire, Gold, and Rose — with adjustable glow intensity and node styling
    
-   Perspective-projected sphere with latitude/longitude grid lines, rim lighting, inner radiance, and specular highlights for a premium 3D look
    

## Controls inside Framer

### Appearance

-   Glow Color — White, Sapphire, Gold, or Rose theme presets
    
-   Brightness — adjust glow intensity from subtle to vivid
    
-   Node Style — Diamond, Sapphire, or Frost faceted glass effect
    
-   Background — set any color or keep transparent
    

### Sphere

-   Size — sphere diameter from 300px to 800px
    
-   Tilt Angle — diagonal orientation of the spiral path (15° to 60°)
    
-   Grid Lines — show or hide the latitude/longitude wireframe
    
-   Sphere Opacity — fade the globe for lighter layouts
    

### Sizing

-   Height — total scroll distance from 2000px to 6000px
    
-   Panel Width — content card width from 200px to 400px
    
-   Node Size — milestone node diameter from 24px to 60px
    

### Milestones

-   Up to 5 milestones with title, date, category, description, responsive image, and video file
    
-   Toggle Demo Mode for instant preview with built-in sample data
    

## Best use cases

-   Agency and startup "About Us" pages showcasing company history and growth milestones
    
-   Product launch timelines and roadmap presentations that need to feel premium
    
-   Portfolio case studies walking viewers through a project journey step by step
    
-   SaaS landing pages highlighting key achievement moments and social proof
    

Ship a timeline that looks like a custom WebGL build — without writing a single line of code.

## 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 · #8758

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-02-19
- **Updated**: 2026-06-13
- **Added**: 2026-02-14
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes