HyperText
Text that scrambles into random uppercase letters and resolves character-by-character back to the original on hover, with a staggered per-letter reveal and an optional animate-on-load mode
Preview
<script lang="ts">
import { HyperText } from 'fancy-ui-svelte';
</script>
<HyperText text="Hover Me!" />Installation
Usage
<script lang="ts">
import { HyperText } from 'fancy-ui-svelte';
</script>
<HyperText />Examples
Basic Usage
<script lang="ts">
import { HyperText } from "$lib/fancy-ui/hyper-text";
</script>
<HyperText text="Hover me!" class="text-foreground text-4xl font-bold" />Animate on Load
Trigger animation on mount.
<script lang="ts">
import { HyperText } from "$lib/fancy-ui/hyper-text";
</script>
<HyperText text="Auto Start" animateOnLoad class="text-foreground text-4xl font-bold" />Slow Animation
Longer animation duration.
<script lang="ts">
import { HyperText } from "$lib/fancy-ui/hyper-text";
</script>
<HyperText text="Take your time" duration={2000} class="text-foreground text-3xl font-bold" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text * | string | - | Text to display and scramble |
duration | number | 800 | Total animation duration in ms |
animateOnLoad | boolean | false | Whether to animate on initial load |
Links
Related components
BlurReveal
Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion
BoxReveal
Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver
ColourfulText
Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions