Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
tile-grid-loader-demo
Lumn
Composing light for screens and spaces
import { TileGridLoader } from "@/registry/tween/tile-grid-loader"
export function TileGridLoaderDemo() {
return <TileGridLoader />
}
Installation
Usage
import { TileGridLoader } from "@/components/ui/tile-grid-loader"<TileGridLoader
title="Lumn"
subtitle="Composing light for screens and spaces"
heroImage="https://images.unsplash.com/photo-1791739792703-c88fe8d408be?q=80&w=2400&h=1500&fit=crop"
accent="#ff7a1a"
/>How it works:
- On mount the component measures its container and builds an odd-numbered grid of square tiles (about 85px wide on large containers, 50px on small ones), with one extra ring so it overflows the edges.
- Four tiles on the middle row are the marker's stops. The rest fade in one by one in random order over 2.5 seconds.
- A white marker sits on the first stop showing
25.Flipmoves it to the next stop with50, then75, and finally to the centre tile where it shows thelogo. The stops it leaves behind turn the accent colour. - The loader background is removed so the tiles sit over the hero, then every tile collapses on
scaleYfrom the top in random order. - The title letters rise in random order, followed by the subtitle lines and nav words.
The Replay button remounts the stage and rebuilds the grid for the current size. With prefers-reduced-motion: reduce the loader is skipped.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
heroImage | string | Remote photo | Full-bleed hero image. |
logo | string | Inline SVG mark | Shown in the marker when it reaches the centre. |
title | string | "Lumn" | Nav logo text and large hero title. |
subtitle | string | placeholder line | Hero subtitle. |
navLinks | string[] | 4 links | Nav links. |
markerLabels | [string, string, string] | ["25", "50", "75"] | Marker text at the first three stops. |
accent | string | "#ff7a1a" | Tile and title colour. |
loaderBackground | string | "#e7e2da" | Background behind the tiles while they fade in. |
showReplay | boolean | true | Show the replay button. |
className | string | — | Extra classes on the outer container. |