A magnetic download button built from stacked layers: the plate, the text and the icon chip each follow the pointer by a different amount, and the shadow shifts the other way. It snaps home with a soft overshoot when the pointer leaves.
Driftnote 3.2
Notes that sync in under 50 ms.
Also on Windows and Linux
npx shadcn@latest add https://hyperblur.dev/r/button-parallax-layers.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-parallax-layers.tsx.
import { ButtonParallaxLayers } from "@/components/hyperblur/button-parallax-layers"
<ButtonParallaxLayers hint="Apple silicon · 48 MB">Download for macOS</ButtonParallaxLayers>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Download for macOS" | Button label. |
| hint | string | "Apple silicon · 48 MB" | Small second line under the label. Pass an empty string to hide it. |
| accent | string | "#2f7bff" | Color of the icon chip and its glow. |
| depth | number | 1 | Multiplier for how far the layers travel. |
| reach | number | 22 | Extra pixels around the button where the magnet already pulls. |
| size | "sm" | "md" | "lg" | "md" | Font size preset; padding and every inner part scale with it. |