Pixel Trail
Interactive pixel trail effect using Three.js and React Three Fiber
Configuring your account...
Please wait while we prepare everything for you
Usage
import PixelTrail from './PixelTrail';
<div style={{ height: '500px', position: 'relative', overflow: 'hidden'}}>
<PixelTrail
gridSize={50}
trailSize={0.1}
maxAge={250}
interpolate={5}
gooeyFilter={{ id: "custom-goo-filter", strength: 2 }}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
gridSize | number | 40 | Size of the pixel grid |
trailSize | number | 0.1 | Size of the trail effect |
maxAge | number | 250 | Maximum age of trail particles |
interpolate | number | 5 | Interpolation factor |
color | string | '#000000' (light mode) / '#ffffff' (dark mode) | Color of the pixels |
gooeyFilter | object | undefined | Gooey filter configuration |