FallingText

PreviousNext

Characters fall with gravity + bounce creating a playful entrance.

Docs
react-bitscomponent

Preview

Loading preview…
FallingText/FallingText.css
.falling-text-container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-align: center;
  padding-top: 2em;
}

.falling-text-target {
  display: inline-block;
}

.word {
  display: inline-block;
  margin: 0 2px;
  user-select: none;
}

.highlighted {
  color: cyan;
  font-weight: bold;
}

.falling-text-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

Installation

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

Usage

import { FallingTextJSCSS } from "@/components/FallingText-JS-CSS"
<FallingTextJSCSS />