Box Reveal

A smooth reveal animation that slides a colored overlay away to introduce content as it enters the viewport.

Atlas UI

Because your content deserves a dramatic entrance, not a simple fade-in ;)

pnpm dlx shadcn@latest add https://atlasui.dev/r/box-reveal.json

import { BoxReveal } from "@/components/box-reveal";

import { BoxReveal } from "@/components/box-reveal";

<BoxReveal>
  <h1>Box Reveal</h1>
</BoxReveal>
 
<BoxReveal>
  // Pass any children here, and the reveal effect will be applied to it.
</BoxReveal>

<BoxReveal>
  <h1>Box Reveal</h1>
</BoxReveal>
 
<BoxReveal>
  // Pass any children here, and the reveal effect will be applied to it.
</BoxReveal>

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to which animation must be applied
`side`	`"left" \| "right"`	`"left"`	Direction from which the reveal box slides away
`width`	`"fit-content" \| "full"`	`"fit-content"`	Controls the width of the reveal container
`color`	`string`	`"#FACC15"`	Background color of the reveal overlay
`className`	`string`	-	Additional class names applied to the root container

On This Page

Contribute