Hyper Text
A beautiful text scramble animation component that creates a scrambling matrix-like effect on page load or on hover.
Preview
Installation
pnpm dlx vibe-ui-kit@latest add hyper-text
Variations
Trigger Scramble on Hover
Animate the text scramble sequence each time the user hovers over the element.
Terminal Mockup
Usage
import { HyperText } from "@/components/ui/hyper-text"<HyperText>HYPER TEXT</HyperText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | "" | The text string to scramble and decode |
duration | number | 800 | Duration of the scramble decoding effect in milliseconds |
animateOnHover | boolean | true | Triggers the scramble animation when hovering over the component |
className | string? | "" | Additional classes for the container |
This HyperText component creates a cybernetic matrix scramble decoding effect on hover or mount.
Contributors
JS
Jenish Sabhadiya