3D Particle Sphere

A high-performance interactive 3D particle sphere with cursor-driven dispersion, smooth rotation, and customizable motion trails. Built with WebGL-optimized canvas rendering.

→ Preview component

Overview

A mesmerizing spherical formation of thousands of particles that respond organically to user interaction. Features smooth perpetual rotation, cursor-based dispersion physics, and optional visual trails—all without Three.js complexity.

Features

Fibonacci sphere distribution for optimal visual density
Depth-based scaling and fading for realistic 3D perspective
Cursor dispersion with velocity-based physics
Click effects: Scatter, Color Change, or Both
Motion trails with configurable length and opacity
Smooth fade-in entrance animation
Mobile touch support with full touch event handling

Performance

Optimized for 5,000+ particles at 60fps. Uses circular buffer trails, squared distance checks, and automatic static preview generation for thumbnails.

Customization

All properties accessible via visual controls—no code required:

Property	Range
Particle count	100–10,000
Particle size	1–10px
Colors	Particle + mouseover color
Animation speed	0.1x–5x
Cursor radius	50–500px
Click force	Configurable intensity
Trails	Toggle + length (2–30) + opacity

Use Cases

Hero sections and landing pages
Portfolio backgrounds
SaaS product pages
Event and conference sites
Interactive loading states

Integration

Drop the component into your Framer project and customize via the property controls panel. Automatically handles responsive sizing, device pixel ratio scaling, and graceful degradation for static renders.

Refund Policy

As this is a digital product, refunds are not available. Once purchased, the component cannot be returned. Please review the product details and preview carefully before purchasing.