Making the Spandrel landing page show the product working

The Spandrel landing page used to show still pictures of the product. A bills list in the hero. Static cards for a held payment, a lien waiver, vendor compliance, a payment going out.

They looked fine. They did not explain anything.

Spandrel's whole pitch is a sequence. A bill comes in. Something blocks it. Someone fixes it. Money moves. A still picture can only show one moment of that. The visitor has to imagine the rest, and most will not bother.

So I rebuilt every one of those pictures as a small working demo. Everything below is the real code from the homepage, running live in this post. Not a video.

What changed on the landing page

The hero tells the story. It used to be a list of bills. Now a cursor opens a bill that is blocked on a lien waiver. The requirements resolve one by one, the bill gets approved, and the payment is confirmed and scheduled. Then the pager moves to the next bill and it starts again.

That one loop says more than the headline and the paragraph under it. You see what blocks a payment, who fixes it, and that nothing moves until it is right.

The workflow cards play their workflow. Each card was a still of one step. Now each one plays its whole flow, with the product's own screens and wording.

Held. A payment is blocked by a missing lien waiver or an expired insurance certificate. The request goes out, and the row turns green when it comes back.

Lien waiver. The waiver is sent for e-sign. The vendor signs it. The payment unlocks.

Compliance. A new vendor is not eligible to pay yet. W-9, then insurance, then bank account.

Paid. Every requirement is met and the payment goes out.

The smaller cards show the other side. A vendor finishing their setup checklist in the portal. A new bill checked against what is left on the commitment.

Some things stayed the same on purpose. Each demo rests on a frame that matches the still it replaced, so the page reads the same at a glance and in a screenshot. They are drawn in React and CSS, not recorded, so text stays sharp and they load with the page. Each one pauses when it scrolls out of view, and under reduced motion they settle at once.

How I built it with Stageshow

I did not hand-animate any of this. I built it in Claude Code with Stageshow, a skill and small React kit by Benji Taylor for faux product UI and cursor demos. He wrote up why he made it on his blog. Adding it to your agent is one line:

npx skills add benjitaylor/skills --skill stageshow

Models can already fake a UI. The result usually looks generated. Too much text, everything the same weight, a cursor wandering around for no reason. Stageshow writes down the small decisions a product designer makes by hand and has the agent follow them.

Here is how that played out.

Story before screen. The skill has the agent write a plan before any code: where the demo sits, what the eye lands on, the action, the payoff, and what to leave out. For the hero that was a handful of beats. Open the bill, resolve the requirements, approve, schedule the payment. Anything that did not serve those beats came out.

Start from a good example. Stageshow ships a set of gold examples, and the agent starts from the closest one instead of a blank file. Then the look and content get replaced with the product's own. Spandrel's type, colors, status marks and words, so it reads as Spandrel and not as a template.

Feed it the old stills. For the workflow cards I gave the agent screenshots of the static cards and asked it to do the same to these. Each card kept its layout and became the resting frame of its own loop.

Make it rehearse. This is the part I did not expect to matter so much. Stageshow comes with a film script. The agent records each demo, looks at it at desktop and phone width, steps through every press and the point where the loop restarts, and fixes the worst thing it sees. Then it does it again. Most of the polish came from those rounds, not the first draft.

Design phones separately. The skill asks for a separate compact layout for narrow screens, a redesign rather than a squeeze. On a phone the hero becomes the mobile bill screen and only approves. Narrow this page to see it.

Keep the kit small. The kit went into the Spandrel repo as a vendored folder under its MIT license. The demos use a handful of its pieces: the stage that scales to fit, the scripted cursor, and motion for crossfades, rolling numbers and rows that open and close.

It went back into the product

Once the demos were done, they looked cleaner than the dashboard they were copying. So the same status icons and the same quiet motion are going back into the real app. The landing page ended up setting the bar for the product.