Vinyl Sticker
imageProEin ziehbarer Sticker, der sich mit einer WebGL-Papierkrümmung abschält, sich mit der Ziehgeschwindigkeit neigt, einen sich hebenden Schatten wirft und sich mit einem Glanzpunkt wieder andrückt.
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
Vinyl 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/vinyl-stickerclaude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
VinylStickerProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
src erforderlich | string | – | The picture on the sticker. Photos are cropped to fill it, like object-fit: cover. |
alt erforderlich | string | – | What the picture shows; also the sticker's accessible name unless label is set. |
width | number | 200 | Sticker width in pixels, die-cut edge included. |
height | number | 200 | Sticker height in pixels, die-cut edge included. |
defaultPosition | { x: StickerCoord; y: StickerCoord } | { x: '50%', y: '50%' } | Where the sticker starts inside its positioned parent. |
rotate | number | 0 | Resting rotation in degrees, for a hand-placed look. |
maxTilt | number | 24 | The largest tilt while dragging, in degrees (0 to 45). |
elevation | number | 44 | How far the sticker lifts off the surface while held, in pixels. |
curl | number | 0.65 | How strongly the paper curls behind your finger (0 is stiff card, 1 is soft vinyl). |
sheen | boolean | true | A glossy highlight that moves over the sticker as it tilts. |
sheenColor | string | '#fffaf0' | Colour of the highlight. |
sheenStrength | number | 0.6 | Strength of the highlight (0 to 1). |
border | number | 7 | Width of the die-cut edge round the picture in pixels; 0 removes it. |
borderColor | string | '#ffffff' | Colour of the die-cut edge. |
radius | number | 20 | Corner radius in pixels; half the shorter side makes a circle or a pill. |
label | string | – | Accessible name; defaults to alt. |
keyboardStep | number | 10 | Pixels moved per arrow-key press (four times as far with Shift). |
crossOrigin | 'anonymous' | 'use-credentials' | undefined | 'anonymous' | Passed to the image. The curl needs to read the pixels, so images from another host must send CORS headers. Set it to undefined for hosts that do not; the sticker then tilts with plain CSS instead of curling. |
onMove | (position: { x: number; y: number }) => void | – | Called after the sticker has been dropped or nudged, with its position in pixels inside the parent. |
className | string | – | – |
A11y
Noch keine Hinweise zur Barrierefreiheit.
Die Hinweise kommen mit dem Quellcode, wenn Pro öffnet.