Streak Sphere
Streak Sphere is a particle background in the UI HUB particle backgrounds collection. A WebGL particle sphere with incandescent neon-purple streaks streaming down meridians, reflecting onto a specular floor plane with distance-attenuated fade, rim lighting, interactive pointer tilt spring, and pulse shockwave. Built with Three.js ShaderMaterial, custom vertex/fragment GLSL, and OrthographicCamera.
The component is driven by 7 documented props (className, style, streaks, sparks, speed, showHint and 1 more), 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 line and point attributes; 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 Streak Sphere?
A glowing particle sphere with incandescent neon-purple streaks streaming down meridians, mirroring onto a specular floor plane with distance-attenuated fade, ambient dust and floor haze filling the full-bleed frame, interactive pointer tilt spring, and shockwave pulses.
Streak Sphere at a glance
- Category
- Particle Backgrounds
- Pricing
- Free to use
- Libraries
- React and Three.js
- Styling
- Tailwind CSS
- Configurable props
- 7
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Streak Sphere works
A WebGL particle sphere with incandescent neon-purple streaks streaming down meridians, reflecting onto a specular floor plane with distance-attenuated fade, rim lighting, interactive pointer tilt spring, and pulse shockwave. Built with Three.js ShaderMaterial, custom vertex/fragment GLSL, and OrthographicCamera. The canvas is full-bleed: the authored 500-unit-tall logical frame is extended to the container's aspect ratio (horizontally in landscape, vertically in portrait) so the preview never letterboxes, with the sphere core offset into the widened frame. A scaled background quad (modelMatrix-applied PlaneGeometry) covers the whole viewport and composes the glow bowl, mirrored reflection, a violet floor haze hugging the reflection line, an edge vignette, and film grain; an ambient dust starfield of ~340 additive points is mapped in-shader over the full logical viewport with seamless integer-period drift, sway and twinkle, dimmed over the sphere core. Pointer coordinates map through the current CSS-pixels-per-logical-unit factor.
Technical information for Streak Sphere
| Category | Particle Backgrounds |
|---|---|
| Libraries | React and Three.js |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, blend modes, ResizeObserver, requestAnimationFrame |
| State change | resting purple glow sphere on a dark reflective floor to tilted active meridian streak flow with accelerated speeds and expanding shockwave ring |
| Props | 7 configurable |
| Usage example | Not published yet |
What Streak Sphere requires
- Three.js ShaderMaterial with custom GLSL
- WebGL BufferGeometry line and point attributes
- ResizeObserver on the container
- requestAnimationFrame loop with critically-damped spring physics
- Pointer event listeners with pulse on pointerdown
- prefers-reduced-motion support
Streak Sphere questions
What is Streak Sphere?
A glowing particle sphere with incandescent neon-purple streaks streaming down meridians, mirroring onto a specular floor plane with distance-attenuated fade, ambient dust and floor haze filling the full-bleed frame, interactive pointer tilt spring, and shockwave pulses.
How does Streak Sphere work?
A WebGL particle sphere with incandescent neon-purple streaks streaming down meridians, reflecting onto a specular floor plane with distance-attenuated fade, rim lighting, interactive pointer tilt spring, and pulse shockwave. Built with Three.js ShaderMaterial, custom vertex/fragment GLSL, and OrthographicCamera. The canvas is full-bleed: the authored 500-unit-tall logical frame is extended to the container's aspect ratio (horizontally in landscape, vertically in portrait) so the preview never letterboxes, with the sphere core offset into the widened frame. A scaled background quad (modelMatrix-applied PlaneGeometry) covers the whole viewport and composes the glow bowl, mirrored reflection, a violet floor haze hugging the reflection line, an edge vignette, and film grain; an ambient dust starfield of ~340 additive points is mapped in-shader over the full logical viewport with seamless integer-period drift, sway and twinkle, dimmed over the sphere core. Pointer coordinates map through the current CSS-pixels-per-logical-unit factor.
Which category does Streak Sphere belong to?
Streak Sphere 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 Streak Sphere?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Streak Sphere?
Optional inline styles for the root container. It defaults to {}.
Is Streak Sphere free to use?
Streak Sphere 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 Streak Sphere use?
Streak Sphere uses React and Three.js and is styled with Tailwind CSS.
What does Streak Sphere need to run?
Streak Sphere needs Three.js ShaderMaterial with custom GLSL, WebGL BufferGeometry line and point attributes, ResizeObserver on the container and requestAnimationFrame loop with critically-damped spring physics.