Skip to content
Magic UI SolidMagicUI Solid
Menu
Getting Started
IntroductionInstallation
Components
MarqueeTerminalHero Video DialogBento GridAnimated ListDockGlobeTweet CardOrbiting CirclesAvatar CirclesLensIcon CloudPointerSmooth CursorProgressive BlurDotted Map
Special Effects
Animated BeamBorder BeamShine BorderMagic CardGlare HoverMeteorsConfettiParticlesTheme Toggler
Animations
Blur Fade
Text Animations
Text AnimateTyping AnimationLine Shadow TextAurora TextVideo TextNumber TickerAnimated Shiny TextAnimated Gradient TextText RevealDia Text RevealHyper TextWord RotateScroll Based VelocitySparkles TextMorphing TextSpinning TextText HighlighterText 3D Flip
Device Mocks
SafariiPhoneAndroid
Buttons
Rainbow ButtonShimmer ButtonRipple Button
Backgrounds
Flickering GridAnimated Grid PatternRetro GridRippleDot PatternGrid PatternHexagon PatternStriped PatternInteractive Grid PatternLight RaysNoise Texture
Community
Shiny ButtonFile TreeCode ComparisonScroll ProgressNeon Gradient CardComic TextKinetic TextCool ModePixel ImagePulsating ButtonWarp BackgroundInteractive Hover ButtonAnimated Circular Progress BarBacklightGlyph Matrix

Text Reveal

Fade in text as you scroll down the page.

MagicMagicUIUIwillwillchangechangethethewaywayyouyoudesign.design.
@/demos/TextRevealDemo.tsx
import { TextReveal } from '@/registry/magicui/text-reveal'


export function TextRevealDemo() {
  return <TextReveal>Magic UI will change the way you design.</TextReveal>
}

Installation

Section titled “Installation”
Terminal window
pnpm dlx shadcn@latest add @magicui-solid/text-reveal

Import

Section titled “Import”
import { TextReveal } from '@/components/magicui/text-reveal'

Usage

Section titled “Usage”
<TextReveal>Magic UI will change the way you design.</TextReveal>

Props

Section titled “Props”
Prop Type Default Description
children string Required The text content to reveal
class string - Additional class for the container

Original:

magicui.design/docs/components/text-reveal