Morning Brief

The office

Seven files, then done

I went with a detective's case files because it felt comforting and fit a morning briefing. Other looks could have worked, but this one felt right.

The first version was bare bones on purpose, usable before it was pretty. It ran on a custom scroll-driven stack, where the first folder rises to fill the screen while the others line up as tabs, and most of the first week went into getting that motion right. Folders stopped half open, and on phones the browser's touch momentum flung the stack past where it should stop, so it got snap thresholds and a rubber band.

The summaries told me nothing at first, partly because of a hardcoded 45-word cap in the summarizer. Each story became a bold teaser followed by a fuller summary, with the article's images kept and a small ranking boost for stories that have one.

The screenshots on this page were retaken by running each old version with a made-up brief, so the headlines are jokes, not real articles.

One spring instead of a scroll track

Instead of tuning the scroll track again, I rebuilt the brief as a filing drawer that runs on one spring-animated value: folders lift out, the next one follows your finger, and read ones stay filed with their tabs showing. Reading inside a folder went back to native scrolling, so a fling keeps its momentum, and the bugs tied to the old track went with it.

The surfaces got materials: pressboard, typed paper, a paper-clipped photo, a red category stamp. Every texture is painted in code, which keeps the app small.

Other directions first

Before committing to the folders, I had nine other visual directions mocked up on the same made-up brief to see the app in different styles. Four of them are above: a morning paper, a magazine cover, a terminal and swipeable story cards. I kept the folders, because the case file still felt the most comforting, and made them physical instead.

Three tabs, three stations

So the three tabs became three stations in one WebGL room (three.js and React Three Fiber), and changing tabs walks the camera across it. Scroll and each book slides out and turns its cover to you. Tap it and it opens to a spread whose pages turn as you scroll. I kept the reading text typeset on the 3D pages instead of switching to an HTML overlay, which keeps the illusion and puts contrast on my list to check.

Saved, in the cabinet

Saved works like the shelf: the drawer rolls out as you scroll in and folders rise one at a time. Save a story from the last page of its book and it's filed here.

Built in code, not bought

On the Ingest desk, new stories are pinned to the corkboard as typed index cards, strung together by source with red thread. The typewriter is the ingest button: it clatters while the feeds are pulled, then rings its bell.

I had store-bought models of a bookcase, a cabinet and an investigation board, but had everything modelled in code instead so the room stays small and matches. Rain on the glass, a ticking clock, swaying bulbs and synthesized sound fill it out.

The cost of a room

A 3D room makes reading harder to guarantee, so it has a plain-text reading view, a list view, volume and brightness sliders, keyboard scrolling with a screen-reader version of each station, and reduced motion. Nothing flashes, a rule I set after one of my promo videos came out too close to a strobe. The screen-reader version hasn't had a proper VoiceOver pass yet.

What didn't survive

Gilt bands on the book spines hid the titles. A sloped key deck on the typewriter hid the keys. Lifting the focused corkboard card forward made the red thread clip through it, so cards stay pinned and glow faintly instead. An art deco nav with a sunburst was too much and got pared back to a walnut bar with a brass hairline.

What bugged me

The slow, cinematic camera made it hard to pick a book. It now follows the scroll about twice as fast, a flick always comes to rest on a book instead of between two, and tapping any visible spine brings that book out.

The typewriter sat at the end of the Ingest scroll, so after tapping it you scrolled the whole corkboard to read what it typed and couldn't tell which cards were new. Now it comes first, the camera moves close enough to read the page, and the newest cards are pinned first.

The page flip felt like a wooden plank flipping, because the pages were rigid planes on a hinge. The turning page is now a bendable sheet that curls as it goes over and bows back against the direction you're turning.

The "Aa · Read as text" button wrapped onto two lines and covered the page right above the nav. It's now a round Aa button next to close.

Rain at three depths

The window over the cabinet had a flat painted city and one layer of rain sliding down like wallpaper. It's a shader now: rain falls at three depths, beads on the glass dry slowly, and each drop shows the city upside down like a lens.

The city became three bands of buildings that slide past each other as the camera moves, with a neon HOTEL sign, searchlights, an airship and an elevated train every minute or so.

Looking out

Tap the window and you walk over. Move the pointer and you lean as if peeking out. The sky follows the real hour, and your breath mists the glass so you can draw in it.

I cut a lit apartment across the street, a Rear Window nod that came out far too big for its building, and left out lightning, the obvious noir touch, because even soft sheet lightning flashes the whole screen.