Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

19.0k
173

Box Reveal Animation

PreviousNext

Sliding box animation that reveals text behind it.

Installation

pnpm dlx shadcn@latest add @magicui/box-reveal

Usage

import { BoxReveal } from "@/components/magicui/box-reveal";
<BoxReveal>Box Reveal</BoxReveal>

Props

PropTypeDefaultDescription
classNamestring-The class name to be applied to the component
boxColorstring#5046e6Color of the box overlaying the text
durationnumber0.5Durations (seconds) of the animation