Particle Sun
Particle Sun is a particle background in the UI HUB particle backgrounds collection. A single Three.js ShaderMaterial draws ~150,000 additive-blended points as a particle sun on pure black.
The component is driven by 1 documented prop (className), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Three.js ShaderMaterial with custom GLSL; WebGL / BufferGeometry point attributes (position, aSeed, aType); ResizeObserver on the container.
Preview the particle background in the browser above, copy the source, and paste it into your project. Particle Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Particle Sun?
A 150,000-particle sun whose light source orbits a seamless 9-second loop: green-teal shell, crisp limb, fuzzy halo, noise filaments, pointer-steered lighting and click shockwaves.
Particle Sun at a glance
- Category
- Particle Backgrounds
- Pricing
- Free to use
- Libraries
- React and Three.js
- Styling
- Tailwind CSS
- Configurable props
- 1
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Particle Sun works
A single Three.js ShaderMaterial draws ~150,000 additive-blended points as a particle sun on pure black. Geometry is built once with a seeded LCG RNG so the layout is deterministic: 58% inner shell (radius 1 - pow(rnd,2.2)*0.5, biased to the surface), 14% crisp limb ring (0.985..1.015) and the rest fuzzy halo (1.0..1.42), each point carrying position, aSeed (vec4) and aType (0 shell / 1 rim / 2 halo) attributes. All motion lives in the vertex shader: a seamless loop phase a = uTime*2PI/9.0 drives a vec3(cos, sin, cos) flow field that displaces points by 3D value noise (0.10 shell, 0.02 rim, 0.16 halo) so the animation loops exactly every 9 seconds; an intro bloom scales the cloud from 0.2 to 1.0 over 1.6s. Lighting comes from one uLight direction keyframed over the loop (front, right limb, behind, left limb, front, smoothstep between keys): diffuse pow(dot,3)*front*2.6 plus a pow(1-|n.z|,2.2) rim term boosted 5x on the limb ring; halo points instead stretch radially toward the lit limb. Colour blends green vec3(.10,.60,.32) to teal vec3(.10,.70,.66) by value noise, toward yellow at high noise/glow and hot white at peak glow, with ~2.5% of points randomly red or violet, all textured by a value-noise filament ridge and dimmed 0.55 on the back side. Pointer interaction: moving the pointer steers uLight (blended with the timeline, released after 2.2s idle) and tilts the sphere (rotation.y / rotation.x eased from pointer position), the pointer repels nearby points on the xy plane with exp falloff, and pointerdown fires a gaussian shockwave ring that pushes points along their normals; prefers-reduced-motion slows time and disables pointer influence. Sizing uses a ResizeObserver on the container: sphere diameter = 72% of width clamped to 50% of height, DPR capped at 2, point size scaled to the occupied diameter; geometry, material, renderer, listeners and the rAF loop are disposed on unmount.
Technical information for Particle Sun
| Category | Particle Backgrounds |
|---|---|
| Libraries | React and Three.js |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, blend modes, ResizeObserver, requestAnimationFrame |
| State change | a compact, dim particle seed at the centre of a black panel to a fully bloomed green-teal particle sun with a sweeping light, glowing limb and an expanding click shockwave |
| Props | 1 configurable |
| Usage example | Not published yet |
What Particle Sun requires
- Three.js ShaderMaterial with custom GLSL
- WebGL / BufferGeometry point attributes (position, aSeed, aType)
- ResizeObserver on the container
- requestAnimationFrame loop with capped delta
- pointermove / pointerdown / pointerleave listeners
- Web Animations API (element.animate) for the hint fade
- prefers-reduced-motion matchMedia gating
Particle Sun questions
What is Particle Sun?
A 150,000-particle sun whose light source orbits a seamless 9-second loop: green-teal shell, crisp limb, fuzzy halo, noise filaments, pointer-steered lighting and click shockwaves.
How does Particle Sun work?
A single Three.js ShaderMaterial draws ~150,000 additive-blended points as a particle sun on pure black. Geometry is built once with a seeded LCG RNG so the layout is deterministic: 58% inner shell (radius 1 - pow(rnd,2.2)*0.5, biased to the surface), 14% crisp limb ring (0.985..1.015) and the rest fuzzy halo (1.0..1.42), each point carrying position, aSeed (vec4) and aType (0 shell / 1 rim / 2 halo) attributes. All motion lives in the vertex shader: a seamless loop phase a = uTime*2PI/9.0 drives a vec3(cos, sin, cos) flow field that displaces points by 3D value noise (0.10 shell, 0.02 rim, 0.16 halo) so the animation loops exactly every 9 seconds; an intro bloom scales the cloud from 0.2 to 1.0 over 1.6s. Lighting comes from one uLight direction keyframed over the loop (front, right limb, behind, left limb, front, smoothstep between keys): diffuse pow(dot,3)*front*2.6 plus a pow(1-|n.z|,2.2) rim term boosted 5x on the limb ring; halo points instead stretch radially toward the lit limb. Colour blends green vec3(.10,.60,.32) to teal vec3(.10,.70,.66) by value noise, toward yellow at high noise/glow and hot white at peak glow, with ~2.5% of points randomly red or violet, all textured by a value-noise filament ridge and dimmed 0.55 on the back side. Pointer interaction: moving the pointer steers uLight (blended with the timeline, released after 2.2s idle) and tilts the sphere (rotation.y / rotation.x eased from pointer position), the pointer repels nearby points on the xy plane with exp falloff, and pointerdown fires a gaussian shockwave ring that pushes points along their normals; prefers-reduced-motion slows time and disables pointer influence. Sizing uses a ResizeObserver on the container: sphere diameter = 72% of width clamped to 50% of height, DPR capped at 2, point size scaled to the occupied diameter; geometry, material, renderer, listeners and the rAF loop are disposed on unmount.
Which category does Particle Sun belong to?
Particle Sun is listed under Particle Backgrounds in the UI HUB catalog. Particle backgrounds render tens of thousands of points on the GPU: spheres, halos, fields and constellations that drift, glow and react to the pointer. They are the heaviest components in the library, so each one lists its rendering approach and requirements before you copy it. Use them as hero backdrops, section backgrounds or full-page intros where a static gradient would fall flat.
What does the className prop do in Particle Sun?
Optional class applied to the root container. It defaults to "".
Is Particle Sun free to use?
Particle Sun 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 Sun use?
Particle Sun uses React and Three.js and is styled with Tailwind CSS.
What does Particle Sun need to run?
Particle Sun needs Three.js ShaderMaterial with custom GLSL, WebGL / BufferGeometry point attributes (position, aSeed, aType), ResizeObserver on the container and requestAnimationFrame loop with capped delta.