You can customize the individual pixels by passing a pixelClassName prop. 1. The component operates by dividing the container into a grid of pixels and dynamically recoloring them as you move your cursor. Each pixel is represented by a single div element, so perf may be impacted when using a large number of pixels, especially on the first render. 2. Keep the z-index of the effect's container lower than the rest of your content, so the pointer-events will captured by all of your other elements.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pixel Trail to your project and fits it to your theme.
Code
How Pixel Trail is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { useScreenSize } from "@/components/hooks/use-screen-size"
import { PixelTrail } from "@/components/ui/pixel-trail"
const PixelTrailDemo: React.FC = () => {
const screenSize = useScreenSize()
return (
<div className="relative w-full h-full min-h-[500px] bg-[#dcddd7] text-black flex flex-col font-calendas">
<div className="absolute inset-0 z-0">
<PixelTrail
pixelSize={screenSize.lessThan(`md`) ? 48 : 80}
fadeDuration={0}
delay={1200}
pixelClassName="rounded-full bg-[#ffa04f]"
/>
</div>
<div className="justify-center items-center flex flex-col w-full h-full z-10 pointer-events-none space-y-2 md:space-y-8">
<h2 className="text-3xl cursor-pointer sm:text-5xl md:text-7xl tracking-tight">
fancy ✽ components{" "}
</h2>
<p className="text-xs md:text-2xl">
with react, motion, and typrscript.
</p>
</div>
<p className="absolute text-xs md:text-base bottom-4 right-4 pointer-events-none">
make the web fun again.
</p>
</div>
)
}
export { PixelTrailDemo }
Dependencies
More by Daniel Petho
View all
Parallax Floating
2.2K
Text Rotate
2.1K
Typewriter
1.9K
Marquee Along SVG Path
1.4K
Image Trail
1.4K
Animated Gradient With SVG
884
Text Cursor Proximity
781
Vertical Cut Reveal
553