Iris Dots
imageProA field of colour dots hiding a photo; near the pointer they open like an iris and merge into the picture.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
iris-dots.tsxPro
The code is locked
Iris Dots is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email straight away
- No VAT (§ 19 UStG)
Have a key? Get the code with the CLI or MCP.
The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up
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 | Type | Default | What it does |
|---|---|---|---|
src required | string | – | The hidden image. |
alt required | 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
No accessibility notes written yet.
The notes come with the source when Pro opens.