Preferences

Magnetic Text

ATTRACT

PULL · PUSH · REPEL

Customize

Main Text

Subtitle Text

Stagger (s)0.04

Duration (s)0.7

Magnet Radius (px)120

Magnet Strength0.55

Attract Duration (s)0.25

Return Duration (s)0.6

Entrance Delay (s)0.1

Props

Property	Type	Default	Description
`text`	string	`"ATTRACT"`	Main display text.
`subtitle`	string	`"PULL · PUSH · REPEL"`	Sub text rendered below the main text.
`fontSize`	string	`undefined (responsive)`	Font size for the main text (supports clamp). Defaults to responsive value based on container width.
`subtitleSize`	string	`undefined (responsive)`	Font size for the subtitle. Defaults to responsive value based on container width.
`letterSpacing`	string	`"0.05em"`	Letter-spacing for the main text.
`textColor`	string	`"#ffffff"`	Base color of the main text.
`subtitleColor`	string	`"#ffffff"`	Color of the subtitle text.
`hoverColors`	string[]	`["#ff6b6b","#f7c948","#4ecdc4","#a78bfa"]`	Color array interpolated across characters on hover.
`magnetRadius`	number	`undefined (responsive)`	Radius in px within which characters are attracted. Defaults to responsive value based on container width.
`magnetStrength`	number	`0.55`	How far characters move toward the cursor (0–1).
`attractDuration`	number	`0.25`	Duration (s) of the attract tween.
`returnDuration`	number	`0.6`	Duration (s) of the return tween.
`entranceAnim`	string	`"fadeUp"`	"fadeUp" \| "scaleIn" \| "slideLeft" \| "blur" \| "none".
`entranceStagger`	number	`0.04`	Stagger delay (s) between each character entrance.
`entranceDuration`	number	`0.7`	Duration (s) of the entrance animation per character.
`entranceDelay`	number	`0.1`	Initial delay (s) before entrance animation starts.
`showCursor`	boolean	`true`	Show a custom cursor dot and ring.
`showSubtitle`	boolean	`true`	Show the subtitle line.
`align`	string	`"center"`	Text alignment: "left" \| "center" \| "right".
`gap`	string	`"0px"`	Gap (marginRight) between individual characters.
`textClassName`	string	`""`	Extra Tailwind/CSS classes applied to each main text character span.
`subtitleClassName`	string	`""`	Extra Tailwind/CSS classes applied to each subtitle character span.
`className`	string	`""`	Extra classes applied to the root container div.

text

Typestring

Default"ATTRACT"

Main display text.

subtitle

Typestring

Default"PULL · PUSH · REPEL"

Sub text rendered below the main text.

fontSize

Typestring

Defaultundefined (responsive)

Font size for the main text (supports clamp). Defaults to responsive value based on container width.

subtitleSize

Typestring

Defaultundefined (responsive)

Font size for the subtitle. Defaults to responsive value based on container width.

letterSpacing

Typestring

Default"0.05em"

Letter-spacing for the main text.

textColor

Typestring

Default"#ffffff"

Base color of the main text.

subtitleColor

Typestring

Default"#ffffff"

Color of the subtitle text.

hoverColors

Typestring[]

Default["#ff6b6b","#f7c948","#4ecdc4","#a78bfa"]

Color array interpolated across characters on hover.

magnetRadius

Typenumber

Defaultundefined (responsive)

Radius in px within which characters are attracted. Defaults to responsive value based on container width.

magnetStrength

Typenumber

Default0.55

How far characters move toward the cursor (0–1).

attractDuration

Typenumber

Default0.25

Duration (s) of the attract tween.

returnDuration

Typenumber

Default0.6

Duration (s) of the return tween.

entranceAnim

Typestring

Default"fadeUp"

"fadeUp" | "scaleIn" | "slideLeft" | "blur" | "none".

entranceStagger

Typenumber

Default0.04

Stagger delay (s) between each character entrance.

entranceDuration

Typenumber

Default0.7

Duration (s) of the entrance animation per character.

entranceDelay

Typenumber

Default0.1

Initial delay (s) before entrance animation starts.

showCursor

Typeboolean

Defaulttrue

Show a custom cursor dot and ring.

showSubtitle

Typeboolean

Defaulttrue

Show the subtitle line.

align

Typestring

Default"center"

Text alignment: "left" | "center" | "right".

gap

Typestring

Default"0px"

Gap (marginRight) between individual characters.

textClassName

Typestring

Default""

Extra Tailwind/CSS classes applied to each main text character span.

subtitleClassName

Typestring

Default""

Extra Tailwind/CSS classes applied to each subtitle character span.

className

Typestring

Default""

Extra classes applied to the root container div.

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin