Rolling Text 3d

A premium 3D text rotation component that creates a 'Tube' rotation effect using GSAP. Each character rotates in a 3D cylindrical space for a high-impact cinematic feel.

...

How to Import

Add this import to your component file

app/page.tsx

1import { RollingText3D } from "@/components/lightswind/rolling-text-3d"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

text	string	-	The text content to be animated.	Required
fontSize	string	"8vw"	CSS font size (e.g., '5vw', '48px').	Optional
color	string	"currentColor"	Text color (hex, hsl, or tailwind utility).	Optional
duration	number	0.9	Time in seconds for a full rotation cycle.	Optional
stagger	number	0.08	Stagger delay between each character's rotation.	Optional
perspective	number	700	3D perspective value.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { RollingText3D } from "@/components/lightswind/rolling-text-3d";
2
3export function RollingTextDemo() {
4  return (
5    <div className="h-64 flex items-center justify-center bg-black">
6      <RollingText3D 
7        text="LIGHTSWIND" 
8        fontSize="6vw" 
9        color="#ffffff" 
10      />
11    </div>
12  );
13}

Previoustyping-text

Next3d-scroll-paragraph

A product byＭＵＨＩＬＡＮ and Team❤️.

Rolling Text 3d

A premium 3D text rotation component that creates a 'Tube' rotation effect using GSAP. Each character rotates in a 3D cylindrical space for a high-impact cinematic feel.

...

How to Import

Add this import to your component file

app/page.tsx

1import { RollingText3D } from "@/components/lightswind/rolling-text-3d"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

text	string	-	The text content to be animated.	Required
fontSize	string	"8vw"	CSS font size (e.g., '5vw', '48px').	Optional
color	string	"currentColor"	Text color (hex, hsl, or tailwind utility).	Optional
duration	number	0.9	Time in seconds for a full rotation cycle.	Optional
stagger	number	0.08	Stagger delay between each character's rotation.	Optional
perspective	number	700	3D perspective value.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { RollingText3D } from "@/components/lightswind/rolling-text-3d";
2
3export function RollingTextDemo() {
4  return (
5    <div className="h-64 flex items-center justify-center bg-black">
6      <RollingText3D 
7        text="LIGHTSWIND" 
8        fontSize="6vw" 
9        color="#ffffff" 
10      />
11    </div>
12  );
13}

Previoustyping-text

Next3d-scroll-paragraph

A product byＭＵＨＩＬＡＮ and Team❤️.

Rolling Text 3d

How to Import

Props

Basic Usage

On This Page

Contribute

Rolling Text 3d

How to Import

Props

Basic Usage

On This Page

Contribute

React Rolling Text 3d Component - Lightswind UI

Key Details of React Rolling Text 3d

Rolling Text 3d

How to Import

Props

Basic Usage

On This Page

Contribute

Rolling Text 3d

How to Import

Props

Basic Usage

On This Page

Contribute