Iris

Playground

Pick a shape, recipe, props and colour tokens, then copy the JSX and CSS that reproduce the specimen.On a phone the controls open in a sheet, itself an Iris.

/lab/orrery/playground · Basic recipeOpen full screenOpen playground

Installation

Install the package and its peer dependencies. Styles are bundled and imported for you.

npm install @orrery-ui/iris
npm install react react-dom motion@14

Usage

Paste this into app/page.tsx in a Next.js App Router app, or App.tsx in Vite. It renders a trigger at the bottom-center anchor: drag it anywhere, tap it to open the sheet.Paste into app/page.tsx (Next.js) or App.tsx (Vite).

"use client";

import { Iris } from "@orrery-ui/iris";

export default function ContactTrigger() {
  return (
    <Iris.Root>
      <Iris.Shadow />

      <Iris.Trigger aria-label="Open contact">
        <Iris.Shared>
          <div style={{ width: "100%", height: "100%", background: "#1d1d1f" }} />
        </Iris.Shared>
      </Iris.Trigger>

      <Iris.Sheet aria-labelledby="sheet-title">
        <Iris.Shared>
          <div style={{ width: "100%", height: "100%", background: "#1d1d1f" }} />
        </Iris.Shared>

        <Iris.Close aria-label="Close" />

        <Iris.Content>
          <Iris.Item>
            <h2 id="sheet-title">Sean Smith</h2>
          </Iris.Item>
          <Iris.Item>
            <p>Links, etc.</p>
          </Iris.Item>
        </Iris.Content>
      </Iris.Sheet>
    </Iris.Root>
  );
}

Examples

Live example pages built on Iris, each with its source.

• 

  Contact form

  A real form inside the sheet, focus kept in.

• 

  Media card

  The tapped icon grows into the card’s own icon.

• 

  Link preview

  A hover card on a text link; press and hold on touch.

• 

  List

  A menu: each row staggers in on its own.

• 

  Buttons

  Rectangle triggers in set sizes, like a search button.

• 

  Video

  A video that plays inside the morph.

• 

  Flagship

  A portrait that morphs into a contact card.

API reference

The Iris namespace holds nine components: Root, Trigger, Sheet, Shared, Media, Content, Item, Close and Shadow. The package also exports the useIris() hook and presets.The most used Iris.Root props:

Iris.Root

Also on Root: anchorAnnouncement, buttonWidth, id, zIndex, className.

Iris.Sheet

Iris.Media

Video or a still that scales through the morph without squashing. Use it in place of Iris.Shared, in both the Trigger and the Sheet, and give the Sheet the same aspectRatio. The trigger rests on the poster; the sheet’s video plays muted and looped.

const ratio = 9 / 16;

<Iris.Root>
  <Iris.Shadow />

  <Iris.Trigger aria-label="Play intro">
    <Iris.Media src="/intro.mp4" poster="/intro.jpg" aspectRatio={ratio} />
  </Iris.Trigger>

  <Iris.Sheet aria-label="Intro video" aspectRatio={ratio}>
    <Iris.Media src="/intro.mp4" poster="/intro.jpg" aspectRatio={ratio} />
    <Iris.Close aria-label="Close" />
  </Iris.Sheet>
</Iris.Root>

Link preview

<Iris.Root preview> turns a text link into a hover card holding a live iframe of the page it points at, for pages on sites you own. The card opens after the pointer rests on the link, or on a press and hold on touch; the link stays an ordinary link.

"use client";

import { Iris, useIris } from "@orrery-ui/iris";

export function LinkPreview({ href, children }: { href: string; children: string }) {
  return (
    <Iris.Root preview>
      <Iris.Shadow />
      <Iris.Trigger asChild>
        <a href={href}>{children}</a>
      </Iris.Trigger>
      <Iris.Sheet aria-label={`Preview of ${children}`} aspectRatio={360 / 520}>
        <Iris.Content>
          <PreviewFrame href={href} />
        </Iris.Content>
      </Iris.Sheet>
    </Iris.Root>
  );
}

function PreviewFrame({ href }: { href: string }) {
  const { open } = useIris();
  if (!open) return null;
  return <iframe src={href} title={`Preview of ${href}`} tabIndex={-1} />;
}

Theming

Every visual token is a --orrery-iris-* custom property with a fallback, so Iris renders correctly with no setup. Override any of them on the Root’s className.Every visual token is a --orrery-iris-* custom property with a fallback.

• --orrery-iris-surface#fafafaTrigger
• --orrery-iris-surface-elevated#ffffffSheet
• --orrery-iris-surface-borderrgba(229,229,229,.6)1px ring
• --orrery-iris-text#1d1d1fText
• --orrery-iris-accent#1d1d1fFocus ring only
• --orrery-iris-sheet-radius48pxSheet corners
• --orrery-iris-trigger-radius9999pxCaps every shape
• --orrery-iris-sheet-padding24pxSheet inset
• --orrery-iris-sheet-max-width480pxSheet width, set by sheetMaxWidth
• --orrery-iris-shadow0 2px 16px -4px …Trigger shadow
• --orrery-iris-sheet-shadow0 12px 16px -12px …Sheet shadow, same painter

shape="rectangle" is a pill button: buttonSize s, m or l sets height 36, 44 or 52px.shape="rectangle" is a pill button, buttonSize s/m/l at 36/44/52px. Dark is a README recipe; grey is a playground palette.

Palettes

• Neutral

  Package default
• Dark

  README recipe
• Grey

  Playground palette

Keyboard & accessibility

An open sheet is a real modal: role="dialog" with aria-modal, the page goes inert, and focus returns to the trigger on close.A real modal: the page goes inert and focus returns to the trigger on close.

• EnterEnterSpaceSpace

  Opens the sheet from the focused trigger.Opens the sheet.

• EscEscape

  Closes the top layer only: a preview card, then the sheet.Closes the top layer only.

• TabTab⇧ TabShift Tab

  Moves through the sheet and wraps at either edge.Wraps inside the sheet.

• Left arrowRight arrowUp arrowDown arrow

  Moves the closed trigger one anchor step. Announced politely.Moves the trigger one anchor.

• Reduced motion

  A 200ms opacity crossfade replaces the morph. Video stays on its poster.

• Dragging alone isn’t enough

  WCAG 2.5.7: render a control that calls setAnchor. A native select works.

• Browser floor

  Safari 16.2+, Chrome and Edge 111+, Firefox 113+.