Preferences

Shatter Text

SHATTER

Customize

Text

Min Drop Y (px)100

Max Drop Y (px)150

Min Drift X (px)-15

Max Drift X (px)15

Max Rotation (deg)90

Fall Duration (s)0.35

Reassemble Duration (s)0.6

Stagger (s)0.012

Reassemble Gap (s)0.05

Shatter Opacity0.3

Props

Property	Type	Default	Description
`text`	string	`"SHATTER PHYSICS"`	Display text to animate.
`trigger`	string	`"hover"`	What starts the shatter, "hover" or "click".
`disabled`	boolean	`false`	Disables the shatter interaction entirely.
`minY`	number	`30`	Minimum vertical drop distance in pixels.
`maxY`	number	`55`	Maximum vertical drop distance in pixels.
`minX`	number	`-15`	Minimum horizontal drift in pixels.
`maxX`	number	`15`	Maximum horizontal drift in pixels.
`minRotation`	number	`-90`	Minimum rotation in degrees while falling apart.
`maxRotation`	number	`90`	Maximum rotation in degrees while falling apart.
`fallDuration`	number	`0.35`	Duration (s) of the fall-apart phase per character.
`reassembleDuration`	number	`0.6`	Duration (s) of the reassemble phase per character.
`fallEase`	string	`"power2.in"`	GSAP ease used while characters fall apart.
`reassembleEase`	string	`"bounce.out"`	GSAP ease used while characters bounce back into place.
`stagger`	number	`0.012`	Delay (s) between each character starting its fall.
`reassembleGap`	number	`0.05`	Pause (s) between the fall finishing and reassembly starting.
`shatterOpacity`	number	`0.3`	Opacity of each character at the moment of shatter, 0-1.
`shatterColor`	string	`"#ff2d78"`	Color characters flash to while shattered.
`resetColor`	string	`"currentColor"`	Color characters return to once reassembled.
`textClassName`	string	`"text-4xl md:text-5xl font-bold text-white"`	Classes controlling font size, weight, and color.
`className`	string	`""`	Extra classes applied to the root wrapper.

textstring

Display text to animate.

Default"SHATTER PHYSICS"

triggerstring

What starts the shatter, "hover" or "click".

Default"hover"

disabledboolean

Disables the shatter interaction entirely.

Defaultfalse

minYnumber

Minimum vertical drop distance in pixels.

Default30

maxYnumber

Maximum vertical drop distance in pixels.

Default55

minXnumber

Minimum horizontal drift in pixels.

Default-15

maxXnumber

Maximum horizontal drift in pixels.

Default15

minRotationnumber

Minimum rotation in degrees while falling apart.

Default-90

maxRotationnumber

Maximum rotation in degrees while falling apart.

Default90

fallDurationnumber

Duration (s) of the fall-apart phase per character.

Default0.35

reassembleDurationnumber

Duration (s) of the reassemble phase per character.

Default0.6

fallEasestring

GSAP ease used while characters fall apart.

Default"power2.in"

reassembleEasestring

GSAP ease used while characters bounce back into place.

Default"bounce.out"

staggernumber

Delay (s) between each character starting its fall.

Default0.012

reassembleGapnumber

Pause (s) between the fall finishing and reassembly starting.

Default0.05

shatterOpacitynumber

Opacity of each character at the moment of shatter, 0-1.

Default0.3

shatterColorstring

Color characters flash to while shattered.

Default"#ff2d78"

resetColorstring

Color characters return to once reassembled.

Default"currentColor"

textClassNamestring

Classes controlling font size, weight, and color.

Default"text-4xl md:text-5xl font-bold text-white"

classNamestring

Extra classes applied to the root wrapper.

Default""

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin