Image Peel

A sticker on the page. Scroll and it curls off from a corner, showing whatever sits underneath. amount is how much of the sheet comes away by the end of the scroll — 1 clears it, 0.5 stops halfway with the curl still resting there. The back of the sticker is white. Drop in any image.

Under the sheet, in whatever theme the page is using.

Show peel

Installation

pnpm dlx shadcn@latest add @23rd/image-peel

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/image-peel

Usage

Give it a height and an image. The section is tall on purpose: the sheet sticks while you scroll through it, and the peel follows that travel. Children are what waits underneath. Honors prefers-reduced-motion (the sticker stays flat).

"use client"

import { ImagePeel } from "@/components/ui/image-peel"

export function Sticker() {
  return (
    <ImagePeel src="/sticker.png" alt="Sticker" side="bottom-right" amount={1}>
      <div className="h-full bg-background" />
    </ImagePeel>
  )
}

Inside a smaller scroller, set the height to a multiple of that frame (h-[240%]). The sheet sticks to the nearest scroll parent, not always the window.

Props

amount is clamped to 0–1. side falls back to "bottom-right" when it is not one of those four corners. The curl rolls on the diagonal from that corner. The back of the curl is #FFFFFF. Transparent images keep their shape — a die-cut sticker peels as a sticker, not as a rectangle.

Inspiration

The corner lift is in the same family as Sticker Peel on React Bits. That sticker peels on hover. This one peels as you scroll, from a corner, with a white back and no shadow behind it. A local copy of the React Bits component is in tmp-demos/sticker-peel for reference. It is not part of the registry.