A text component that scrambles letters before revealing the final text on hover or load.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/hyper-text.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<script setup lang="ts">
import HyperText from '~/components/ui/hyper-text/HyperText.vue';
</script>
<template>
<HyperText text="Hyper Text" class="text-4xl font-bold" />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text content to be animated |
duration | number | 800 | Total animation duration in milliseconds |
animate-on-load | boolean | true | Whether to start the animation automatically on mount |
class | string | — | Additional CSS classes for styling |