Magnetic Letters
Magnetic letters text effect: every letter hangs on its own spring and is pulled toward the cursor, tilting and lifting off the page. It overshoots and settles when the pointer leaves. Ideal as an interactive website hero title.
Prompt · replace [TEXT]
Tool-agnosticSet [TEXT] huge and centered in a heavy, wide geometric lowercase, ink black on a warm off-white page with a faint dot grid. Each letter behaves like a small magnet on a spring. At rest an invisible attraction point drifts slowly across the word, so nearby letters lean toward it by a few pixels. On hover the pointer becomes a strong magnet ringed by thin rotating dashed circles: letters within its reach are pulled up to a tenth of the width toward it, tilt toward it, scale up slightly, tint electric blue and lift off the page with a growing soft shadow. When the pointer leaves, every letter springs home with a lively overshoot and settles in under a second. Pressing flips the polarity: letters are flung outward, then snap back. On touch screens the same pull follows the finger.
Visual DNA
- Heavy wide geometric lowercase in ink black on warm off-white
- Letters pulled toward the pointer on springs, tilting toward it
- Lifted letters scale up, tint electric blue and cast a soft drop shadow
- Dashed magnetic field rings orbit the attention point
- Press flips polarity: letters are flung away, then snap back
- Category
- Reactive Styles
- Demo built with
- CSS
- Energy
- Lively
- Background
- Light bg
Also known as
No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.
Keys: ← → browse · C copy