Curl Sticker
imageProEin ausgestanzter Foto-Sticker, der beim Hover eine Ecke aufrollt, beim Drücken weiter abgezogen wird und sich selbst wieder festklebt.
Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.
Vorschau
Live-Demo. Das Theme schaltet die Demo selbst um.
Code
Der Code ist gesperrt
Curl Sticker gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.
Bald verfügbar49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.
- Einmalzahlung
- Ein Entwickler
- Der Schlüssel kommt sofort per E-Mail
- Keine Umsatzsteuer (§ 19 UStG)
Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.
Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein
npx shadcn@latest add @manniche-pro/curl-stickerclaude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
CurlStickerProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
src erforderlich | string | – | The picture on the sticker, cropped to fill it like object-fit: cover. |
alt erforderlich | 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 | – | – |
A11y
Tastatur
The sticker takes focus with Tab, which lifts a corner. Enter or Space presses it down while held. The focus ring is visible.
Screenreader
The sticker is a button with the role description sticker, named from alt. The image inside has an empty alt and the WebGL canvas is aria-hidden. Pressing it has no action beyond the visual effect.
Reduzierte Bewegung
Under reduced motion each state shows at once with no travel. Otherwise WebGL runs only while the sticker moves.