Scroll Image Reveal

A div with an image that reveals through an animated mask as it scrolls into view. The image moves with a counter-parallax effect. Use it to create visual interest when images come into view.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/scroll-image-reveal

npx layro-cli add @educlopez/scroll-image-reveal

npx layro-cli add @educlopez/scroll-image-reveal

bunx layro-cli add @educlopez/scroll-image-reveal

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  motion,
  useReducedMotion,
  useScroll,
  useSpring,
  useTransform,
} from "motion/react";
import { type RefObject, useRef } from "react";

/** Motion scroll offset tuple, typed from `useScroll` itself. */
export type ScrollOffset = NonNullable<