Comet Trail
Comet Trail is a particle background in the UI HUB particle backgrounds collection. A single Canvas 2D scene on pure black, deterministic via a seeded mulberry32 RNG and periodic over a seamless 4.56 s loop (f = t * (1000/30), 152 frames). Painter order is stars → tail → head → cursor.
The component is driven by 5 documented props (className, style, showHint, hintText, interactive), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D context (no library); seeded deterministic RNG (mulberry32) for the star field and tail layout; periodic, seamless 4.56s / 33.3 fps clock (152 frames).
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 Comet Trail?
A blue comet drifting through pure-black space: a fixed white head inside a wide additive cyan-to-deep-blue halo trails 3,200 distance-faded dots along a 34° axis, an 800-star three-layer field drifts and twinkles, the pointer scatters particles and stars within a soft 95px radius with parallax, and a click fires an expanding shockwave that flares the head.
Comet Trail at a glance
- Category
- Particle Backgrounds
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Comet Trail works
A single Canvas 2D scene on pure black, deterministic via a seeded mulberry32 RNG and periodic over a seamless 4.56 s loop (f = t * (1000/30), 152 frames). Painter order is stars → tail → head → cursor. Star field: ~805 stars in three depth layers (450/300/55) live in a periodic (u along drift, v across) field of length LU 860; per frame u = ((u0 + j*LU*t/DUR) % LU) - LU/2 and each star sits at (280 + u*SD + v*SP - FX.px*j*7, 280 + u*SD.y + v*SP.y - FX.py*j*7), so nearer layers (larger j, r and alpha) scroll faster (~190/380/570 px/s) and parallax more; twinkle alpha = a * (0.78 + 0.22*sin(2π*(k*t/DUR + ph))). Tail: 3200 dots plus 10 grey debris specks flow along a 34° axis (distance travelled u = (u0 + 2*LT*t/DUR) % LT, LT 547 → ~240 px/s); lateral Gaussian offset widens with distance (z*(2.4 + 0.075*u)) plus a per-dot sine wobble; colour is lerped through COLOR_STOPS from cyan (40,180,235) through (1,153,214)@90 to indigo (25,23,211)@330+, and dots fade in over the first 14 px. Head: fixed at (271,286), a radial gradient from white → cyan → deep blue → black drawn with globalCompositeOperation 'lighter', radius 72*(1 + 0.3*prox + 0.7*flare) so it swells near the pointer and flares on a click, plus a hard white core of radius 2.3*(1 + 0.6*flare). Interaction: the pointer (mouse or touch via Pointer Events) eases sx,sy toward a target (k = 1 - e^(-dt*12)) and a 0..1 activity (k = 1 - e^(-dt*5)) drives a 95 px repulsion with quadratic falloff (q² * 42) on both tail and stars and a ±(sx/W-0.5)*2 parallax; a click/tap pushes a shockwave {x,y,t0} onto FX.waves (max 5) so rings expand at 340 px/s, gaussian-shove nearby points (exp(-e²)*exp(-age*2.2)*34) for 1.6 s, and a small cyan ring cursor plus a dashed repulsion circle are stroked.
Technical information for Comet Trail
| Category | Particle Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, ResizeObserver, requestAnimationFrame |
| State change | a resting blue comet on pure black with a still star field and a faint hint to the pointer scattering the tail and stars within a soft radius, the head swelling, and a click firing an expanding cyan shockwave ring |
| Props | 5 configurable |
| Usage example | Not published yet |
What Comet Trail requires
- Canvas 2D context (no library)
- seeded deterministic RNG (mulberry32) for the star field and tail layout
- periodic, seamless 4.56s / 33.3 fps clock (152 frames)
- additive (globalCompositeOperation 'lighter') radial-gradient comet head
- per-frame gaussian repulsion + expanding click shockwaves over particles and stars
- Pointer Events (mouse + touch: pointermove/pointerdown/pointerleave/pointercancel) scoped to the component canvas with getBoundingClientRect-local coordinates
- eased pointer position and activity (1 - e^(-dt*12) / 1 - e^(-dt*5)) and canvas parallax
- ResizeObserver cover-fits the 560x560 buffer to the stage (scaled by the larger axis to fill the box edge-to-edge, overflow centred and cropped, never stretched)
- prefers-reduced-motion matchMedia (parks the loop clock; the scene still responds to the pointer)
- full teardown on unmount (cancel rAF, disconnect ResizeObserver, remove listeners, clear the hint timeout)
Comet Trail questions
What is Comet Trail?
A blue comet drifting through pure-black space: a fixed white head inside a wide additive cyan-to-deep-blue halo trails 3,200 distance-faded dots along a 34° axis, an 800-star three-layer field drifts and twinkles, the pointer scatters particles and stars within a soft 95px radius with parallax, and a click fires an expanding shockwave that flares the head.
How does Comet Trail work?
A single Canvas 2D scene on pure black, deterministic via a seeded mulberry32 RNG and periodic over a seamless 4.56 s loop (f = t * (1000/30), 152 frames). Painter order is stars → tail → head → cursor. Star field: ~805 stars in three depth layers (450/300/55) live in a periodic (u along drift, v across) field of length LU 860; per frame u = ((u0 + j*LU*t/DUR) % LU) - LU/2 and each star sits at (280 + u*SD + v*SP - FX.px*j*7, 280 + u*SD.y + v*SP.y - FX.py*j*7), so nearer layers (larger j, r and alpha) scroll faster (~190/380/570 px/s) and parallax more; twinkle alpha = a * (0.78 + 0.22*sin(2π*(k*t/DUR + ph))). Tail: 3200 dots plus 10 grey debris specks flow along a 34° axis (distance travelled u = (u0 + 2*LT*t/DUR) % LT, LT 547 → ~240 px/s); lateral Gaussian offset widens with distance (z*(2.4 + 0.075*u)) plus a per-dot sine wobble; colour is lerped through COLOR_STOPS from cyan (40,180,235) through (1,153,214)@90 to indigo (25,23,211)@330+, and dots fade in over the first 14 px. Head: fixed at (271,286), a radial gradient from white → cyan → deep blue → black drawn with globalCompositeOperation 'lighter', radius 72*(1 + 0.3*prox + 0.7*flare) so it swells near the pointer and flares on a click, plus a hard white core of radius 2.3*(1 + 0.6*flare). Interaction: the pointer (mouse or touch via Pointer Events) eases sx,sy toward a target (k = 1 - e^(-dt*12)) and a 0..1 activity (k = 1 - e^(-dt*5)) drives a 95 px repulsion with quadratic falloff (q² * 42) on both tail and stars and a ±(sx/W-0.5)*2 parallax; a click/tap pushes a shockwave {x,y,t0} onto FX.waves (max 5) so rings expand at 340 px/s, gaussian-shove nearby points (exp(-e²)*exp(-age*2.2)*34) for 1.6 s, and a small cyan ring cursor plus a dashed repulsion circle are stroked.
Which category does Comet Trail belong to?
Comet Trail 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 Comet Trail?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Comet Trail?
Optional inline styles for the root container. It defaults to {}.
Is Comet Trail free to use?
Comet Trail 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 Comet Trail use?
Comet Trail uses React and is styled with Tailwind CSS.
What does Comet Trail need to run?
Comet Trail needs Canvas 2D context (no library), seeded deterministic RNG (mulberry32) for the star field and tail layout, periodic, seamless 4.56s / 33.3 fps clock (152 frames) and additive (globalCompositeOperation 'lighter') radial-gradient comet head.