Tile Flip Hero React component
A photo hero cut into a grid of tiles that flip in a wave to reveal the next picture. Click any tile and the wave starts from there. Autoplay can be paused.
About the Tile Flip Hero component
Tile Flip Hero cuts a full-bleed photo into a grid of tiles and turns them over in a wave to reveal the next picture. Autoplay starts each wave from a different corner, and clicking any tile starts one from that spot.
The captions change with the picture and share one space, so a longer title never changes the height of the hero. A pause button stops autoplay, and it also stops when the hero is off screen.
When to use it
Use it for travel, photography, real estate and portfolios, where a few strong pictures carry the page.
Use photos with similar brightness at the bottom, so the caption stays easy to read on each one.
Installation
Add the Tile Flip Hero component to your project with the shadcn CLI. It lands in components/tile-flip-hero.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/tile-flip-heroOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<TileFlipHero /> accepts 8 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| slides | TileSlide[] | DEFAULT_SLIDES |
| columns Tiles across and down. | number | 8 |
| rows | number | 6 |
| interval Seconds between flips. 0 turns autoplay off. | number | 5 |
| gap Space between tiles, in px. | number | 2 |
| minHeight Height from tablet width up, in px. | number | 720 |
| onSlideChange | (index: number) => void | — |
- theme"dark" | "light"Default: "dark"
- slidesTileSlide[]Default: DEFAULT_SLIDES
- columns
Tiles across and down.
numberDefault: 8 - rowsnumberDefault: 6
- interval
Seconds between flips. 0 turns autoplay off.
numberDefault: 5 - gap
Space between tiles, in px.
numberDefault: 2 - minHeight
Height from tablet width up, in px.
numberDefault: 720 - onSlideChange(index: number) => void
Collections
Use-case pages that compare Tile Flip Hero with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Tile Flip Hero FAQ
- How many tiles should I use?
- 8 by 6 suits most screens. More tiles look finer but mean more elements to animate, so stay under about 100.
- Can I stop the autoplay?
- Set interval to 0 to turn it off, or use the pause button in the hero.
- Do the photos need a set size?
- No. Each tile uses object-fit cover against the whole grid, so any shape works.
- What about reduced motion?
- Autoplay stays off and slides change instantly with no flip.
