Isometric slabs drop one by one onto a stack, landing with a small squash, while a dashed outline marks where the next one goes. When the stack is complete it lifts away and the build starts over.
api:2.14.0
FROM node:22-alpine
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
RUN npm run build
npx shadcn@latest add https://hyperblur.dev/r/loader-stack-build.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-stack-build.tsx.
import { LoaderStackBuild } from "@/components/hyperblur/loader-stack-build"
<LoaderStackBuild layers={5} label="Building image" />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled progress from 0 to 100, mapped to the number of placed layers. Leave it out to loop. | |
| layers | number | 5 | Number of layers in a full stack, from 2 to 8. |
| size | number | 96 | Width and height of the drawing in pixels. |
| color | string | "#2f7bff" | Base color of the slabs. Top and side faces are shaded from it. |
| accent | string | "#7fb3ff" | Top of the newest slab, the next slot outline and the count. |
| interval | number | 620 | Milliseconds between layers in the demo loop. |
| unit | string | "layers" | Word after the count under the stack. |
| label | string | Visible caption. Without it, Building is announced to screen readers only. |