Gravitational Vortex
Gravitational Vortex is a particle background in the UI HUB particle backgrounds collection. A WebGL gravitational vortex with a logarithmic spiral accretion disc of ~20k motion-blurred streaks falling into a funnel throat. Features real velocity-based motion blur, additive blending, and interactive hover speed boost.
The component is driven by 13 documented props (background, baseColor, accentColor, accentMix, density, dotSize and 7 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: WebGL vertex/fragment shaders; Logarithmic spiral math; Additive blending with premultiplied alpha.
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 Gravitational Vortex?
Premium WebGL gravitational vortex with logarithmic spiral accretion disc and real motion-blurred streaks.
Gravitational Vortex at a glance
- Category
- Particle Backgrounds
- Pricing
- Pro component
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 13
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Gravitational Vortex works
A WebGL gravitational vortex with a logarithmic spiral accretion disc of ~20k motion-blurred streaks falling into a funnel throat. Features real velocity-based motion blur, additive blending, and interactive hover speed boost.
Technical information for Gravitational Vortex
| Category | Particle Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | WebGL shaders, HTML canvas, blend modes, CSS gradients |
| State change | static disc plane to spiraling vortex with depth attenuation |
| Props | 13 configurable |
| Usage example | Included on this page |
What Gravitational Vortex requires
- WebGL vertex/fragment shaders
- Logarithmic spiral math
- Additive blending with premultiplied alpha
- Per-frame phase and spin advancement
- Eye-shift lens correction
- Hover speed easing with dt-correct ramp
How to use Gravitational Vortex
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <GravitationalVortex /> in your page using that import path.
- Pass any of the 13 documented props to change colours, density, speed or behaviour.
Gravitational Vortex questions
What is Gravitational Vortex?
Premium WebGL gravitational vortex with logarithmic spiral accretion disc and real motion-blurred streaks.
How does Gravitational Vortex work?
A WebGL gravitational vortex with a logarithmic spiral accretion disc of ~20k motion-blurred streaks falling into a funnel throat. Features real velocity-based motion blur, additive blending, and interactive hover speed boost.
Which category does Gravitational Vortex belong to?
Gravitational Vortex 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 background prop do in Gravitational Vortex?
CSS background color behind the canvas. It defaults to "#000000".
What does the baseColor prop do in Gravitational Vortex?
Primary particle color. It defaults to "#04FF3F".
Is Gravitational Vortex free to use?
Gravitational Vortex is a Pro component on UI HUB. Pro components are labelled in the catalog and come with a documented props table on the component page.
Which libraries does Gravitational Vortex use?
Gravitational Vortex uses React and is styled with Tailwind CSS.
What does Gravitational Vortex need to run?
Gravitational Vortex needs WebGL vertex/fragment shaders, Logarithmic spiral math, Additive blending with premultiplied alpha and Per-frame phase and spin advancement.