Skip to main content
This component requires the motion-sv dependency.

​
Installation

npx shadcn-svelte@latest add https://sv-animations.vercel.app/r/hyper-text

​
Usage

<script lang="ts">
  import { HyperText } from "$lib/components/magic/hyper-text";
</script>

<HyperText text="HYPER TEXT" />

​
Examples

​
Basic Example

Simple hyper text with default settings. 
<HyperText text="HELLO WORLD" />

​
Animate on Hover

Trigger the animation when hovering over the text. 
<HyperText 
  text="HOVER ME" 
  animateOnHover={true}
/>

​
Custom Duration

Control how fast the scramble effect completes. 
<HyperText 
  text="FAST ANIMATION" 
  duration={400}
/>

<HyperText 
  text="SLOW ANIMATION" 
  duration={1600}
/>

​
Start on View

Animate when the element enters the viewport. 
<HyperText 
  text="SCROLL TO SEE" 
  startOnView={true}
/>

​
With Delay

Delay the animation start. 
<HyperText 
  text="DELAYED START" 
  delay={1000}
/>

​
Custom Character Set

Define which characters to use during the scramble. 
<HyperText 
  text="NUMBERS" 
  characterSet={['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']}
/>

​
Different Element Types

Render as different HTML elements. 
<HyperText text="HEADING" as="h1" />
<HyperText text="PARAGRAPH" as="p" />
<HyperText text="SPAN" as="span" />

​
Styled Examples

Combine with custom styles. 
<HyperText 
  text="LARGE TEXT" 
  class="text-6xl font-bold text-primary"
/>

<HyperText 
  text="COLORED TEXT" 
  class="text-2xl text-blue-500 font-mono"
/>

​
Props

​
text
string
required
The text to display and animate.
​
duration
number
default:800
The duration in milliseconds for the complete animation sequence.
​
delay
number
default:0
Delay in milliseconds before the animation starts.
​
animateOnHover
boolean
default:true
Whether to trigger the animation on mouse hover.
​
startOnView
boolean
default:false
Whether to trigger the animation when the element enters the viewport.
​
characterSet
string[] | readonly string[]
default:"[\"A\", \"B\", \"C\", ..., \"Z\"]"
Array of characters to use during the scramble animation. Defaults to uppercase English alphabet.
​
as
ElementType
default:"div"
The HTML element type to render. Options: div, span, p, h1, h2, h3, h4, h5, h6.
​
class
string
Additional CSS classes to apply to the component.

​
How It Works

The hyper text effect creates a “decryption” or “glitch” animation:
  1. Initialization: Text starts as random characters from the character set
  2. Progressive reveal: Characters are revealed one by one from left to right
  3. Smooth transition: Each character cycles through random replacements before settling on the final character
  4. Monospace font: Uses font-mono to ensure consistent character widths
  5. Uppercase: Characters are displayed in uppercase for a more dramatic effect

​
Customization

​
Lowercase Text

Use lowercase character set and remove uppercase transform: 
<HyperText 
  text="lowercase effect" 
  characterSet={['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']}
  class="normal-case"
/>

​
Symbol Character Set

Use special characters for a hacker/matrix effect: 
<HyperText 
  text="CYBER TEXT" 
  characterSet={['@', '#', '$', '%', '&', '*', '!', '?', '<', '>', '/', '\\']}
/>

​
Binary Effect

Use only 0s and 1s: 
<HyperText 
  text="BINARY" 
  characterSet={['0', '1']}
/>

​
Continuous Hover Animation

Disable initial animation and only animate on hover: 
<HyperText 
  text="HOVER ME" 
  startOnView={false}
  animateOnHover={true}
  delay={0}
/>

​
Longer Scramble

Increase duration for a more dramatic effect: 
<HyperText 
  text="DRAMATIC" 
  duration={2000}
/>

​
Use Cases

  • Landing pages: Create attention-grabbing hero text
  • Section headers: Add interest to content sections
  • Loading states: Show dynamic loading text
  • Hover effects: Add interactivity to navigation or CTAs
  • Sci-fi themes: Perfect for tech or cyberpunk aesthetics
  • Product launches: Create buzz with dynamic reveals

​
Accessibility

The component uses motion-sv’s AnimatePresence for smooth transitions and maintains proper text content for screen readers. The actual text content is always present in the DOM, just visually scrambled during animation.
Spaces in the text are preserved and not scrambled, ensuring word boundaries remain clear during the animation.
Very long text with short duration may make the scramble effect less noticeable. Adjust the duration proportionally to your text length.

Build docs developers (and LLMs) love

Get started for freeTalk to us