This component no longer exists. It was in atlas-ui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Reveal Effect
atlas-ui/reveal-effect-html-demoRemovedExample
Example of Reveal Effect with a vertical slide, blur fade-in, and clipping reveal effect using HTML, CSS, JavaScript and Motion.
Install it
npx shadcn@latest add https://atlasui.dev/r/reveal-effect-html-demo.jsonSource
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>Reveal Effect Html Demo - Atlas UI</title>7 <link rel="stylesheet" href="style.css" />8 </head>9 <body>10 <div11 class="reveal-effect"12 data-speed="medium"13 data-delay="0.2"14 data-translatey="40"15 >16 This content fades in, unblurs, and slides up when visible.17 </div>1819 <div class="reveal-effect" data-speed="fast">20 Slower animation with more translateY.21 </div>2223 <div class="reveal-effect" data-speed="fast" data-translatey="20">24 Fast and snappy reveal effect.25 </div>26 </body>2728 <script type="module" src="script.js"></script>29</html>
What it pulls in
npm packages
Other registry items
