• One self-contained hero in your words, colours and Google Fonts, with the bar, two buttons and a proof line
• Three realistic phones in five finishes, with three screens built from 14 block types or your own screenshots
• A choreographed entrance, pointer tilt and fan, a centre screen that scrolls under a sticky blurred header, and callouts whose lines land on the detail they describe
• Two signature moves to choose from: luggage-tag callouts on route lines, or a page-sized figure that carries the screen's number on behind the phones
• A phone layout with one swipeable phone, tabs and the callout for the screen showing, and a reduced-motion version that holds still
• Two layouts (centred or split) and three backdrops (map contours, graph grid, plain)
• Checks at 390, 768, 1024, 1280 and 1440 px for overflow, text size, contrast, overlaps, callouts over screens, phones below the fold and focus rings
• A 1080p video of the hero, rendered frame by frame
• Open-source licenses for every part it builds on

The top of a landing page for a mobile app, with three phones that show three different screens of it. The phones are drawn in HTML and CSS, with metal frames, an island, side keys and glass glare but no maker's marks, and the screens inside are real interface built from your app's words and numbers: headers, big figures that count up, area and bar charts that draw themselves, donut rings, goals, rows, photo cards and a small route map. Or drop in your own screenshots. The centre phone rises, the other two fan out from behind it, each screen lights up and fills, and each feature callout arrives in a lane beside the phones with a line that lands on one detail inside its screen: the route pin, the lit bar, the goal's bar. Pick a signature per page: callouts as paper luggage tags on dashed route lines, or the centre screen's balance carried on behind the phones as a page-sized figure on the same baseline. Move the pointer and the phones turn towards it and fan wider; the centre screen scrolls its own content under a blurred header that folds its large title into a small one, as iOS does. On a phone it becomes one phone you swipe between the three screens. Your agent writes one page.json; the build checks every length and writes one HTML file, and the check measures text, contrast and overlaps at five sizes, fails any callout that covers a screen, and fails a laptop view where the phones run off the first screen.

Example request

Make the hero for our app with Phone Trio Hero: our colours and fonts, the home screen with the balance chart in the middle, spending on the left, goals on the right, and a callout for each.