Components
A text component that scrambles the text on hover. For the scrambling effect, you can use either the original characters, or another set of characters specified in the characters prop.
npx shadcn@latest add https://21st.dev/r/danielpetho/scramble-hoverLoading preview...
import { ScrambleHover } from "@/components/ui/scramble-hover"
function Preview() {
return (
<div className="w-full h-full text-xl sm:text-3xl md:text-5xl bg-background font-normal overflow-hidden p-12 sm:p-20 flex flex-col md:p-24 space-y-2 space-x-6">
<ScrambleHover
text={"original characters"}
scrambleSpeed={50}
maxIterations={8}
useOriginalCharsOnly={true}
className="cursor-pointer"
/>
<ScrambleHover
text={"new characters"}
scrambleSpeed={50}
maxIterations={8}
useOriginalCharsOnly={false}
className="cursor-pointer"
characters="abcdefghijklmnopqrstuvwxyz!@#$%^&*()_+-=[]{}|;':\,./<>?"
/>
</div>
)
}
export { Preview }