Scramble Hover Diff Class Demo

PreviousNext

A block component.

Docs
fancyblock

Preview

Loading preview…
examples/text/scramble-hover-diff-class-demo.tsx
import ScrambleHover from "@/components/fancy/text/scramble-hover"

export default function Preview() {
  return (
    <div className="w-dvw h-dvh flex text-4xl justify-center items-center bg-white text-foreground dark:text-muted  font-normal overflow-hidden p-24 space-y-2">
      <ScrambleHover
        text={"special symbols"}
        scrambleSpeed={50}
        maxIterations={8}
        useOriginalCharsOnly={false}
        className="cursor-pointer text-4xl"
        characters="čüỳĦØ↋⒬¢⏧⏛⏄⎄*¿"
        scrambledClassName="font-notoSansSymbols text-3xl cursor-pointer"
      />
    </div>
  )
}

Installation

npx shadcn@latest add @fancy/scramble-hover-diff-class-demo

Usage

import { ScrambleHoverDiffClassDemo } from "@/components/scramble-hover-diff-class-demo"
<ScrambleHoverDiffClassDemo />