Experiment 09 · Expert

Magnetic Typography — letters with a mind.

Every letter of the word reacts on its own. Each one leans toward you with a different strength, as if the type is curious about your cursor.

Technique · Type magnetism Hint · Approach the word Level · 09 / 10
Demo 09 · Magnetic Typography
Each letter reacts Radius ≤ 300px
Technique

Six letters, six personalities

The word "CURSOR" is split into six independent <span>s. Each has its own pull power and rotation feel, and each smooths at its own rate — so the type never moves as one monolithic block.

Aa

Per-letter magnets

Pull ranges from 0.45 (indifferent, mounts a slow drift) to 1.0 (eager, snaps fast). Rotation feel varies too, from 0.5 to 1.4.

◜

Radial falloff

Within a 300px radius, influence fades with distance squared. Move your cursor near a letter and it leans toward you; pull back and it relaxes home.

Keep exploring

More motion experiments