Browser Frame
Desktop browser chrome that wraps whatever you put inside it — a screenshot, a video, or the live component itself. Three variants, no image asset, and the window controls are grey rather than a copy of one vendor’s.
Browser chrome, phone frames, terminals and screenshot surrounds.
A screenshot in a frame reads as a product; the same screenshot bare reads as a diagram. These are the frames — browser chrome with a URL bar, phone and tablet bodies, a terminal window — as CSS rather than as PNGs, so they recolour with your theme and stay sharp at any resolution.
Desktop browser chrome that wraps whatever you put inside it — a screenshot, a video, or the live component itself. Three variants, no image asset, and the window controls are grey rather than a copy of one vendor’s.
One handset bezel with the cut-out as a prop, so iPhone, Android and tablet are three settings rather than three assets. Status bar and home indicator included, and the clock is a prop so it can never be a hydration mismatch.
A lid, a hinge and a tapered base, with the taper done by clip-path rather than the border trick that cannot round or carry a background. Degrades to a boxier laptop where clip-path is missing.
The product-hero arrangement: a handset overlapping a laptop, overlapped with a negative inline-start margin so both stay in flow and the group keeps an honest height. Stacks below sm instead of shrinking to nothing.
Plans and shipping methods as cards, built on real radio inputs so the arrow keys, "2 of 3" and form submission are the browser's — with selection drawn as a tick, not only a colour.
An ordered list in a nav, not a row of divs — so the count and the position come free, and aria-current names the step you are on. Horizontal and vertical, because four labels do not fit on a phone.
Outer border with an inset rule that pulls further in on hover, so the frame breathes without the box itself resizing.
A dashed box over a solid one offset behind it; on hover the two close the gap, so the whole thing reads as pressing down.
Four repeating gradients as edges rather than a dashed border, which is the only way to animate the dashes travelling around the box.
Instant-photo mount tilted off-axis that straightens and develops on hover, the caption in monospace on the wide bottom margin.
Superellipse approximated with a 28-point clip-path, which holds its continuous curvature under scale in a way a border-radius corner visibly does not.
Five circles sharing a centre at even yaw offsets, which reads as a meridian cage once the whole group rotates — no sphere primitive required.
Centred, split, screenshot-led and waitlist variants.
Whole marketing pages, assembled and ready to clone.
Gradient outlines, running lights, dashes and glow rings.
Blobs, polygons, arrows and reveal masks, all in one property.
Perspective, tilt and depth from transforms alone.
Rings, stacks, statuses, frames and hover reveals.