# Lighthouse Spotlight Image Gallery

> Spotlight image gallery for React and Tailwind CSS (shadcn/ui): a photo grid lit by a sweeping lighthouse beam. It is built to guide the eye: light travels across the grid and pictures wake up one after another, so visitors keep watching to see what the beam reveals next, and the torch turns browsing into discovery. At rest each photo sits under a flat color swatch extracted from the image, with a hint of the picture showing through; tiles wake up as the beam passes and fade back with a slow afterglow. The pointer works as a hand torch, keyboard focus lights a tile, clicking parks the beam. Props for beam origin, speed, width, afterglow, peek and columns. Light and dark themes, reduced-motion fallback, no WebGL. Use it for portfolios, photo collections and product showcases.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Gallery, Image Gallery, Spotlight, Hover, Photo
- Live preview: https://21st.dev/@dhxwhy/components/lighthouse-gallery

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/lighthouse-gallery?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/gallery.md