Hero library · product

Tilted app screenshot

hero.product-screenshot-tilt: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.

Rule

A two-zone intro (eyebrow + headline in 1–7, subhead + CTA in 9–12, bottom-aligned) over a large app screenshot in 3–12 that tilts back in perspective and bleeds past the right edge; a logo row closes the hero.

Slots

eyebrow, headline, subhead, cta, caption, meta, pages, stats[3..3], items[3..4], logos[4..6]

Grid

intro 1-7 · aside 9-12 · screenshot 3-12 · logos full

Notes

Tilt: transform: perspective(1600px) rotateX(10deg) rotateY(-8deg), translate the window ~6% past the right edge (overflow hidden on the section). Use a real UI screenshot when the product has one; otherwise build the window as laid out here (title bar with path, sidebar nav, KPI row, a ruled table). Under reduced motion it may still be tilted — the tilt is static.

Try this hero in the pickerllms.txt