Particle Loader
Particle Loader is a loader in the UI HUB loaders collection. A Canvas 2D particle loader. Dots are seeded once on a fibonacci sphere (fib) and converted to polar coords; each frame a bump curve eases them from the equator shell up over the poles, then each dot is yaw/pitch-spun, perspective-projected (PERSPECTIVE 3.5 onto pv/(pv-z)) and painter-sorted by depth so nearer dots dra…
The component is driven by 10 documented props (width, height, dotColor, density, dotSize, speed and 4 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D; requestAnimationFrame loop; Pointer Capture API.
Preview the loader in the browser above, copy the source, and paste it into your project. Loaders components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Particle Loader?
A fluorescent particle tether loader: dots bloom up from the equator over a fibonacci-sphere shell with perspective depth and auto-fit sizing, and you can drag to spin the whole field with momentum.
Particle Loader at a glance
- Category
- Loaders
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 10
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Particle Loader works
A Canvas 2D particle loader. Dots are seeded once on a fibonacci sphere (fib) and converted to polar coords; each frame a bump curve eases them from the equator shell up over the poles, then each dot is yaw/pitch-spun, perspective-projected (PERSPECTIVE 3.5 onto pv/(pv-z)) and painter-sorted by depth so nearer dots draw last. A cached autoFit probes 20 frames to scale the field into its host, and dotScaleFor sizes points by canvas size. Pointer drag reorients the shell with exponential-inertia damping (drag/damping), touchAction none enables one-finger fling on mobile. The canvas DPR-caps at 2 and re-measures the host every frame, so it resizes live without a ResizeObserver. Wrapper is 100%x100% with a 24px floor.
Technical information for Particle Loader
| Category | Loaders |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas |
| State change | a low ring of dots orbiting at the equator to the tether blooms up over the poles into a full converging shell, reorientable by dragging with momentum |
| Props | 10 configurable |
| Usage example | Not published yet |
What Particle Loader requires
- Canvas 2D
- requestAnimationFrame loop
- Pointer Capture API
- devicePixelRatio cap
- pointer events + touchAction none
Particle Loader questions
What is Particle Loader?
A fluorescent particle tether loader: dots bloom up from the equator over a fibonacci-sphere shell with perspective depth and auto-fit sizing, and you can drag to spin the whole field with momentum.
How does Particle Loader work?
A Canvas 2D particle loader. Dots are seeded once on a fibonacci sphere (fib) and converted to polar coords; each frame a bump curve eases them from the equator shell up over the poles, then each dot is yaw/pitch-spun, perspective-projected (PERSPECTIVE 3.5 onto pv/(pv-z)) and painter-sorted by depth so nearer dots draw last. A cached autoFit probes 20 frames to scale the field into its host, and dotScaleFor sizes points by canvas size. Pointer drag reorients the shell with exponential-inertia damping (drag/damping), touchAction none enables one-finger fling on mobile. The canvas DPR-caps at 2 and re-measures the host every frame, so it resizes live without a ResizeObserver. Wrapper is 100%x100% with a 24px floor.
Which category does Particle Loader belong to?
Particle Loader is listed under Loaders in the UI HUB catalog. Loading and preloader animations for route transitions and first paint: progress reveals, logo and wordmark loaders, geometric spinners and percentage counters. Each loader exposes timing and label props so it can represent real progress rather than decorative motion. Remember to respect reduced-motion preferences when wiring these in.
What does the width prop do in Particle Loader?
Explicit canvas width in px; 0 falls back to the host element width. It defaults to 0 (auto).
What does the height prop do in Particle Loader?
Explicit canvas height in px; 0 falls back to the host element height. It defaults to 0 (auto).
Is Particle Loader free to use?
Particle Loader is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Particle Loader use?
Particle Loader uses React and is styled with Tailwind CSS.
What does Particle Loader need to run?
Particle Loader needs Canvas 2D, requestAnimationFrame loop, Pointer Capture API and devicePixelRatio cap.