Scroll Reveal | Craft | Muhammed Sanjid

Overview

Content that arrives as it scrolls into view. Six styles: fade-up (a short upward drift), blur (sharpens into focus), scale (a slight grow), slide-left and slide-right, and clip (unrolls from the top). It can watch the page or a scrollable panel via root, reveal once or every time, and wait for a set share of the element to be visible. Reduced motion shows content immediately.

Installation

Install dependencies:

$ pnpm add motion

Add the utility function for class merging:

lib/utils.ts

tsx

1import { ClassValue, clsx } from "clsx";2import { twMerge } from "tailwind-merge";3
4export function cn(...inputs: ClassValue[]) {5  return twMerge(clsx(inputs));6}

Copy the component code into your project:

components/ui/scroll-reveal.tsx

tsx

1"use client";2
3import { useRef, type ReactNode, type RefObject } from "react";4import { motion, useInView, useReducedMotion, type TargetAndTransition } from "motion/react";5import { cn } from "@/lib/utils";6
7export type ScrollRevealVariant = "fade-up" | "blur" | "scale" | "slide-left" | "slide-right" | "clip";8
9export type ScrollRevealProps = {10  children: ReactNode;11  className?: string;12  variant?: ScrollRevealVariant;13  /** Seconds to wait after entering view, capped at 0.6. */14  delay?: number;15  /** Seconds for the reveal. */16  duration?: number;17  /** Reveal only once (default) or whenever the element re-enters view. */18  once?: boolean;19  /** How much of the element must be visible, 0–1. */20  amount?: number;21  /**22   * Scroll container to watch instead of the window, for content inside a23   * scrollable panel.24   */25  root?: RefObject<Element | null>;26};27
28const EASE_OUT = [0.23, 1, 0.32, 1] as const;29
30const HIDDEN: Record<ScrollRevealVariant, TargetAndTransition> = {31  "fade-up": { opacity: 0, y: 24 },32  blur: { opacity: 0, y: 12, filter: "blur(10px)" },33  scale: { opacity: 0, scale: 0.92, y: 12 },34  "slide-left": { opacity: 0, x: -40 },35  "slide-right": { opacity: 0, x: 40 },36  clip: { opacity: 1, clipPath: "inset(0 0 100% 0 round 16px)", y: 16 },37};38
39const SHOWN: Record<ScrollRevealVariant, TargetAndTransition> = {40  "fade-up": { opacity: 1, y: 0 },41  blur: { opacity: 1, y: 0, filter: "blur(0px)" },42  scale: { opacity: 1, scale: 1, y: 0 },43  "slide-left": { opacity: 1, x: 0 },44  "slide-right": { opacity: 1, x: 0 },45  clip: { opacity: 1, clipPath: "inset(0 0 0% 0 round 16px)", y: 0 },46};47
48export function ScrollReveal({49  children,50  className,51  variant = "fade-up",52  delay = 0,53  duration = 0.6,54  once = true,55  amount = 0.25,56  root,57}: ScrollRevealProps) {58  const ref = useRef<HTMLDivElement>(null);59  const reduce = useReducedMotion();60  const inView = useInView(ref, { once, amount, root, margin: "0px 0px -8% 0px" });61
62  if (reduce) return <div className={className}>{children}</div>;63
64  return (65    <motion.div66      ref={ref}67      className={cn(className)}68      initial={HIDDEN[variant]}69      animate={inView ? SHOWN[variant] : HIDDEN[variant]}70      transition={{71        duration: variant === "clip" ? duration * 1.2 : duration,72        delay: inView ? Math.max(0, Math.min(delay, 0.6)) : 0,73        ease: EASE_OUT,74      }}75    >76      {children}77    </motion.div>78  );79}

Adjust import paths according to your folder structure.

Basic Usage

tsx

1import { ScrollReveal } from "@/components/ui/scroll-reveal";2
3<ScrollReveal variant="blur">4  <article>Content sharpens in as it reaches the viewport.</article>5</ScrollReveal>6
7// Inside a scrollable panel8const panel = useRef<HTMLDivElement>(null);9
10<div ref={panel} className="h-96 overflow-y-auto">11  <ScrollReveal root={panel} variant="slide-left">…</ScrollReveal>12</div>

Props

Prop	Type	Required	Default	Description
children	ReactNode	Yes	—	Content to reveal.
variant	"fade-up" \| "blur" \| "scale" \| "slide-left" \| "slide-right" \| "clip"	No	"fade-up"	Reveal style.
root	RefObject<Element>	No	—	Scroll container to watch instead of the window.
amount	number	No	0.25	Share of the element that must be visible, 0–1.
once	boolean	No	true	Reveal once, or hide again when it leaves view.
delay / duration	number	No	0 / 0.6	Seconds. Delay is capped at 0.6 so nothing waits too long.
className	string	No	—	Classes for the wrapper.

Best Practices

Use it on editorial and marketing sections; never hide content people need right away, like navigation or form fields.
Pick one or two styles per page. Alternating slide-left and slide-right gives a list rhythm.
Inside a scrollable panel, pass the panel as root, otherwise the reveal fires against the window.
For several items arriving together, give each a small delay (0.05–0.1 s apart).