Svelte Animations
Command Palette
Search for a command to run

Pixel Trail

A pixelated trail effect that recolors grid pixels as you move your cursor.

motion-sv

Svelte Fancy Components

Make the web fun again.

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/pixel-trail.json
Visit Original Docs

For more deeper understaing visit fancy components documentation.

Docs

Examples

Without Fading

If you set the fadeDuration prop to 0, and increase the delay prop, you can create a trail effect that doesn't fade.

water surface

100%

purity

we deliver more than just hydration — we offer nature's purest refreshment, untouched by modern contaminants. Our water is sourced from deep, protected aquifers and naturally filtered through ancient rock layers, with unmatched clarity and taste.

Pixel Circle

You can create a pixel circle effect by setting the pixelClass prop to a class that has a border-radius of 50%.

Svelte Fancy Components

Make the web fun again.

Customize Pixel Size and Color

You can customize the pixel size and color by setting the pixelSize and pixelClass props.

Deploy on Vercel

Make the web fun again.