Text Scroll Read
Splited text reads depending on the scroll progress.
Loading...
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] |
Spotlight List new
Spotlight list, when hovering an item it will highlight it by decreasing the visiblity of the other items.
Text Stagger Hover
Splitted text animation with staggered reveal triggered by hover gesture, You can easily customize by controlling the animation property (transform, opacity, blur) and the stagger value, and the transition.