.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Curl Sticker

imagePro

A die-cut photo sticker that curls a corner on hover, peels further on press and pastes itself back down.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

curl-sticker.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type CurlStickerProps = {  src: string  alt: string  width?: number  height?: number  radius?: number  outline?: number  outlineColor?: string  backColor?: string  angle?: 'pointer' | number  hoverPeel?: number  pressPeel?: number  curl?: number  shadow?: number  stiffness?: number  bounce?: number  rotate?: number  style?: CSSProperties  className?: string}export function CurlSticker({  src,  alt,  width = 200,  height = 200,  radius = 22,  outline = 7,  outlineColor = '#ffffff',  backColor = '#ece6d9',  angle = 'pointer',  hoverPeel = 0.2,  pressPeel = 0.42,  curl = 18,  shadow = 0.7,  stiffness = 1,  bounce = 0.45,  rotate = 0,  style,  className,}: CurlStickerProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Curl Sticker is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/curl-sticker

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

CurlStickerProps

Prop	Type	Default	What it does
`src` required	`string`	–	The picture on the sticker, cropped to fill it like `object-fit: cover`.
`alt` required	`string`	–	What the picture shows, for screen readers.
`width`	`number`	`200`	Width in CSS pixels, die-cut edge included. A class that sets the size wins.
`height`	`number`	`200`	Height in CSS pixels, die-cut edge included.
`radius`	`number`	`22`	Corner radius in pixels. Half the shorter side gives a circle or a pill.
`outline`	`number`	`7`	Width of the die-cut edge round the picture in pixels; 0 removes it.
`outlineColor`	`string`	`'#ffffff'`	Colour of the die-cut edge. Any CSS colour.
`backColor`	`string`	`'#ece6d9'`	Colour of the sticker's back, seen where it curls over.
`angle`	`'pointer' \| number`	`'pointer'`	Where the peel starts: `'pointer'` lifts the corner nearest the pointer; a number in degrees lifts that edge (0 right, 90 bottom, 45 the bottom-right corner).
`hoverPeel`	`number`	`0.2`	0 to 1: how far the sticker peels while hovered or focused.
`pressPeel`	`number`	`0.42`	0 to 1: how far it peels while pressed (mouse, finger, Enter or Space).
`curl`	`number`	`18`	Radius of the paper's curl in pixels: small is a crisp fold, large a soft roll.
`shadow`	`number`	`0.7`	0 to 1: strength of the shadows cast by the lifted paper.
`stiffness`	`number`	`1`	Speed of the peel; 1 is the default, 2 twice as brisk.
`bounce`	`number`	`0.45`	0 to 1: how much the paper overshoots before it settles.
`rotate`	`number`	`0`	Resting rotation in degrees, for a hand-placed look.
`className`	`string`	–	–
`style`	`CSSProperties`	–	–

Preview

Code

The code is locked

Props

A11y