Tile Assemble
Assemble one supplied image from sixteen registered tiles while keeping its accessible image intact.
Ceramic / process study
A warm landscape image keeps the craft surface and its small glaze details in view.
Archive / field folio 18
A portrait composition gives a collection overview the same bounded assembly.
Customise
Code
<MediaTileAssemble src="/images/atelier-process.jpg" alt="A ceramic artist's speckled bowl and glaze samples on a worktable" width={1536} height={1024} />Tile Assemble is a free image assembly animation for React and Next.js. It reserves the supplied image ratio, then brings a fixed 4×4 set of decorative copies into exact registration over the original image.
The image and its alternative remain in the page before JavaScript, after a failed load, in print and for reduced-motion visitors. The one finite assembly starts only after the image is ready and its frame enters view; offscreen, hidden-tab and Activity cleanup removes every temporary tile.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/media-tile-assembleUsage
import { MediaTileAssemble } from "@/components/media-tile-assemble";
export function Example() {
return (
<MediaTileAssemble
src="/images/atelier-process.jpg"
alt="A ceramic artist glazing a handmade bowl beside cobalt test tiles"
width={1536}
height={1024}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Consumer-owned image URL passed to the native img element. |
| alt | string | required | Meaningful alternative text, or an empty string when the image is intentionally decorative. |
| width | number | required | Positive intrinsic image width used with height to reserve the frame ratio. |
| height | number | required | Positive intrinsic image height used with width to reserve the frame ratio. |
| className | string | undefined | Additional classes merged onto the image frame. |
Customisation
The component has no density, replay or cropping controls. Its registered 4×4 grid keeps the image complete, and its className can set a radius, border or locally scoped surface. The frame reads tile-assemble-surface for its backing and tile-assemble-duration for the finite motion beat, which defaults to 640ms.
<MediaTileAssemble
src="/images/archive-overview.jpg"
alt="An open field notebook with botanical studies"
width={1086}
height={1448}
className="rounded-2xl border border-border"
/>Frequently asked questions
- Does Tile Assemble replace or hide my image?
- No. The intact native image remains in the document with its supplied alt text and dimensions. Temporary tile copies are decorative and hidden from assistive technology; they are removed when the one assembly finishes or is cancelled.
- What happens when the image is not ready or motion is unavailable?
- The intact image is shown without tiles until it has loaded and decoded. A failed request keeps the native image fallback. Invalid dimensions or an empty source show an unavailable-image note, while reduced motion, print, missing IntersectionObserver, hidden tabs and offscreen cancellation keep the static image.
- Can I change the tile count or replay the effect?
- No. Tile Assemble uses one fixed 4×4 grid and runs once when the image is ready and in view. It has no tile-density, replay, cropping or source-fetching API.