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.

text

Typestring

Default"SHATTER PHYSICS"

Display text to animate.

trigger

Typestring

Default"hover"

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

disabled

Typeboolean

Defaultfalse

Disables the shatter interaction entirely.

minY

Typenumber

Default30

Minimum vertical drop distance in pixels.

maxY

Typenumber

Default55

Maximum vertical drop distance in pixels.

minX

Typenumber

Default-15

Minimum horizontal drift in pixels.

maxX

Typenumber

Default15

Maximum horizontal drift in pixels.

minRotation

Typenumber

Default-90

Minimum rotation in degrees while falling apart.

maxRotation

Typenumber

Default90

Maximum rotation in degrees while falling apart.

fallDuration

Typenumber

Default0.35

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

reassembleDuration

Typenumber

Default0.6

Duration (s) of the reassemble phase per character.

fallEase

Typestring

Default"power2.in"

GSAP ease used while characters fall apart.

reassembleEase

Typestring

Default"bounce.out"

GSAP ease used while characters bounce back into place.

stagger

Typenumber

Default0.012

Delay (s) between each character starting its fall.

reassembleGap

Typenumber

Default0.05

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

shatterOpacity

Typenumber

Default0.3

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

shatterColor

Typestring

Default"#ff2d78"

Color characters flash to while shattered.

resetColor

Typestring

Default"currentColor"

Color characters return to once reassembled.

textClassName

Typestring

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

Classes controlling font size, weight, and color.

className

Typestring

Default""

Extra classes applied to the root wrapper.

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin