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-effectRemovedComponent
Animates content into view with a vertical slide, blur fade-in, and clipping reveal effect.
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/reveal-effect.jsonSource
1"use client";23import { motion } from "motion/react";45interface RevealEffectProps {6 children: React.ReactNode;7 translateY?: number;8 delay?: number;9 speed?: "slow" | "medium" | "fast";10}1112const speedDurations = {13 slow: 1.6,14 medium: 1,15 fast: 0.5,16};1718export const RevealEffect = ({19 children,20 translateY,21 delay,22 speed = "medium",23}: RevealEffectProps) => {24 return (25 <motion.div26 initial={{27 opacity: 0,28 filter: "blur(12px)",29 clipPath: "inset(-5% 100% -5% 0)",30 translateY: translateY,31 }}32 whileInView={{33 opacity: 1,34 filter: "blur(0px)",35 clipPath: "inset(-5% 0% -5% 0)",36 translateY: 0,37 }}38 transition={{39 duration: speedDurations[speed],40 ease: "easeInOut",41 delay: delay,42 }}43 viewport={{ once: true }}44 >45 {children}46 </motion.div>47 );48};
What it pulls in
npm packages
