Hover Reveal Text

An interactive text effect where characters blur and reveal as you hover, with a beautiful spreading effect to neighboring characters. Perfect for secret codes, teasers, and fun interactions.

Preview

Glide to reveal the magic ✨

NYXHORA

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/hover-reveal-text.json

Usage

tsx
15 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { HoverRevealText } from "@/components/ui/hover-reveal-text"

export default function SecretCode() {
  return (
    <div className="bg-neutral-950 min-h-screen flex items-center justify-center">
      <HoverRevealText
        text="SECRET123"
        fontSize={2.5}
        blurAmount={10}
        spreadRadius={4}
        helperText="Hover to reveal secret code"
      />
    </div>
  )
}

Examples

Fun Message

Swipe through to see the fun 🎉

AWESOME!

Secret Code

The secret code is...

42069

Wide Spread Effect

Watch the wave effect!

HELLOWORLD

Minimal Style

MINIMAL

Nyxhora Vibes

Purple magic awaits 💜

UIMAGIC

Props

PropTypeDefaultDescription
textstring-The text to display (required)
fontSizenumber3Font size in rem units
colorstring#ffffffText color
blurAmountnumber8Blur amount for inactive characters in pixels
spreadRadiusnumber5Number of neighboring characters affected by hover
background'none' | 'dark' | 'gradient'darkBackground style for the text container
showHelperTextbooleantrueWhether to show helper text above
helperTextstringGlide to revealHelper text content
classNamestringundefinedAdditional CSS classes