React component · Open source
A trigger that morphs into a sheet.
Iris is a draggable trigger that grows into a modal sheet on one spring, plus inline link previews. You supply the content; the package owns the morph.
Live demo
Tap it. Drag it.
Drag the trigger to any of seven anchors, or move it with the arrow keys. Tap it and it grows into the sheet.
- Shapes
- 5
- Anchors
- 7
- Exports
- 9 components · useIris · presets
- Peers
- react 19 · motion ≥12
What ships in Iris
Install from npm, or copy the source into your project with one command.
Modal sheet
The trigger grows into a modal sheet. Content, close and items stagger in after it settles.Trigger grows into a modal sheet.
Link preview
<Iris.Root preview> turns a text link into a hover card of the page.A text link opens a hover card.
Shapes & buttons
Circle, squircle, rounded square, square, or an S, M or L pill button.Five shapes, S/M/L pill buttons.
Media & video
Sheets contain-fit a ratio. Video plays inside the morph, never squashed.Video plays inside the morph.
Theming & motion
Every visual value is a --orrery-iris-* custom property. Motion is three spring props and three presets.
Color
Neutral by default. Dark is a README recipe; grey is a playground palette.Neutral, one accent.
--orrery-iris-sheet-shadowsheet-shadow
0 12px 16px -12px rgba(0,0,0,.12)
Shadow
One painter for trigger and sheet, crossfaded through the morph.One painter.
375 / 42.5 / 1.75
open · stiff / damp / mass
Motion
Open, close and shared springs, dialled by eye. Three presets.Springs + presets.
Radius & shape
Sheet 48px. Five trigger shapes, one ring width.Five shapes.
