shadcn index

ScrambledText

PreviousNext

Detects cursor position and applies a distortion effect to text.

Docs
react-bitscomponent

Preview

Loading preview…
ScrambledText/ScrambledText.css
.text-block {
  margin: 7vw;
  max-width: 800px;
  font-family: monospace;
  font-size: clamp(14px, 4vw, 32px);
  color: #fff;
}

.char {
  will-change: transform;
  display: inline-block;
}

Installation

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

Usage

import { ScrambledTextJSCSS } from "@/components/ScrambledText-JS-CSS"
<ScrambledTextJSCSS />