---
title: "Particle Sphere — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Gunnar Gray · Sections. Overview A spherical formation of thousands of particles that respond organically to user interaction."
canonical: "https://framer.elliotli.dev/component/particle-sphere"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Particle Sphere

# Particle Sphere

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

![Particle Sphere preview image 1](https://framer.elliotli.dev/og/component/particle-sphere/472981bb62d1b2e4/1600x1200.jpg)

## Summary

Overview A spherical formation of thousands of particles that respond organically to user interaction.

## Description

## Overview

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-pei4qp5e-lODJxjPxYXZovrNCoifCzgYZUYwQ4u)

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

-   Particle count
    
-   Particle size
    
-   Colors
    
-   Animation speed
    
-   Cursor radius
    
-   Click force
    
-   Trails
    

### Use Cases

-   Hero sections and landing pages
    
-   Portfolio backgrounds
    
-   SaaS product pages
    
-   Mobile sites
    
-   Interactive loading states
    
-   404 pages
    

### Integration

Drop the component into your Framer project and customize via the property controls panel.

### 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. Reach out to [hi@gunnargray.supply](mailto:hi@gunnargray.supply) with any questions.

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

-   All · #7524

## Details

- **Author**: Gunnar Gray
- **Price**: $5.00
- **Published**: 2025-12-15
- **Updated**: 2025-12-19
- **Added**: 2025-12-07
- **Categories**: Sections

## More like this

-   [Velours Index](/component/velours-index) — Hamim Reza · $10 — Hover a title, reveal the film
-   [BlogSingleX Single](/component/blogsinglex-single) — Themomarket · $8 — Single Blog Details Component
-   [Slanted Cascade Cove](/component/slanted-cascade-cove) — Karim Saif · Free — Diagonal photo gallery
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews