Components
Loading preview...
Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/text-scramble"use client"
import * as React from "react"
import { useState } from "react"
import { TextScramble } from "@/components/ui/text-scramble"
export function BasicDemo() {
return (
<div className="flex justify-center">
<TextScramble className="font-mono text-sm uppercase">
Text Scramble
</TextScramble>
</div>
)
}
export function CustomTriggerDemo() {
const [isTrigger, setIsTrigger] = useState(false)
return (
<div className="flex justify-center">
<a
href="#"
className="text-zinc-500 transition-colors hover:text-black dark:hover:text-white"
>
<TextScramble
className="text-sm"
as="span"
speed={0.01}
trigger={isTrigger}
onHoverStart={() => setIsTrigger(true)}
onScrambleComplete={() => setIsTrigger(false)}
>
Tyler, The Creator - I Hope You Find Your Way Home
</TextScramble>
</a>
</div>
)
}
export function CustomCharacterDemo() {
return (
<div className="flex justify-center">
<TextScramble
className="font-mono text-sm"
duration={1.2}
characterSet=". "
>
Generating the interface...
</TextScramble>
</div>
)
}
export const demos = [
{
name: "Basic",
description: "Basic text scramble with default settings",
component: BasicDemo,
},
{
name: "Custom Trigger",
description: "Text scramble triggered on hover",
component: CustomTriggerDemo,
},
{
name: "Custom Character Set",
description: "Text scramble with custom character set and duration",
component: CustomCharacterDemo,
}
]