---
id: "aw-el-61ea64a5-4c93-4483-bf6d-05e3d74ffaba"
source: https://www.awwwards.com/inspiration/homepage-header-floema
author: "Bürocratik (burocratik)"
media: "video, 1600x1200, 8.2s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Product Thumbnail Fly-Through Hero

## Summary
A homepage header for an outdoor furniture maker: a short centred sentence sits still while dozens of small product thumbnails (benches, bins, bike racks, bollards) stream outward from the centre toward the viewer, growing and sharpening as they pass. Some tiles sit on orange or sage squares. Worth studying as a light, infinite catalogue tunnel that shows the whole range without a single grid.

## Style
- Theme: light (warm off-white)
- Mood: airy, calm, curious, product-led
- Tags: hero-section, z-depth, infinite-loop, product-thumbnails, starfield, minimal-type, pill-nav
- Category: Hero, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #EEE8E2 |
| Faded tile | #D8D4CE |
| Headline ink | #302A28 |
| Clay | #BFAEA3 |
| Olive grey | #7B786F |
| Orange tile | #EE8A63 |
| Sage tile | #C8D6BC |

## Typography
- Headline ("Spaces for people, made for life."): neo-grotesk sans, regular, sentence case, slight negative tracking, about 4 percent of frame height, centred on two lines with a short second line. Inter (400).
- Nav: tiny uppercase sans with wide tracking inside white pills ("PRODUCTS", "ABOUT", "SUSTAINABILITY", "JOURNAL") plus a language switch. Inter (500).

## Layout
- 4:3 frame (1600x1200), flat warm off-white background, no visible grid.
- Headline centred both ways at about 45 percent height and stays fixed above the moving images.
- Nav: a row of small white pills (about 20px tall, full radius) at the top-right, 6px apart; a tiny placeholder logo top-left.
- Thumbnails: rectangular photos with square corners, sizes from about 10px (far, near the centre) to 90px (near, at the edges); distribution is radial around the centre.
- No shadows or borders; depth is shown by scale and opacity only.

## Elements
- Product thumbnails: cut-out product photos on light grey (bench with red frame, dark slatted bin, bike stands, bollards, planters, a green chair scene).
- Colour tiles: some products sit on solid orange or pale sage squares to add rhythm.
- Headline: two-line sentence in dark ink.
- Pill nav: white capsules with tiny dark uppercase labels.

## Motion
- 0.3s: thumbnails start tiny and very faint around the headline.
- 1.8 to 7.7s: each thumbnail moves along a straight line away from the centre while scaling up (from about 0.1 to 1.2) and fading in (opacity 0 to 1), as if flying toward the camera; a single tile's trip takes about 4 to 6 seconds with a gentle ease-in (accelerating as it nears).
- New thumbnails spawn continuously near the centre, so the field stays evenly populated and loops infinitely.
- Tiles crossing the headline pass behind it; the text never moves.
- Likely responds to cursor position with a slight steer of the vanishing point.

## Rebuild it
1. Hero: `relative h-dvh overflow-hidden bg-[#EEE8E2]`; headline `absolute inset-0 grid place-items-center z-10 text-[4vh] tracking-[-0.01em] text-[#302A28] text-center max-w-[22ch] mx-auto`.
2. Keep 40 particles, each with an angle, a starting z between 0 and 1, and an image; position with `left: 50% + cos(angle) * z * 60vw` and `top: 50% + sin(angle) * z * 50vh`.
3. Drive z with a `useAnimationFrame` loop (`z += dt * 0.0002`), set `scale = 0.1 + z * 1.1` and `opacity = Math.min(1, z * 2)`, and respawn at `z = 0` with a new angle when z passes 1.
4. Render each tile as a `motion.img` with `style={{ x, y, scale, opacity }}` motion values to avoid React re-renders.
5. Add `useMotionValue` pointer tracking that shifts the vanishing point by up to 40px with a spring.
6. Nav pills: `rounded-full bg-white px-3 h-5 text-[10px] uppercase tracking-[0.12em]`.

## Generation prompt
A minimal warm off-white website hero with a short centred dark sans-serif sentence, while dozens of small cut-out photos of outdoor street furniture (benches, slatted bins, bike racks, bollards, planters), some on orange or pale sage squares, stream outward from the centre toward the viewer like a calm starfield, growing and fading in, infinite loop, airy and product-focused, small white pill navigation at the top right, no logos.