Every product launch now arrives with the same beautiful artifact: the cinematic launch video. The app floats in a dark void, the camera drifts past the interface on a slow crane, depth of field pulls your eye to the one button that matters, and a staggered reveal animates the UI into place. It’s become a genre, and I love the genre. I wanted to make those videos for my own things.
The way these are usually made bothered me, though. You record your screen, then haul the footage into After Effects or Screen Studio and animate a flat rectangle of pixels. The interface — the living, running thing you spent months making — gets flattened into a video file before the camera ever sees it. The camera work happens in a different tool, on a dead copy.
But the app already lives in a 3D-capable renderer. The browser has perspective transforms, a compositor, WebGL. The camera can go inside, and film the real thing while it runs.
Iris
Iris is that camera. It’s a React library: wrap your app in <Iris> and a small pill appears in the corner — this one:
The animation side is a keyframe timeline along the bottom — scrubbing, per-segment easing, looping, a live playhead. You author the camera move the way you’d block a shot, then play it over your actual UI. Entrance reveals are automatic where they can be: iris detects component boundaries and staggers them in. Depth of field comes in two tiers — a pure-CSS engine that ships zero three.js, and an opt-in WebGL engine for true bokeh with focus falloff. There’s also a standalone studio where you can paste any URL or drop a video and stage that instead.
Rather than describe it further, here is the studio itself, staging the page you’re reading. Drag to pan, hold Alt and drag to orbit, scroll to zoom — or paste any URL to swap in something of your own.
The embedded studio needs a wider screen — on a phone, visit iris.alstroemeria.ca instead.
Tools for ourselves
The quiet lesson of this project is in why it exists at all. Doing this inside the browser necessitated new tools — nothing off the shelf films a live DOM. A few years ago that sentence would have ended the project; you don’t casually build a camera system, a timeline editor, and two rendering engines as a side quest to making a launch video.
That’s the part that has changed. The cost of building your own tools has collapsed, and with it the old boundary between people who use tools and people who make them. When the tool you want doesn’t exist, the correct move now is often to just build it — shaped exactly to your hand, no more and no less than what the work needs. Iris started as a means to a video. Somewhere along the way the tool became the project, which is how most of my favorite tools have ever come to exist.