A single gradient shape morphs from a circle to a rounded square to a triangle and back, turning as it goes.
Building your workspace
Templates, roles and a sample project.
npx shadcn@latest add https://hyperblur.dev/r/loader-morph-shapes.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-morph-shapes.tsx.
import { LoaderMorphShapes } from "@/components/hyperblur/loader-morph-shapes"
<LoaderMorphShapes size={56} label="Building your workspace" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 56 | Size of the loader box in pixels. |
| color | string | "#2f7bff" | Main color of the shape and its shadow. |
| accent | string | "#9fc6ff" | Light end of the shape gradient. |
| speed | number | 3.6 | Seconds for one full cycle through the three shapes. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |