Lines of text turning on a 3D cylinder as you scroll
| 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.
["Scroll", "To", "Reveal", "3D", "Text"]classNamestringAdditional CSS classes for the wrapper container.
""textClassNamestringAdditional CSS classes for the text items. Use this to override text styling, colors, or add effects.
""scrollDistancestringThe scroll distance for the animation. Accepts viewport units (vh) or pixels (px). When using inside a scroll container, use pixel values.
"300vh"perspectivenumberCSS perspective value in pixels. Higher values create a more subtle 3D effect.
1000radiusOffsetnumberMultiplier for cylinder radius based on viewport size. Lower values create tighter text spacing. Range: 0.1 to 1.0.
0.4startRotationnumberInitial rotation angle in degrees for the cylinder when scroll begins.
-80endRotationnumberFinal rotation angle in degrees for the cylinder when scroll completes.
270scrubSmoothingnumberGSAP scrub smoothing value. Higher values create smoother, more delayed scroll response.
1fontSizestringFont size for text items. Supports CSS units and clamp() for responsive sizing.
"clamp(3rem, 9vw, 7rem)"fontWeightnumberFont weight for text items. Range: 100 to 900.
900gapnumberAngle gap between items in degrees.
15