StickerPeel
sticker-peelLets users drag or hover a sticker corner to reveal a peel, shadow, and pointer-following highlight.
Usage
Basic usage
Place it in the relative container, hover/press and curl the edge to turn it up; imageSrc is required, rotate creates a skewed feeling.
hover Lift · Press and hold for larger · Drag to try
<div className="relative grid h-64 place-items-center overflow-hidden rounded-xl">
<StickerPeel imageSrc="/sticker.png" width={150} rotate={14} />
</div>Hemming direction
peelDirection Let the entire sticker rotate together with the curled edge to change the direction of lifting.
hover Lift · Press and hold for larger · Drag to try
<StickerPeel
imageSrc="/bolt.png"
width={150}
rotate={-10}
peelDirection={20}
/>Large curling + strong highlights
Increase the reveal ratio of hover/active, and enhance the mouse following highlight of lightingIntensity.
hover Lift · Press and hold for larger · Drag to try
<StickerPeel
imageSrc="/sticker.png"
width={170}
rotate={8}
peelBackHoverPct={42}
peelBackActivePct={55}
lightingIntensity={0.7}
/>Locked and cannot be dragged
draggable={false} Only retains the curling interaction and prohibits dragging.
hover Lift · Press and hold for larger · Drag to try
<StickerPeel imageSrc="/bolt.png" width={150} rotate={20} draggable={false} />When to Use
Use StickerPeel for logos, badges, or campaign artwork that should feel like a physical sticker users can lift and reposition. It is image-specific and intentionally playful. Choose GlareHover or ShineBorder to animate an arbitrary container, or Lens to magnify part of an image.
Import
import { StickerPeel } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| imageSrc * | string | — | Image URL used for both the sticker face and its vertically flipped peel-back layer |
| alt | string | "" | Native image alternative text; leave empty only when the sticker is decorative |
| width | number | 200 | Sticker width in pixels; the image preserves its intrinsic aspect ratio |
| rotate | number | 30 | Rotation applied to the printed image, in degrees |
| peelBackHoverPct | number | 30 | Percentage of the sticker height revealed from the top while hovered |
| peelBackActivePct | number | 40 | Percentage revealed while pressed; normally larger than the hover value |
| peelDirection | number | 0 | Rotation of the complete sticker and peel direction, in degrees |
| shadowIntensity | number | 0.6 | Drop-shadow opacity from 0 to 1 |
| lightingIntensity | number | 0.4 | Pointer-following highlight opacity from 0 to 1; 0 removes the highlight layer |
| initialPosition | "center" | { x: number; y: number } | "center" | Initial position preset or pixel translation from the parent's top-left origin |
| draggable | boolean | true | Enable Pointer Events dragging; coordinates are clamped to the parent's measured bounds during drag and after resize or orientation changes |
Also inheritsHTMLAttributes<HTMLDivElement>exceptchildren, forwardingclassName,style, and native event handlers to the draggable root.
Usage Guidelines
- The root is absolutely positioned. Give its parent
position: relative, explicit dimensions, andoverflow: hidden; drag coordinates are clamped against that parent's current content box. - With
draggable=true, the root captures pointer input and usestouch-none. Disable dragging when the sticker overlaps scrolling or clickable controls that must receive those gestures. - Reduced motion removes peel transitions and drag-induced tilt. Hover/press peel states and the pointer highlight still render, but update without motion; the sticker image always remains visible.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
hover Lift · Press and hold for larger · Drag to try
<div className="relative grid h-64 place-items-center overflow-hidden rounded-xl"
style={{ background: "oklch(0.16 0.02 255)" }}>
<StickerPeel
imageSrc="/sticker.png"
width={160}
rotate={16}
peelBackHoverPct={30}
peelBackActivePct={42}
lightingIntensity={0.4}
draggable={true}
/>
</div>