Interactive Liquid Cursor Trail

Colours in this gradient

• #090d16
• #38bdf8
• #ec4899
• #ffffff

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="fluid-stage" id="fluidStage">
  <canvas id="fluidCanvas" class="fluid-canvas"></canvas>
  <div class="fluid-content">
    <div class="fluid-badge">Physics Interaction</div>
    <h1>Liquid Particle Trails</h1>
    <p>Glide your pointer to inject energetic glowing plasma ribbons across the viewport.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create an interactive glowing liquid cursor trail canvas background in HTML, CSS and vanilla JavaScript.

Requirements:
- HTML5 canvas capturing mousemove events and spawning glowing particle objects.
- Particles decay smoothly by decreasing alpha and radius on each frame.
- Canvas fills with semi-transparent background on each step to create trailing light ribbons.
- Center text has pointer-events: none to avoid blocking mouse interactions.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Capture mousemove coordinates and push new particle vectors with randomized velocities.

2. 2

   In draw loop, update particle positions and decrement alpha/radius.

3. 3

   Apply shadowBlur to canvas context for vivid neon bloom.

Customisation tips

• Using rgba(9, 13, 22, 0.2) in fillRect creates silky persistence trails.

More backgrounds