Vinyl Sticker
imageProEt mærkat, der kan trækkes, og som løftes af med en WebGL-papirkrølle, hælder med trækkets fart, kaster en løftende skygge og presses ned igen med et glimt.
Åbner snart
Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.
Preview
Forhåndsvisningen kunne ikke hentes.
Live demo. Temaet skifter selve demoen.
Kode
vinyl-sticker.tsxPro
Koden er låst
Vinyl Sticker er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.
Åbner snart49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.
- Engangsbetaling
- Én udvikler
- Nøglen kommer på mail med det samme
- Ingen moms (§ 19 UStG)
Har du en nøgle? Hent koden med CLI eller MCP.
Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op
CLI
npx shadcn@latest add @manniche-pro/vinyl-stickerMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
VinylStickerProps
| Prop | Type | Standard | Hvad den gør |
|---|---|---|---|
src påkrævet | string | – | The picture on the sticker. Photos are cropped to fill it, like object-fit: cover. |
alt påkrævet | 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
Ingen a11y-noter skrevet endnu.
Noterne kommer sammen med kildekoden, når Pro åbner.