3D Text Reveal

Scroll-triggered 3D text animation with GSAP

3d-text-reveal-tw

Scroll Down

Explore

The

Future

Design

Customize

Tweak the props live

Text Settings

Text Items

Text Class Name

Font Size7

Font Weight900

3D Settings

Perspective1000

Radius Offset0.4

Gap (degrees)15

Start Rotation-80

End Rotation270

Scroll Settings

Scroll Distance (multiplier)4

Scrub Smoothing1

Props

Name	Type	Default	Description
`items`	string[]	`["Scroll", "To", "Reveal", "3D", "Text"]`	Array of text strings to display in the 3D cylinder. Each item will be positioned along the cylinder surface.
`className`	string	`""`	Additional CSS classes for the wrapper container.
`textClassName`	string	`""`	Additional CSS classes for the text items. Use this to override text styling, colors, or add effects.
`scrollDistance`	string	`"300vh"`	The scroll distance for the animation. Accepts viewport units (vh) or pixels (px). When using inside a scroll container, use pixel values.
`perspective`	number	`1000`	CSS perspective value in pixels. Higher values create a more subtle 3D effect.
`radiusOffset`	number	`0.4`	Multiplier for cylinder radius based on viewport size. Lower values create tighter text spacing. Range: 0.1 to 1.0.
`startRotation`	number	`-80`	Initial rotation angle in degrees for the cylinder when scroll begins.
`endRotation`	number	`270`	Final rotation angle in degrees for the cylinder when scroll completes.
`scrubSmoothing`	number	`1`	GSAP scrub smoothing value. Higher values create smoother, more delayed scroll response.
`fontSize`	string	`"clamp(3rem, 9vw, 7rem)"`	Font size for text items. Supports CSS units and clamp() for responsive sizing.
`fontWeight`	number	`900`	Font weight for text items. Range: 100 to 900.
`gap`	number	`15`	Angle gap between items in degrees.

itemsstring[]

Array of text strings to display in the 3D cylinder. Each item will be positioned along the cylinder surface.

Default:["Scroll", "To", "Reveal", "3D", "Text"]

classNamestring

Additional CSS classes for the wrapper container.

Default:""

textClassNamestring

Additional CSS classes for the text items. Use this to override text styling, colors, or add effects.

Default:""

scrollDistancestring

The scroll distance for the animation. Accepts viewport units (vh) or pixels (px). When using inside a scroll container, use pixel values.

Default:"300vh"

perspectivenumber

CSS perspective value in pixels. Higher values create a more subtle 3D effect.

Default:1000

radiusOffsetnumber

Multiplier for cylinder radius based on viewport size. Lower values create tighter text spacing. Range: 0.1 to 1.0.

Default:0.4

startRotationnumber

Initial rotation angle in degrees for the cylinder when scroll begins.

Default:-80

endRotationnumber

Final rotation angle in degrees for the cylinder when scroll completes.

Default:270

scrubSmoothingnumber

GSAP scrub smoothing value. Higher values create smoother, more delayed scroll response.

Default:1

fontSizestring

Font size for text items. Supports CSS units and clamp() for responsive sizing.

Default:"clamp(3rem, 9vw, 7rem)"

fontWeightnumber

Font weight for text items. Range: 100 to 900.

Default:900

gapnumber

Angle gap between items in degrees.

Default:15