The TextScramble component animates text into view by rapidly cycling through a set of randomized characters. It creates a classic "cyberpunk" or "decoding" effect. Now updated with 4 pre-configured character sets and better re-triggering logic.
Live Preview
Installation
npx kinetic-ui-cli@latest add text-scrambleCustom Triggers
You can use the trigger prop in combination with state to re-run the animation when a user interacts with an element.
import { useState } from 'react';
import { TextScramble } from '@/components/creative/text-scramble';
export function HoverScramble() {
const [isHovered, setIsHovered] = useState(false);
return (
<button
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<TextScramble
text="Hover Me"
trigger={isHovered}
/>
</button>
);
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { TextScramble } from "@/components/creative/text-scramble";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { TextScramble } from "@/components/creative/text-scramble";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<TextScramble
text="example"
speed{10}
delay{10}
/>
</div>
);
}