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 trail circles

radius

numberDefault: 0.5

Base radius of trail circles

lengthnumber

Default:0.5

How long trail circles persist (in seconds)

length

numberDefault: 0.5

How long trail circles persist (in seconds)

shrinknumber

Default:1

How much circles shrink as they fade out (0 = no shrink, 1 = full shrink)

shrink

numberDefault: 1

How much circles shrink as they fade out (0 = no shrink, 1 = full shrink)

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

DOMTexture