Text Scroll Read
Splited text reads depending on the scroll progress.
multidisciplinary creative studio specializing in brand strategy, product design, and digital experiences.
Installation
Usage
<TextScrollRead>
<TextScrollReadWrap className="h-screen my-12 place-content-center md:w-4/5 mx-auto">
<ClipText className="text-3xl md:text-4xl font-bold leading-normal uppercase bg-[linear-gradient(-90deg,rgba(0,0,0,0.05)_50%,rgb(0,0,0)_50%)]">
multidisciplinary creative studio specializing in brand strategy, product
design, and digital experiences.
</ClipText>
</TextScrollReadWrap>
</TextScrollRead>Props
TextScrollRead
| Prop | Type | Default |
|---|---|---|
spaceClass? | tailwind class | h-80 |
offset? | ScrollOffset | undefined |
TextScrollReadWrap
| Prop | Type | Default |
|---|---|---|
yRange? | array | [0,320] |
yInput? | array | [0, 1] |