---
id: "2115987053381033995"
source: https://x.com/CollectUI/status/2115987053381033995
author: "Collect UI (@CollectUI)"
media: "video, 2972x1816, 10.3s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Cosmic Bust Behind Glass Slats

## Summary
A grey studio hero for a creative studio where a classical stone bust sits on the right, blindfolded by a band of nebula texture, while a panel of vertical glass slats in front of the face swaps strips of the sculpture between stone, cosmic and circuit-like skins. It is worth studying for how a single hero image becomes interactive through a simple slatted reveal mask instead of a full 3D scene.

## Style
- Theme: mixed (cool grey page with a dark cosmic subject)
- Mood: surreal, editorial, futuristic, moody, confident
- Tags: hero, glass-slats, reveal-mask, ai-art, condensed-type, studio-site, image-swap
- Category: Hero, Art

## Palette
| Role | Hex |
|---|---|
| Background grey | #9CA0A8 |
| Mid grey | #8F949C |
| Shadow grey | #7D828C |
| Highlight grey | #A8ACB3 |
| Plum shadow and button | #30232A |
| Dusky mauve | #4F474E |
| Slate | #6A6A71 |
| Ember red (planet, neck cracks) | #D2452A |

## Typography
- Headline: condensed sans, light to regular weight (300 to 400), all caps, tight tracking, two lines with the second line led by a short horizontal rule; cap height about 5% of the frame. Closest free font: Antonio 300 or Oswald 300.
- Body line under the headline: small regular sans, two lines, dark grey, about 1.6% of frame height. Inter 400.
- Buttons and nav: tiny sans (about 10px at 1440 wide), sentence case. Inter 500.
- Thumbnail captions: condensed uppercase white text stacked in two lines at the bottom of each card. Antonio 500.

## Layout
- 1.64:1 frame (2972x1816). Flat grey studio backdrop with a faint vignette toward the bottom.
- Left column at about 2% from the left: tiny nav row at the top, headline at 20% to 33% height, body copy, then a dark button and a text link on one row.
- Right half: the bust centred at about 75% x, cropped top and bottom. A slat panel (25% of the width, 55% of the height) overlaps the face, split into 5 vertical slats with 1px light borders and no radius.
- Bottom-left: three square thumbnails about 13% of the width, 8px gaps, 4px radius, no shadows. UI is flat; depth comes from the photo.

## Elements
- Bust: curly-haired stone sculpture, eyes covered by a nebula band with a small red planet; glowing red cracks on the dark blue neck.
- Glass slats: tall rectangles with a white border at 35% alpha, slight blur and lift, each able to show a different skin.
- Alternate skins: polished silver stone, cosmic texture, and dark panels with thin green and gold circuit-like stripes.
- Primary button: plum fill, white label, 2px radius, about 90x22px; secondary link is text plus a small arrow icon.
- Thumbnail cards: three dark sculpture renders with condensed captions overlaid.

## Motion
- 0.4s: resting state, cosmic band visible through the slats.
- 2.3s and 4.1s: a cheek slat swaps to the circuit skin, first left, then right.
- 6.0s: a golden ringed planet replaces the red one near the eye.
- 7.8s: a small circular cursor sits at the panel's left edge; 9.7s the hair slats turn bright white stone.
- Each swap is a crossfade of about 400ms ease-out as the pointer sweeps sideways, with a 60ms stagger between neighbouring slats.

## Rebuild it
1. Full-height section, two-column grid: copy left (max-width 520px), relative media container right.
2. Stack three aligned images of the same bust (stone, cosmic, circuit) absolutely in the container.
3. Overlay 5 slat divs; each shows an alternate layer clipped with `clip-path: inset(0 X% 0 Y%)` to line up with the base, plus `backdrop-filter: blur(2px) brightness(1.08)` and a white 1px border at 35% alpha.
4. On pointermove, find the slat under the cursor and set its layer; crossfade with Motion `AnimatePresence` (opacity, 0.4s, ease-out, delay index x 0.06s).
5. Headline in Antonio 300 uppercase; draw the leading rule as a 40px x 1px pseudo-element.

## Generation prompt
A minimalist grey studio website hero: on the right a classical marble bust with curly hair, eyes covered by a glowing band of blue and violet nebula with a small red planet, red glowing cracks on the dark blue neck, seen through five vertical frosted glass slats that each show a different texture; on the left a condensed uppercase headline, one line of body copy and a small dark button; three square sculpture thumbnails bottom-left; soft diffuse light, cinematic.