.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

Et udstanset fotomærkat, der krøller et hjørne ved hover, trækkes længere op ved tryk og klistrer sig selv ned igen.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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)} />}

Koden er låst

Curl Sticker er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · 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

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	Standard	Hvad den gør
`src` påkrævet	`string`	–	The picture on the sticker, cropped to fill it like `object-fit: cover`.
`alt` påkrævet	`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

Kode

Koden er låst

Props

A11y