A translucent CSS 3D cube turns on its vertical axis above a soft shadow that breathes with the rotation.
Optimizing 128k triangles
npx shadcn@latest add https://hyperblur.dev/r/loader-cube.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-cube.tsx.
import { LoaderCube } from "@/components/hyperblur/loader-cube"
<LoaderCube size={40} label="Rendering model" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 40 | Edge length of the cube in pixels. |
| color | string | "#2f7bff" | Edge and glow color. |
| accent | string | "#7fb3ff" | Face highlight color. |
| speed | number | 4 | Seconds per full turn. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |