Gallery screenshot, saved 2026-10-24
How it’s built
- Layout
- A dark page sits within a subtle particle field. Small scroll cue and mark are at top; oversized pale sans headline fragments occupy upper-left and lower-right zones. A short centered uppercase description bridges the open middle, with tiny share/credit labels at the bottom. Outer particle field and monitor edge are framing.
- Type
- Very large thin geometric sans headline; compact tracked uppercase support and controls. Exact font and metrics unknown.
- Color and surface
- Near-black field with subdued green luminous particle texture and pale type; outer surround may be gallery styling.
- Components
- Two-zone oversized headline, centered explanatory line, corner utilities; monitor boundary is framing.
What makes it work
- Dark textured field
- Separated oversized headline fragments
- Centered support line
On a new subjectFor a pediatric reading program, place a short program title in two oversized fragments at opposing upper-left/lower-right positions over a restrained dark field, bridge them with one centered explanatory line, and keep practical links at the edges. Replace gallery language and particle imagery.
Live behavior
- Today
- The live-render captures show a viewport-filling near-black scene with a luminous green, particle-filled landscape occupying the middle and lower areas. A huge pale blue-gray title is split into “The state” at upper left and “of the gallery” near the lower right, with a compact explanatory sentence centered across the green transition. Small controls and attribution sit at the top and bottom edges. The full-screen visual scene is rendered through a canvas; the typography and controls are DOM text.
- Responsive
- At 1440px the title spans opposing corners around a centered paragraph. At 768px, “The state” wraps into two left-aligned lines and “of the gallery” wraps into two right-weighted lines; the paragraph remains between them. At 390px, the logo moves to the upper left, the audio control remains upper right, the first title phrase occupies the upper area, the paragraph crosses the bright particle field, and the second phrase sits below it. The 76px fixed header and edge-aligned share/creator labels are visible in desktop; the mobile capture omits the desktop “SCROLL TO DIVE IN” label. These are three sampled sizes, not a complete breakpoint map.
- Scroll
- The desktop-scroll-labeled capture reports scrollY 0 and a 1000px document height at a 1000px viewport height, so this attempt produced no recorded page scroll. It does not show what the “SCROLL TO DIVE IN” cue does or what follows below the hero.
