CursorTrail

Animated trail effect that tracks cursor movement

Props

colorAstring

Default:#00aaff

Color of fresh trails

colorA

stringDefault: #00aaff

Color of fresh trails

colorBstring

Default:#ff00aa

Color trails transition to as they fade

colorB

stringDefault: #ff00aa

Color trails transition to as they fade

stopsobject

Default:null

Multi-stop gradient colors (overrides Color A / Color B when set)

stops

objectDefault: null

Multi-stop gradient colors (overrides Color A / Color B when set)

radiusnumber

Default:0.5

Base radius of the trail stroke

radius

numberDefault: 0.5

Base radius of the trail stroke

lengthnumber

Default:0.5

How long the trail persists (in seconds)

length

numberDefault: 0.5

How long the trail persists (in seconds)

shrinknumber

Default:1

How much the stroke tapers as it fades out (0 = no taper, 1 = full taper)

shrink

numberDefault: 1

How much the stroke tapers as it fades out (0 = no taper, 1 = full taper)

softnessnumber

Default:0

Edge softness of the trail (0 = crisp paint edge, 1 = very soft)

softness

numberDefault: 0

Edge softness of the trail (0 = crisp paint edge, 1 = very soft)

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <CursorTrail
    :radius="0.5"
  />
</Shader>

<Shader>
  <CursorTrail
    radius={0.5}
  />
</Shader>

<Shader>
  <CursorTrail
    radius={0.5}
  />
</Shader>

<Shader>
  <CursorTrail
    radius={0.5}
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'CursorTrail', props: { radius: 0.5 } }
  ]
})

CursorRipples

DataMosh