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.
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
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
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
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
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
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
