Docs

Reveal Effect

Reveal Effect

Animates content into view with a vertical slide, blur fade-in, and clipping reveal effect.

Atlas UI

This is the same effect you saw on the homepage ;)

Installation

Install the following dependencies:

npm install motion

Copy and paste the following code into your project.

components/atlas_ui/reveal-effect.tsx
"use client";
 
import { motion } from "motion/react";
 
interface RevealEffectProps {
  children: React.ReactNode;
  translateY?: number;
  delay?: number;
  speed?: "slow" | "medium" | "fast";
}
 
const speedDurations = {
  slow: 1.6,
  medium: 1,
  fast: 0.5,
};
 
export const RevealEffect = ({
  children,
  translateY,
  delay,
  speed = "medium",
}: RevealEffectProps) => {
  return (
    <motion.div
      initial={{
        opacity: 0,
        filter: "blur(12px)",
        clipPath: "inset(-5% 100% -5% 0)",
        translateY: translateY,
      }}
      whileInView={{
        opacity: 1,
        filter: "blur(0px)",
        clipPath: "inset(-5% 0% -5% 0)",
        translateY: 0,
      }}
      transition={{
        duration: speedDurations[speed],
        ease: "easeInOut",
        delay: delay,
      }}
      viewport={{ once: true }}
    >
      {children}
    </motion.div>
  );
};

Update the import paths to match your project setup.

Usage

import { RevealEffect } from "@/components/atlas_ui/reveal-effect";
<RevealEffect>
  <h1>Reveal Effect</h1>
</RevealEffect>
 
<RevealEffect>
  // Pass any children here, and the reveal effect will be applied to it.
</RevealEffect>

You can increase/decrease the speed of the animation by passing the speed prop.

Props / Data Attributes

PropTypeDefaultDescription
childrenReact.ReactNode-The content to which animation must be applied
speedstring"medium"Animation speed, can be "slow", "medium", or "fast"
delaynumber0Delay before the animation starts
translateYnumber0The Y-axis translation from where the element will initially begin animation

Example

Speed

To change the speed of the animation, you can pass the speed prop or use the data-speed attribute. The default speed is "medium". You can set it to "slow" or "fast".

I'm fast as heck.

This is medium speed, which is the default.

I'm slow as molasses.

<div>
  <RevealEffect speed="slow">...</RevealEffect>
 
  <RevealEffect speed="fast">...</RevealEffect>
</div>

Delay

To add a delay before the animation starts, you can pass the delay prop or use the data-delay attribute. The default delay is 0.

I'm First.

I was delayed by 0.2 seconds.

I was delayed by 0.5 seconds.

<div>
  <RevealEffect delay={0.2}>...</RevealEffect>
 
  <RevealEffect delay={0.5}>...</RevealEffect>
</div>

Translate Y

To change the Y-axis translation from where the element will initially begin animation, you can pass the translateY prop or use the data-translatey attribute. The default value is 0. You can set the value between 10-15 for a subtle effect or any other value suitable for your needs. Pair translateY with a small delay for a more pronounced effect.

Atlas UI

An open-source library of prebuilt components.

Built to save time, inspire creativity, and elevate your UI

<div>
  <RevealEffect translateY={10}>...</RevealEffect>
 
  <RevealEffect translateY={15}>...</RevealEffect>
</div>
Hacker TextScroll Based Text Reveal