Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A blue storefront photograph with a warm orange window fills most of the frame; a black lower band contains small white navigation.
- Type
- Regular white sans labels spaced across the black band; white signage inside the image.
- Color and surface
- Saturated blue exterior, orange window and black band.
- Components
- Large photographic-looking image with a sparse black lower navigation band.
What makes it work
- Blue and orange full-width scene
- black lower band
- sparse white labels
On a new subjectFor a city garden directory, show a blue and orange greenhouse scene above a black lower band with sparse white navigation.
Measured
H1105px / 400 / -1px
Body text22px
Page backgroundtransparent
Text color#000000
Page height14,635px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- LiveSurface opens with full-bleed product and design imagery and the small sentence “All animation created in LiveSurface” overlaid at the upper-left. The desktop opening image is a tightly framed storefront with oversized lettering; the next timed capture shows a monochrome close-up of a printed page. In the desktop-scroll frame, a black section with a thin white navigation row, outlined announcement bar and very large white headline follows the image. Tablet and phone states show the media above a black navigation strip, then the same outlined announcement and headline in a narrow column.
- Responsive
- At 1440×1000 the hero media fills the viewport and little navigation is visible in the opening image. At 768×1024 the media is a dramatically cropped close-up of a large letter, with a black navigation strip near the lower edge and the announcement/headline continuing below. At 390×844 the image is a close crop of a product can, followed by the black navigation strip, a wrapped announcement capsule and a large multi-line heading. The fresh reduced-motion phone frame preserves the same general sequence with another image and sparse black section. These captures show sampled layouts, not exact breakpoints.
- Scroll
- The desktop-scroll measurement records scrollY=750 in a 1444×15090 document. Its screenshot shows the lower portion of a printed-page image above a black section containing the LiveSurface/Home/Account/Download navigation, an outlined announcement bar, and the large “The fastest way to find and create portfolio-ready mockups” headline. This single position does not establish sticky navigation or the sequence of all lower sections.
