---
id: "2115662979601666380"
source: https://x.com/60fpsdesign/status/2115662979601666380
author: "60fps (@60fpsdesign)"
media: "video, 1794x618, 5.4s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Staggered Product Category Nav Strip

## Summary
A white product-family sub navigation: a large bold heading above a horizontal strip of eight small product renders, each with a short label and some with a small orange "New" tag, fading in one after another from left to right. A tidy reference for an e-commerce category ribbon where tiny staggered entrances make a plain list feel crafted.

## Style
- Theme: light (pure white)
- Mood: clean, premium, orderly, understated
- Tags: sub-navigation, product-strip, staggered-entrance, e-commerce, thumbnails, new-badge, minimal
- Category: Navigation, Components

## Palette
| Role | Hex |
|---|---|
| Background | #FFFFFF |
| Heading and labels | #22282C |
| Screen blue | #829FBF |
| Warm thumbnail tone | #806857 |
| Silver device | #CBD1D1 |
| Light grey | #ECECEE |
| New tag orange | #B64400 |

## Typography
- Heading: a short placeholder family name in a bold neo-grotesque (semibold to bold), tight tracking (-0.02em), about 14% of the frame height (around 80px). Closest free: Inter 600 or Inter Tight 600.
- Item labels: 12px regular, near-black, centred under each thumbnail.
- New tag: 9px regular in orange, centred under the label.

## Layout
- Wide strip, about 2.9:1 (1794x618).
- Heading top-left at about 2% x and 6% y.
- The product row starts at the left margin and runs edge to edge: 8 items with equal spacing of about 112px centre to centre (at 1794 wide), thumbnails about 72x48px, labels 8px below, tags 4px below.
- No borders, cards, shadows or radii: just floating product renders on white.

## Elements
- Heading text block.
- Eight items: a green-screen laptop, a blue-screen laptop, a dark laptop, a blue all-in-one desktop, a tiny silver box, a larger silver box, a dark grey device used for the compare link, and a colourful display.
- Placeholder labels under each; orange "New" tags under four of them.
- A hand pointer cursor that hovers one item.

## Motion
- 0.2s: the heading appears in light grey (about 20% opacity) and the first item is barely visible.
- 1.2s: heading at full black; items 1 to 5 visible, 6 to 8 still fading in.
- 2.2s: every item is in place; the pointer arrives over the third item.
- 3.2s to 5.1s: static state while the pointer moves away.
- Heading: opacity 0 to 1 over about 600ms ease-out. Items: opacity 0 to 1 and x from 12px to 0 over about 400ms, stagger about 90ms left to right, ease-out. No loop; total settle under 2s.

## Rebuild it
1. Wrap in a `section` with `px-6 pt-6` and an `h2` set in Inter 600 at `text-7xl tracking-tight`.
2. Render the row as `ul` with `flex gap-10 overflow-x-auto` and hidden scrollbars; each `li` is a link with an image (`h-12 w-auto`), a `text-xs` label and an optional `text-[9px] text-[#B64400]` tag.
3. Use Motion variants on the `ul`: `visible: { transition: { staggerChildren: 0.09, delayChildren: 0.2 } }`.
4. Each child: `hidden: { opacity: 0, x: 12 }`, `visible: { opacity: 1, x: 0, transition: { duration: 0.4, ease: "easeOut" } }`.
5. Heading: `initial={{ opacity: 0.2 }}` to 1 over 0.6s.
6. Add `whileHover={{ y: -2 }}` on each item for a subtle lift, and run the entrance only once with `viewport={{ once: true }}`.

## Generation prompt
A clean white product category navigation strip: a large bold black heading top-left and below it a single row of eight small product renders (laptops in green, blue and dark finishes, a blue all-in-one desktop, small silver boxes, a dark device and a colourful monitor), each with a tiny caption and some with a small orange new tag; minimal, premium, lots of white space, no logos.