Section · Product storytelling

Agent builder walkthrough

Animated screenshot sequence demonstrating issue discovery and resolution.

Component gallery

The section at every supported size.

Shows the actual product before explaining the deeper architecture behind it.

Desktop1440 × 760
Live component specimen
Tablet900 × 680
Live component specimen
Mobile390 × 720
Live component specimen

Build recipe

Anatomy and content rules

Anatomy

  1. Section introduction
  2. Framed product viewport
  3. Cursor action
  4. Cross-faded screens
  5. Composer overlay

Content checklist

  • Use current product screenshots
  • Keep the cursor action legible
  • Do not place dots over the viewport
  • Fade the frame into its section

Composition guidance

Place it with compatible sections.

Works beside

Trust logo marqueeArchitecture layer stack

Live usage

/#product

Source reference

app/components/ProductPreview.tsx