Iris Dots
imageProEin Feld aus Farbpunkten, das ein Foto verbirgt. In der Nähe des Mauszeigers öffnen sie sich wie eine Iris und verschmelzen zum Bild.
Bald verfügbar
Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.
Vorschau
Die Vorschau konnte nicht geladen werden.
Live-Demo. Das Theme schaltet die Demo selbst um.
Code
iris-dots.tsxPro
Der Code ist gesperrt
Iris Dots 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
CLI
npx shadcn@latest add @manniche-pro/iris-dotsMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
IrisDotsProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
src erforderlich | string | – | The hidden image. |
alt erforderlich | string | – | What the image shows, for screen readers. |
columns | number | 30 | Dots across the width. Rows follow from the height, so the dots stay round at any size. |
radius | number | 170 | How far from the pointer dots start to open, in CSS pixels. |
intensity | number | 1 | 0 to 1: how fully the dots under the pointer open. At 1 they merge into one unbroken picture. |
dotSize | number | 0.34 | 0 to 1: the size of a resting dot, as a share of its cell. |
focus | { x: number; y: number } | { x: 0.5, y: 0.5 } | Where the image is anchored when it is cropped to fit, from 0 to 1 on each axis. |
idle | boolean | false | A slow wandering reveal while nobody is pointing, e.g. for a hero. |
className | string | – | – |
A11y
Noch keine Hinweise zur Barrierefreiheit.
Die Hinweise kommen mit dem Quellcode, wenn Pro öffnet.