---
id: "2115440653177884681"
source: https://x.com/oguzyagizkara/status/2115440653177884681
author: "Oğuz Yağız Kara (@oguzyagizkara)"
media: "video, 2640x1870, 13.8s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Drifting Partner Logo Bento Grid

## Summary
A logo cloud rebuilt as a 2x2 bento of near-white tiles, where partner logos sit in soft white pills and circles and drift slowly in a different direction in each tile: upward in one, sideways in two, orbiting in another. Because nothing lines up in a marquee, the section feels alive and airy instead of like a strip of badges. A neat upgrade to the usual "trusted by" row.

## Style
- Theme: light (white tiles on white)
- Mood: airy, calm, trustworthy, clean, lively
- Tags: logo-cloud, bento-grid, partners, integrations, floating-badges, social-proof, drift-animation
- Category: Features, Motion

## Palette
| Role | Hex |
|---|---|
| Page white | #FFFFFF |
| Tile white | #F9F9FA |
| Badge white | #FDFDFD |
| Grid line | #EEEEF2 |
| Navy logo | #213A9D |
| Lavender shadow | #B3AEC5 |
| Brick logo | #A96050 |
| Violet logo | #7B2FF7 |
| Red logo | #D0102E |

## Typography
- No typography of its own; the only text is inside the partner logos, which are replaced by placeholder wordmarks and symbols in a rebuild.
- If you add a heading above the grid, a medium grotesk at 32px (Inter Medium) would match the clean tone.

## Layout
- Roughly 7:5 frame (2640x1870) showing a 2x2 grid of equal tiles, about 16px gaps, each tile about 1:0.68.
- Tiles: #F9F9FA fill, 16px radius, a very faint 1px border, and a barely visible square grid (24px cells) inside.
- Top-left tile: wordmark logos in horizontal pills (about 150x44px, 22px radius).
- Top-right and bottom-right tiles: symbol logos in 64px circles; some brands use a full-colour filled circle (blue, black).
- Bottom-left tile: three larger 72px circles placed in a loose triangle.
- Badges have a soft shadow (0 6px 16px rgba(80,70,120,0.08)) and white fill; tiles clip overflowing badges at their edges.

## Elements
- Pill badges: white capsule with a logo mark and a small wordmark, scattered at staggered x positions.
- Circle badges: white circles with centred symbol logos (placeholders), a few filled in brand colours.
- Background grid: faint 1px lines in #EEEEF2 every 24px, fading toward the tile edges.
- Tile frame: rounded rectangle with almost no contrast to the page, relying on the badge shadows for depth.
- A tiny grab cursor appears in one tile, hinting the logos can be dragged.

## Motion
- 0 to 13800ms: a continuous loop with no cuts.
- Top-left tile: pills drift upward about 25px per second and wrap from the bottom edge.
- Top-right tile: circles drift left about 30px per second with a slight vertical bob (6px, 2s sine).
- Bottom-left tile: three circles rotate around the tile centre very slowly, about 20 degrees per second.
- Bottom-right tile: circles drift left at a slightly different speed than the top-right tile, so rows never sync.
- All movement is linear with gentle sine wobble; badges enter and exit by being clipped at tile edges, no fades.

## Rebuild it
1. React `grid grid-cols-2 gap-4` of four tiles, each `relative overflow-hidden rounded-2xl bg-[#F9F9FA] aspect-[3/2]` with a background grid via `bg-[linear-gradient(#EEEEF2_1px,transparent_1px),linear-gradient(90deg,#EEEEF2_1px,transparent_1px)] bg-[size:24px_24px]`.
2. Badges: `absolute rounded-full bg-white shadow-[0_6px_16px_rgba(80,70,120,0.08)]`; pills `h-11 px-5`, circles `size-16 grid place-items-center`.
3. Drift: give each badge a Motion `animate={{ y: [0, -H] }}` or `x: [0, -W]` with `transition={{ duration: 20, ease: 'linear', repeat: Infinity }}` and duplicate the set so it wraps seamlessly.
4. Orbit tile: wrap badges in a `motion.div` with `animate={{ rotate: 360 }}` over 18s linear, and counter-rotate each badge so logos stay upright.
5. Add a sine bob with a second nested `motion.div` (`y: [0, 6, 0]`, 2s, `repeat: Infinity`).
6. Optional: `drag` with `dragSnapToOrigin` on badges for the playful grab.
7. Respect `prefers-reduced-motion` by pausing drift.

## Generation prompt
A clean white bento grid of four rounded tiles with faint square grid lines, each filled with floating white pill and circle badges holding generic colourful logo symbols, drifting slowly upward, sideways and in a gentle orbit, soft lavender-tinted shadows, airy and calm SaaS partner section, no real brand logos.