Scroll Paragraph

A professional scroll-triggered typography component that reveals text paragraphs line-by-line while pinning the parent section, providing smooth GSAP-based scroll engagement like tracking websites.

...

How to Import

Add this import to your component file

app/page.tsx

1import { ScrollPara } from "@/components/lightswind/scroll-para"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

lines	string[]	-	Array of strings representing the text lines to reveal one by one.	Required
blur	number	10	Initial blur amount in px before revealing.	Optional
direction	"top" \| "bottom" \| "left" \| "right"	"bottom"	The initial direction from which the line enters the viewport before settling to 0.	Optional
scrubSpeed	number	1	Scrub multiplier for GSAP scroll trigger.	Optional
pinSpacing	boolean	true	Whether the parent container should add padding to space out the layout while pinning.	Optional

Basic Usage

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

app/page.tsx

1import { ScrollPara } from "@/components/lightswind/scroll-para";
2
3const textLines = [
4  "In an era of digital noise",
5  "Creating experiences that matter",
6  "Requires more than just beauty"
7];
8
9export function Demo() {
10  return (
11    <div className="w-full">
12      <ScrollPara 
13        lines={textLines} 
14        blur={12}
15        direction="bottom" 
16        pinSpacing={true}
17      />
18    </div>
19  );
20}

Previousscroll-cards

Nextscroll-list

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

Scroll Paragraph

A professional scroll-triggered typography component that reveals text paragraphs line-by-line while pinning the parent section, providing smooth GSAP-based scroll engagement like tracking websites.

...

How to Import

Add this import to your component file

app/page.tsx

1import { ScrollPara } from "@/components/lightswind/scroll-para"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

lines	string[]	-	Array of strings representing the text lines to reveal one by one.	Required
blur	number	10	Initial blur amount in px before revealing.	Optional
direction	"top" \| "bottom" \| "left" \| "right"	"bottom"	The initial direction from which the line enters the viewport before settling to 0.	Optional
scrubSpeed	number	1	Scrub multiplier for GSAP scroll trigger.	Optional
pinSpacing	boolean	true	Whether the parent container should add padding to space out the layout while pinning.	Optional

Basic Usage

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

app/page.tsx

1import { ScrollPara } from "@/components/lightswind/scroll-para";
2
3const textLines = [
4  "In an era of digital noise",
5  "Creating experiences that matter",
6  "Requires more than just beauty"
7];
8
9export function Demo() {
10  return (
11    <div className="w-full">
12      <ScrollPara 
13        lines={textLines} 
14        blur={12}
15        direction="bottom" 
16        pinSpacing={true}
17      />
18    </div>
19  );
20}

Previousscroll-cards

Nextscroll-list

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

Scroll Paragraph

How to Import

Props

Basic Usage

On This Page

Contribute

Scroll Paragraph

How to Import

Props

Basic Usage

On This Page

Contribute

React Scroll Paragraph Component - Lightswind UI

Key Details of React Scroll Paragraph

Scroll Paragraph

How to Import

Props

Basic Usage

On This Page

Contribute

Scroll Paragraph

How to Import

Props

Basic Usage

On This Page

Contribute