ScrollFloat

PreviousNext

Text gently floats / parallax shifts on scroll.

Docs
react-bitscomponent

Preview

Loading preview…
ScrollFloat/ScrollFloat.css
.scroll-float {
  overflow: hidden;
}

.scroll-float-text {
  display: inline-block;
  font-size: clamp(1.6rem, 8vw, 10rem);
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}

.char {
  display: inline-block;
}

Installation

npx shadcn@latest add @react-bits/ScrollFloat-JS-CSS

Usage

import { ScrollFloatJSCSS } from "@/components/ScrollFloat-JS-CSS"
<ScrollFloatJSCSS />