Components
Loading preview...
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.
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/scramble-hoverimport { 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 }