A single shape morphs between a document, an image frame, an audio disc and a code hexagon, with the inner glyph crossfading at each step. Built for exports and format conversions.
48 files · 312 MB
Press release, 21 images,
2 voice tracks, embed code
We will email the link to maya@northwind.io
npx shadcn@latest add https://hyperblur.dev/r/loader-file-morph.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-file-morph.tsx.
import { LoaderFileMorph } from "@/components/hyperblur/loader-file-morph"
<LoaderFileMorph label="Packing" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 72 | Width and height of the shape in pixels. |
| color | string | "#2f7bff" | Bottom color of the shape gradient and its glow. |
| accent | string | "#7fb3ff" | Top color of the shape gradient and the active step dot. |
| speed | number | 1.6 | Seconds each shape is held, including the morph into the next. |
| labels | [string, string, string, string] | ["Document", "Image", "Audio", "Code"] | Names of the four formats, shown after the caption as each shape becomes active. |
| label | string | Caption shown before the active format name, for example Packing. Without it, Converting is announced to screen readers only. |