Installation & details
Pixel Image Trail by Componentry. An image reveal effect made of canvas-drawn square fragments that paint in around the cursor and fade out into a bounded pixel trail. Try the live React demo, inspect the original source, and install from PODIE.
React · Tailwind CSS · MIT license · Original registry
Added to PODIE · Catalog updated · Page updated
Installation and usage
The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.
01 — Set up your project
First component? Initialize shadcn once.
pnpm dlx shadcn@latest init02 — Install the component
pnpm dlx shadcn@latest add https://podie.dev/r/componentry--pixel-image-trail.json03 — Add it to your interface
Import the component from the path created by the installer.
'use client';
import EffectPixelImageTrail from '@/components/podie/componentry--pixel-image-trail/demo';
export default function Example() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<EffectPixelImageTrail />
</div>
);
}
Example styling
These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.
.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }Dependencies and distribution
clsx, tailwind-merge The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.
By Componentry · MIT license. Original component source and license included.
Choosing and integrating this component
PODIE source review ·
Where it fits
Reveal fragments of a decorative image around the pointer, with a fading square-pixel trail. An initial scattering of pixels is visible before interaction. This is a partial reveal, not a gallery that eventually exposes the entire photograph.
Integration boundary
Native React source. Pass src, alt and a container with an explicit height. Tune pixelSize, radius, fadeDuration and maxPixels together. A focus event inside the container triggers a centered reveal; the container itself is not automatically a keyboard control.
Checks before shipping
Keep essential product images, text and links visible outside the effect. Reduced motion removes trail fading but still shows fragments. Test touch scrolling and image delivery; the example uses an external image URL.
Recorded verification
Not included in the October 1 four-package-manager installation sample. This note records source inspection, not a new compatibility or device test. Read the method and limitations.
No component-specific mobile performance or assistive-technology pass is claimed here. Test the final page, including its content, theme and application logic.
Reviewed source identity
Registry SHA-256: e8bfb123f64ce67159351e7398fa5c4435d0afd70fb41c7504d1ba1fa6733cfc
Entry file: components/podie/componentry--pixel-image-trail/components/ui/pixel-image-trail.tsx. 6 files in the registry payload.