Beta

Text Scroll Read

Splited text reads depending on the scroll progress.

Open in 21st dev
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

PropTypeDefault
spaceClass?
tailwind class
h-80
offset?
ScrollOffset
undefined

TextScrollReadWrap

PropTypeDefault
yRange?
array
[0,320]
yInput?
array
[0, 1]

Rating Stars

rating stars component with customizable color, size depending on average rating.

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.