---
id: "2115956849954419040"
source: https://x.com/bestdesignsonx/status/2115956849954419040
author: "Best Designs On X (@bestdesignsonx)"
media: "video, 3332x1902, 67.4s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Near-Black Product Site Scroll Tour

## Summary
A long screen recording of a near-black software product website, moving through a glass card with an overlapping-circle mark, a video interview player with an episode filmstrip, an animated comparison line chart, a field of vertical hairlines, a stippled app icon on white and a dashboard section with scatter columns. It is a masterclass in restraint: almost no colour, tiny type, and every section carried by one crisp motion idea.

## Style
- Theme: dark (one white interlude for the app icon)
- Mood: restrained, precise, cinematic, technical, calm
- Tags: dark-ui, saas-landing, line-chart, stipple-icon, hairlines, video-player, scroll-sections
- Category: Landing page, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #060708 |
| Surface | #0F1011 |
| Card | #1F1F1E |
| Panel | #151817 |
| Border grey | #45423F |
| Interlude white | #FEFEFD |
| Chart yellow | #E8C23A |
| Indigo accent | #5E5CE6 |

## Typography
- Section headings ("Start of week ..." cropped at the top, "progress at scale"): sans, medium 500, sentence case, tight tracking (-0.02em), about 6% of frame height, mid grey on black. Inter Tight (500).
- Player title ("Episode 02"): sans regular, about 3% of frame height, white. Inter (400).
- Body, nav and card text: sans 12 to 13px equivalent, grey #8A8F98, generous line height. Inter (400).
- Tiny meta labels and chart axes: 10px sans, low-contrast grey. Inter (400).

## Layout
- 16:9 canvas (3332x1902) with a max-width content column of about 1200px centred on near-black.
- Sections are full-height and separated by black space rather than rules; content sits in the left 60% with a right column for visuals.
- Cards use 16px radii, a 1px border in #2A2A2A to #45423F and a soft inner top highlight, no heavy shadows.
- Player section: blurred full-bleed video behind a left text block and a bottom filmstrip of 10 thumbnails about 120x70px each with 8px gaps.
- Dashboard section: a 360px wide card at left and a 3-column scatter chart at right with dashed guide lines.

## Elements
- Mark card: a dark glass panel with 24px radius holding an orange-red disc (#F2553A) inside a thin dark ring, overlapped by an indigo disc (#5E5CE6) up and to the right.
- Video player: blurred speaker footage, title, three-line grey description, white "Play conversation" pill with a play glyph, small meta row, and a thumbnail filmstrip.
- Line chart: two smooth curves, a grey reference line and a 2px yellow line with a yellow-to-transparent area fill, end dots 8px.
- Hairline field: about 16 vertical 1px grey lines with irregular spacing, reacting to the cursor.
- App icon interlude: a black squircle with a stippled sphere crossed by four diagonal stripes, on pure white.
- Dashboard card: "Weekly Pulse" header, project groups with coloured status dots and bullet notes; scatter columns in violet, orange and grey made of hundreds of 2px dots.

## Motion
- 0 to 10s: the mark card drifts up as the heading scrolls off; the discs settle with a 600ms ease-out.
- 10 to 22s: the player fades in over 800ms; the filmstrip slides horizontally with ease-in-out.
- 22 to 32s: the yellow curve draws from left to right over about 1200ms while the area fill rises with it; a cursor scrub moves the end dot.
- 35 to 45s: hairlines shift and bunch near the cursor with a damped spring (about 400ms settle).
- 48 to 55s: hard cut to white; the stipple dots fade in by noise in about 1000ms.
- 58 to 67s: dashboard card and scatter columns rise in, dots raining into columns with a 20ms stagger.

## Rebuild it
1. Build each section as a full-height `section` with `bg-[#060708]`, a `max-w-6xl mx-auto px-6` container and Inter Tight headings at `text-5xl tracking-tight text-neutral-400`.
2. Cards: `rounded-2xl border border-white/10 bg-[#0F1011]` with a `shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]`.
3. Line chart: an SVG path with `pathLength` animated from 0 to 1 using Motion `whileInView` (duration 1.2, ease [0.22,1,0.36,1]) and a linearGradient area clipped to the drawn width.
4. Hairlines: map 16 absolutely positioned 1px divs; on pointer move, set each `x` with `useSpring` based on distance to the cursor.
5. Stipple icon: render a canvas of random dots masked by a circle and stripe shapes; fade dots in with a per-dot random delay.
6. Scatter columns: generate dots with Gaussian y values and animate `y` from -40 to 0 with `staggerChildren: 0.02`.

## Generation prompt
A smooth scroll-through of a minimal near-black software website: a dark glass card with overlapping orange and indigo discs, a blurred interview video with a white play pill, a glowing yellow line chart drawing itself, thin vertical lines bending around a cursor, a stippled black app icon on white, and violet and orange dot scatter columns; tiny grey sans type, calm cinematic pacing, no logos.