Charcoal UI

React Image Effects

React image effects: reveals, parallax, zoom lenses, pixel transitions and galleries.

About these image effects

Image effects turn static pictures into moments: reveals on scroll, parallax depth, a zoom lens for detail, Ken Burns movement, pixel and halftone transitions, orbiting images and preview rails with thumbnails.

Every effect keeps the image's alt text and never hides the content it decorates.

Where they earn their keep

  • Product photography and e-commerce.
  • Portfolios and case studies.
  • Editorial and blog heroes.
  • Galleries and property listings.

How they are built

Effects animate transforms, masks and clip paths around a normal img element, so images load and lazy-load as usual. Reduced motion shows the image without the effect.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 14 image effects

All of them are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live and tune it before you buy.

Install one

npx shadcn@latest add @charcoal/parallax-image

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do image effects work with next/image?
Most take a src and alt and render a plain img; for next/image, pass its output or wrap the effect around it.
Are the images still indexed?
Yes. The real img element with its alt text is in the page, so search engines and screen readers see it.
Do they slow images down?
No. The effects animate after the image loads, using transforms and masks that the browser handles on the GPU.
Do these image effects work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.