Iris Outro Footer
A closing-title iris scrubbed by scroll. Five concentric discs sit locked to the centre of a sticky, clipped stage, each starting part-grown at a staggered scale and reaching full size together, so the gap between neighbours widens as the footer arrives and the target blooms outward from the middle. Ring opacity rides the same progress, the stage fades up over the last 70 percent of the range, and the sign-off unblurs into the dark centre at the end. No animation library: progress is one scroll-derived custom property and the discs interpolate their own scale in CSS.
npx shadcn@latest add https://ui.aryank.space/r/iris-outro-footer.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| signOff | string | "“That’s all Folks!”" | The closing line revealed in the centre of the iris. |
| wordmark | string | "BLANK" | Small mark pinned to the top left. |
| social | IrisOutroLink[] | Instagram, X.com | Links pinned to the top right. |
| copyright | string | "© BLANK 2026" | Copyright line pinned to the bottom left. |
| links | IrisOutroLink[] | [email protected], LinkedIn, Are.na | Links pinned to the bottom right. |
| stops | readonly string[] | 5 reds, #8c0e0a to #1c0303 | Five colour stops for the discs, centre outward. Stop positions are fixed. |
| tilt | number | -5 | Baseline tilt of the sign-off, in degrees. |
| embedded | boolean | false | Run inside a bounded parent as the component's own scroller, with a one-screen lead-in, instead of scrubbing against the page. |
| className | string | — | Extra class on the root element. |
signOfftextThe closing line that resolves in the dark centre. Keep it short: it is set on one line and scales with the stage, so a long phrase shrinks the type instead of wrapping.
stopscolorFive colour stops, centre outward. Only the hue moves; the stop positions that give the iris its banding stay fixed.
tiltsliderBaseline tilt of the sign-off in degrees. A few degrees of lift reads as hand-lettered; past about 12 it starts to look like a mistake.
wordmarktextSmall mark pinned to the top left of the closing screen.
linkslinksContact links along the bottom right, with social links along the top right.