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

Command Palette

Search for a command to run...

Docs
Box Reveal Animation

Box Reveal Animation

Sliding box animation that reveals text behind it.

Magic UI.

UI library for Design Engineers

-> 20+ free and open-source animated components built withReact,Typescript,Tailwind CSS, andMotion.
-> 100% open-source, and customizable.

Installation

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