Image gallery
Orbit
A deep-space image gallery with a twinkling star field, a giant shimmering title and cards that tilt toward the cursor.
Gallery Dark Masonry Live data MIT-0 code No API key
About this template
Orbit searches NASA's public Image and Video Library and lays the results out as a masonry wall. The hero is a full-height photo under a radial vignette, an oversized wide display title that catches one sweep of light on load, and a pill switcher for nebulae, galaxies, Jupiter and Earth.
Every card leans a few degrees toward the pointer and catches a soft highlight where the cursor is, then opens in a native dialog lightbox with NASA's caption. Items whose metadata mentions a third-party copyright are filtered out before they reach the page.
What is on the page
- Full-height hero with a source label, display title and subject switcher
- Masonry grid of NASA images with captions
- Lightbox dialog with the larger image and description
Motion and effects
- Canvas star field that twinkles and drifts with scroll
- One gradient sweep across the title on load, then still
- 3D tilt and cursor-following glare on cards
- Cards fade up into view on scroll
- Lightbox pops in with a short scale
DESIGN.md
The whole style in one file: colors with their roles, type scale, components, layout, depth, motion and the rules on what not to do. Give it to your coding agent together with the prompt below, or keep it at the root of your project.
Read it here
# Orbit — DESIGN.md A deep-space image gallery. Family: cinematic dark. ## 1. Visual theme and atmosphere A planetarium at night. Near-black space, a single violet light, and the images doing all the talking. The title is huge and wide like a film poster. Mood: wonder, depth, stillness. ## 2. Color palette and roles ``` --bg: #05060a /* space */ --card: #11121a --ink: #f4f1ea /* warm white, not pure white */ --mist: #c9c7d4 /* intro text */ --mute: #9a9aa8 --accent: #b388ff /* the only accent: source label, title light sweep, hover glow */ ``` Rule: one accent. No teal, no pink. Stars are white with a faint violet tint on the largest ones. ## 3. Typography - Display: **Syne** 800, `clamp(64px, 15vw, 190px)`, line-height 0.85, tracking −0.04em, uppercase single word. - Text and buttons: **Hanken Grotesk** 400–600, 15–17px. - Captions: Syne 700 15px over a Hanken 13px meta line. ## 4. Components - **Source label:** small uppercase line "NASA Image and Video Library" in violet with a thin violet border. Static text, no "live" badge. - **Subject switcher:** pill track on a glass strip; active pill is warm white on black with a soft violet glow. - **Image card:** radius 18px, caption on a bottom gradient, masonry columns (300px minimum). - **Lightbox:** native `<dialog>`, image up to 72vh, title and NASA description below, round close button. ## 5. Layout Hero fills 88vh and centers its content. Grid up to 1280px, 16px gaps, CSS columns for masonry. Phones: one column, title still fills the width. ## 6. Depth Darkness is the depth. Cards get a violet glow and a 1px violet ring only on hover. The hero photo sits under a radial vignette. ## 7. Motion - Star field twinkles slowly on a canvas: the one ambient motion, it sets the place. - The title takes one light sweep on load, then stays still. - Cards tilt up to 4° toward the pointer with a soft glare: feedback for the thing you are about to open. - Cards fade up once as they enter; the lightbox pops in with a short scale. - `prefers-reduced-motion`: stars drawn once, no tilt, no sweeps. ## 8. Do and don't Do: let the images be the color; keep chrome thin; caption every image with its NASA center and year. Don't: endless shimmer loops, drifting backgrounds, a second accent, "live" badges. ## 9. Agent prompt guide Bias: black stage, one violet light, poster-size wide display type, masonry of real images, lightbox. Reject: purple-to-pink gradients, neon teal, bobbing scroll hints, generative space art. ## Data and credits NASA Image and Video Library API. NASA material is generally not copyrighted in the US; credit NASA and imply no endorsement; items whose metadata mentions a third-party copyright are filtered out. Hero photo from Pixabay, file kept with the page, author credited. Code MIT-0.
Prompt to build your own
Build a single-file dark image gallery (HTML, CSS, vanilla JS) on the NASA Image and Video Library search API (media_type=image). Hero: full viewport height, background photo under a radial vignette, a small violet source label, a huge Syne 800 title that takes one white-to-violet light sweep on load, a short intro and a glass pill switcher for four subjects. Behind everything a fixed canvas star field that twinkles. Grid: CSS columns masonry, rounded cards with a caption gradient, cards tilt up to 4 degrees toward the pointer with a radial highlight following the cursor, and fade up on scroll. Clicking opens a native <dialog> lightbox with the larger image, title and description. Skip items whose metadata mentions copyright. Fonts: Syne and Hanken Grotesk. Credit NASA without implying endorsement.
Paste it into Claude Code, Cursor, Codex or any coding agent, then swap the data source and the words to make it yours.
Good reference for
- Portfolio and photography sites
- Space, science and museum pages
- Dark masonry galleries with a lightbox