Components•Magnetic letters
Components•Magnetic letters
Magnetic letters
Letters on damped springs that lean toward the cursor or shy away from it, tilting and scaling as they go. Click to send a shockwave through the line and watch it reassemble with a little overshoot. Focus it from the keyboard for a gentle ripple, or press Enter to scatter.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/magnetic-lettersHow to use
import { MagneticLetters } from "@/components/bjork-ui/text/magnetic-letters";<MagneticLetters text="Pull me closer" mode="attract" // or "repel" strength={1} radius={1.35} // field reach, in em stiffness={210} damping={15} // lower overshoots more shockwave // click, Enter or Space scatters/>
Pull me closer
Pull me closer