---
id: "2115930322630025545"
source: https://x.com/RaminNasibov/status/2115930322630025545
author: "Ramin Nasibov (@RaminNasibov)"
media: "video, 1440x1080, 12.2s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Manufacturing Site with Morphing Dot Process

## Summary
A clean industrial-manufacturing website in cool grey and electric blue: a bento grid of capability cards with 3D product renders, followed by a five-step process section where a cloud of blue dots reassembles into a new shape (scatter, tilted grid, dome, sphere) at each step. Worth studying for how one particle system carries a whole step-by-step story with almost no other decoration.

## Style
- Theme: light (cool grey page with navy and blue cards)
- Mood: precise, technical, calm, confident
- Tags: bento-grid, particles, dot-sphere, process-steps, scroll-storytelling, industrial, 3d-renders
- Category: Features, Motion

## Palette
| Role | Hex |
|---|---|
| Page background | #EBECF0 |
| Card and nav surface | #FFFFFF |
| Navy card | #0C1549 |
| Primary blue | #1A5CDA |
| Pale blue tint | #E0E8F8 |
| Divider grey | #BBC5DA |
| Secondary text | #848EA8 |
| Soft panel | #F6F8FB |

## Typography
- Step titles (for example "Anfrage", "Serienfreigabe"): sans, semibold, sentence case, about 3 percent of frame height, tight tracking. Inter (600).
- Card titles ("Technische Kunststoffe", "Projekt anfragen"): sans, semibold, two lines, small. Inter (600).
- Eyebrow labels ("PRINZIP", "WERKSTOFF", "ERGEBNIS"): tiny uppercase sans with wide tracking (about 0.15em), preceded by a blue dot or set in blue. Inter (500).
- Body, nav and timeline labels: small regular sans in #848EA8 or dark ink. Inter (400).

## Layout
- 4:3 frame (1440x1080). A floating white nav bar spans the top with 12px radius: placeholder logo left, three links and a DE / EN toggle centre right, a blue pill button far right.
- Bento section: three columns with about 16px gutters; a tall navy card spans two rows on the left, four square cards fill a 2 x 2 grid on the right. Card radius about 12px, no visible shadows.
- Process section: a two-column split, text block left (about 40 percent width) and the dot shape right; a five-node horizontal timeline runs across the bottom with labels under each node.
- Generous whitespace, 24 to 32px inner padding in cards.

## Elements
- Navy "principle" card: dark #0C1549 with a field of blue dots that gather into a sphere; title bottom-left in white.
- Product cards: white or navy, each with one render (blue plastic pellets, a machined steel block, a grey and blue gripper); on hover a card gains a thin blue border, corner crosshairs and a faint dot grid.
- Contact card: solid #1A5CDA with a white connector housing render, white title and an arrow icon top-right.
- Step text block: small "01 ---- 05" counter in blue, title, grey description, a hairline divider, a blue "ERGEBNIS" label and the result line.
- Timeline: hairline track with blue filled progress up to the active node, 6px dots, numbered labels "01" to "05" with step names.
- Dot shape: 300 to 600 blue dots of varied size (2 to 8px) and opacity giving depth.

## Motion
- 0 to 2.7s: hover moves across the bento; the hovered card gains its border and crosshairs (about 200ms ease-out), and the navy card's dots tighten into a sphere.
- About 4.9s: the page has scrolled to the process section; step 01 shows the dots as a loose cloud.
- 7.1s: step 02 text fades in from grey while the dots fly into a tilted square grid plane (about 800ms ease-in-out, per-dot stagger).
- 9.3s: step 04, the dots curve into a dome; 11.5s: step 05, a full shaded sphere.
- Timeline progress line extends to each new node in about 400ms as the step changes; the text crossfades with a short upward slide.

## Rebuild it
1. Build a React page with Tailwind: `bg-[#EBECF0]`, a sticky white nav (`rounded-xl px-6 h-14`), and a bento grid `grid grid-cols-3 gap-4` with the tall card `row-span-2`.
2. Give cards `rounded-xl p-6`, variants for white, navy #0C1549 and blue #1A5CDA; add a hover state that sets `ring-1 ring-[#1A5CDA]` and reveals corner marks and a dot-grid background.
3. For the process section, make a tall wrapper (for example 500vh) with a sticky inner panel; map `useScroll` progress to a step index 0 to 4.
4. Render the dots in a canvas or with Three.js points; precompute five target layouts (random cloud, plane grid, wave, dome, Fibonacci sphere) of the same point count.
5. On step change, tween each point to its new target with Motion's `animate` (800ms, `ease: [0.65, 0, 0.35, 1]`, delay by index x 1ms), and slowly rotate the shape around Y.
6. Animate the step text with `AnimatePresence` (opacity and y 8px, 300ms) and the timeline fill with a `scaleX` motion value.

## Generation prompt
A clean light-grey industrial manufacturing website in electric blue and navy, shown as a smooth screen recording: a bento grid of rounded cards with glossy 3D renders of plastic pellets, a machined steel block, a robotic gripper and a connector housing, then a scroll section where a cloud of blue dots morphs step by step into a tilted grid, a dome and a perfect sphere beside minimal step titles and a five-point progress timeline, crisp sans-serif type, no logos.