Theme
Bezel frame
A product screenshot in a bezel: a layer-1 rim of 6px (3px on a phone) with a hairline, around the screen with its own. Below a hero it crops at the section's end and bottom, so the product reads as larger than the view. FloatingCard lays a small figure or fragment of UI over it for depth.
Examples
Overview
Concepts
Deadlines
Plan
Activity
Concepts
| Concept | Stage | Venue |
|---|---|---|
| Circuit lower bounds for chain-of-thought | Gauntlet | STOC |
| When checking is easier than solving | Committed | STOC |
| Benchmarks that isolate one bottleneck | Opening | STOC |
| Scale is not depth | Gauntlet | STOC |
| Verifier-guided search at small scale | Parked | STOC |
Overview
Concepts
Deadlines
Plan
Activity
Concepts
| Concept | Stage | Venue |
|---|---|---|
| Circuit lower bounds for chain-of-thought | Gauntlet | STOC |
| When checking is easier than solving | Committed | STOC |
| Benchmarks that isolate one bottleneck | Opening | STOC |
| Scale is not depth | Gauntlet | STOC |
| Verifier-guided search at small scale | Parked | STOC |
Gauntlet passed
Props
BezelFrame
A product screenshot in a bezel: a layer-1 rim with a hairline, around the screen with its own. Placed below a hero, it runs off the section's end and bottom.
| Prop | Type | Default | Description |
|---|---|---|---|
label? | string | — | What the screenshot shows, for screen readers. With it, the screen is one image and its drawn interface is inert and hidden; leave it out only for a live demo. |
crop? | "none" | "end" | "bottom" | "both" | "none" | Which edges the view crops: end runs it off the section's end edge, bottom leaves it open at the bottom as if it ran on under the section's rule. Both for a hero. |
floating? | ReactNode | — | FloatingCards over the frame, for depth: one or two at most. |
children | ReactNode | — | The product: drawn in HTML and CSS at scale where it can be, or an image. |
FloatingCard
A small overlay card floating over a BezelFrame, for depth. Hidden on phones.
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "top-start" | "top-end" | "bottom-start" | "bottom-end" | — | The corner of the frame it floats over. On a frame cropped at its end, use a start corner: the end ones are past the page's edge. |
children | ReactNode | — | A small figure or a fragment of UI: a sparkline of runs, a judgment. |
Accessibility
- With a label, the screen is one image named by it, and the interface drawn inside is inert: it never takes focus and is not read item by item.
- Leave the label out only for a live demo a reader is meant to use.
- Floating cards are hidden below 40rem, where they would cover the screenshot; they must not hold anything the page needs.