Vibeshots
← Sites

21 HRS ON THE Moon

21hrs.space
21 HRS ON THE Moon website, gallery screenshot

Gallery screenshot, saved 2026-10-24

How it’s built

Layout
A dark starfield page layers enormous MOON lettering behind a cratered lunar horizon; the landscape masks the lower part of the letters. A short centered introduction sits over the image, with Apollo references and year labels flanking compact copy. A thin rule and lower scroll cue complete the composition.
Type
Huge thin uppercase display letters contrast with centered small body copy and tiny tracked labels. Exact font and metrics unknown.
Color and surface
Near-black star field, pale gray lunar surface and white-gray type; low-contrast celestial imagery.
Components
Oversized background word, horizon image crossing its lower area, centered introduction, paired side facts, and lower scroll cue.

What makes it work

  • Oversized background word
  • Image horizon crossing and masking the word
  • Compact centered intro and peripheral facts
On a new subjectFor a city heat-safety campaign, place a large word such as COOLING behind an illustrated city skyline or horizon that interrupts its lower letters; add a concise public-safety premise and small dates or locations at the sides. Replace Apollo, lunar imagery and mission language.

Live behavior

Today
The 21hrs landing view frames a grayscale lunar horizon against a black star field. Huge gradient-white “MOON” letters sit behind the curved horizon, with “21HRS ON THE” above, the sentence about navigating the 21 hours of the first Moon landing across the lunar surface, and small Apollo 11 / 1969 labels below. A fine warm-gray corner frame, three small circular controls at upper left, an outlined “SCROLL TO LAND” control near the lower center and a faint “BEST EXPERIENCED WITH SOUND” note complete the composition. The selected gallery reference shows this same lunar title screen in a tighter crop.
Responsive
Desktop is 1440×1000 with a 1440×1004 document; tablet is 768×1024 with a 768×1028 document; phone is 390×844 with a 390×848 document. The desktop-scroll-labeled state records y=4, so it remains near the opening position. At tablet and phone widths, the stacked title, lunar horizon, mission/year labels and central outlined control are compressed vertically; the horizon masks more of “MOON” and the description wraps into additional lines. Body CSS reports rgb(0,0,0) background and rgb(255,243,234) text. Captures establish these widths only.
Scroll
The desktop-scroll state records actual scrollY=4 in a 1440×1004 document. It remains an opening composition with the lunar horizon and title, not a meaningful lower-page observation.

More like this