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.

textstring

Main display text.

Default"ATTRACT"

subtitlestring

Sub text rendered below the main text.

Default"PULL · PUSH · REPEL"

fontSizestring

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

Defaultundefined (responsive)

subtitleSizestring

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

Defaultundefined (responsive)

letterSpacingstring

Letter-spacing for the main text.

Default"0.05em"

textColorstring

Base color of the main text.

Default"#ffffff"

subtitleColorstring

Color of the subtitle text.

Default"#ffffff"

hoverColorsstring[]

Color array interpolated across characters on hover.

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

magnetRadiusnumber

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

Defaultundefined (responsive)

magnetStrengthnumber

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

Default0.55

attractDurationnumber

Duration (s) of the attract tween.

Default0.25

returnDurationnumber

Duration (s) of the return tween.

Default0.6

entranceAnimstring

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

Default"fadeUp"

entranceStaggernumber

Stagger delay (s) between each character entrance.

Default0.04

entranceDurationnumber

Duration (s) of the entrance animation per character.

Default0.7

entranceDelaynumber

Initial delay (s) before entrance animation starts.

Default0.1

showCursorboolean

Show a custom cursor dot and ring.

Defaulttrue

showSubtitleboolean

Show the subtitle line.

Defaulttrue

alignstring

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

Default"center"

gapstring

Gap (marginRight) between individual characters.

Default"0px"

textClassNamestring

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

Default""

subtitleClassNamestring

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

Default""

classNamestring

Extra classes applied to the root container div.

Default""

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin