Entrance

Reveal on Scroll

A line-by-line mask reveal that plays as the element enters the viewport. The clip and easing are tuned so text settles with weight instead of sliding flatly. Drop it around any block of copy or media.

Open in Figma ↗

What's included

React component (Framer Motion)
Framework-free CSS keyframes
Source Figma file with the timed prototype

The code

npm install motion

"use client";

import { motion } from "motion/react";

export function Reveal({ children }: { children: React.ReactNode }) {
  return (
    <span style={{ display: "inline-block", overflow: "hidden" }}>
      <motion.span
        initial={{ y: "110%" }}
        whileInView={{ y: 0 }}
        viewport={{ once: true, margin: "-10% 0px" }}
        transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
        style={{ display: "inline-block" }}
      >
        {children}
      </motion.span>
    </span>
  );
}

Dependencies: motion