Box Reveal

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

Installation

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

Wrap any element with a <div class="box-reveal"> to apply the box reveal effect.

<div class="box-reveal">
  <h1>Box Reveal</h1>
</div>

Data Attribute	Type	Default	Description
`data-side`	`"left" \| "right"`	`"left"`	Direction from which the reveal box slides away
`data-color`	`string`	`"#FACC15"`	Background color of the reveal overlay
`data-width`	`"fit-content" \| "full"`	`"fit-content"`	Controls the width of the reveal container

On This Page

Contribute