The Tilted Browser Card

The portfolio section on the homepage shows two client sites. The obvious approach was a <Image> inside a colored container. That worked, but it felt flat. A screenshot without context is just a rectangle of pixels.

We built a browser chrome from scratch in CSS. No images, no SVG, no icon library. The markup is:

<div class="case-browser">
  <div class="browser-toolbar">
    <i /><i /><i />
    <span>freedomagsupply.com</span>
  </div>
  <Image … />
</div>

Three <i> elements become traffic light dots. display: block; width: 3px; height: 3px; border-radius: 50%; background: #b8c0c5. That is it. No color coding (red, yellow, green) because the colors would compete with the card's tinted background, and the dot shape is enough to signal "browser window" to anyone who has used one.

The URL bar is a single <span> at 5px font-size with the real domain in it. Nobody squints to read 5px text, but everyone recognizes the shape. It reads as a URL bar first and a piece of copy second. We put the actual domain there rather than a placeholder because it is accurate, and accurate details read as deliberate.

The whole card tilts. The first card is transform: rotate(-3deg). The second card gets the opposite tilt via .case-homefront .case-browser { transform: rotate(3deg); }, so it leans the other direction. Two cards leaning toward each other create a slight tension that a flat grid doesn't have.

On hover, both cards straighten:

.studio-case-image:hover .case-browser {
  transform: rotate(0deg) translateY(-3px);
}

rotate(0deg) is technically redundant since that's the default, but it makes the transition explicit. The transition lists all three values: rotate(0deg) translateY(-3px). The -3px Y lift adds a physical quality as the card straightens, like picking something up off a desk.

The transition is .6s var(--studio-spring). That is longer than most interactions on the site: buttons use .35s, the nav underline uses .35s. We wanted the rotation to feel like weight settling, not a flicker. The spring curve (linear() approximation stored as a CSS custom property) overshoots slightly before landing at straight, which reads as the card coming to rest.

Every hover rule on the page lives inside @media (hover:hover) and (pointer:fine). This one is no different. That guard prevents the straighten animation from firing on touch devices, where a tap produces a simulated hover that sticks until the user taps elsewhere. A card that tilts on tap and stays straight looks broken. The guard costs one line and eliminates the entire problem.

One decision worth noting: we left the traffic light dots gray. The conventional colors (green, yellow, red) would look accurate in isolation. Inside a dark-blue card on an off-white page, they would fight for attention. The dot shape communicates browser. The neutral color stays out of the way.

The whole chrome is around 40 lines of CSS. No dependencies, no canvas, no JavaScript. It degrades cleanly: without transform support, you get a straight card with a toolbar. The screenshot is always visible.