Magnetic Letters text animation: the word aimotions animated in this style
009ReactiveCSS

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-agnostic
Set [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

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Magnetic Letters look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥