Box Reveal

atlas-ui/box-reveal-html-demo

FreeExample

Example of Box Reveal that has a smooth reveal animation that slides a colored overlay away to introduce content as it enters the viewport.

Live preview

live · rendered by the registry

Rendered by atlas-ui on their own page — this is the component running, not a screenshot of it.

Install it

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

Source

registry/html/examples/box-reveal-html-demo/index.htmlatlasui.dev/r/box-reveal-html-demo.json

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Box Reveal Html Demo - Atlas UI</title>
7    <link rel="stylesheet" href="style.css" />
8  </head>
9  <body>
10    <div class="box-reveal">
11      <h1>Atlas UI</h1>
12    </div>
13 
14    <div class="box-reveal">
15      <p>
16        Because your content deserves a dramatic entrance, not a simple fade-in
17        ;)
18      </p>
19    </div>
20  </body>
21 
22  <script type="module" src="script.js"></script>
23</html>

What it pulls in

npm packages

motion

Other registry items

https://atlasui.dev/r/box-reveal-html.json

Files it writes

registry/html/examples/box-reveal-html-demo/index.html
registry/html/examples/box-reveal-html-demo/style.css
registry/html/examples/box-reveal-html-demo/script.js

More from atlas-ui

All 99 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Animated Mobile Navbar Demoanimated-mobile-navbar-demo	atlas-ui	Examples	Free	no deps
Animated Mobile Navbaranimated-mobile-navbar-html-demo	atlas-ui	Examples	Free	1 dep · 3 files
Animated Mobile Navbar Side Exampleanimated-mobile-navbar-side-example	atlas-ui	Examples	Free	no deps
Blend Mouse Trailer Demoblend-mouse-trailer-demo	atlas-ui	Examples	Free	no deps
Blend Mouse Trailerblend-mouse-trailer-html-demo	atlas-ui	Examples	Free	no deps · 3 files
Blob Mouse Trailer Demoblob-mouse-trailer-demo	atlas-ui	Examples	Free	no deps
Blob Mouse Trailerblob-mouse-trailer-html-demo	atlas-ui	Examples	Free	no deps · 3 files
Box Reveal Demobox-reveal-demo	atlas-ui	Examples	Free	no deps