---
id: "2115438194091257965"
source: https://x.com/oguzyagizkara/status/2115438194091257965
author: "Oğuz Yağız Kara (@oguzyagizkara)"
media: "video, 3360x1600, 14.2s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Floating Customer Logo Bubble Field

## Summary
A wide white field where circular logo badges drift, fade and change depth: some float in sharp and close with a soft shadow, others hover small, faded and blurred in the background, and the composition keeps reshuffling. Worth studying as a light, airy alternative to a static logo strip for social proof, with depth faked through scale, opacity and blur.

## Style
- Theme: light (pure white with sparse colourful badges)
- Mood: airy, playful, calm, expansive
- Tags: logo-cloud, social-proof, floating-bubbles, depth-of-field, parallax, drift, white-space
- Category: Motion, Testimonials

## Palette
| Role | Hex |
|---|---|
| Background | #FFFFFF |
| Badge white | #FCFBFA |
| Badge shadow | #ECECF1 |
| Muted violet | #6462BB |
| Deep maroon | #4F2032 |
| Badge blue | #1D63F2 |
| Badge purple | #9B1EF0 |
| Badge ink | #1A1A1A |

## Typography
No designed typography. The only lettering is inside the placeholder logo marks on the badges (small wordmarks of different styles), which should be replaced with neutral icons or invented marks.

## Layout
- Ultra-wide frame (3360x1600, about 2.1:1), entirely white with no grid or container.
- 25 to 35 circular badges scattered across the whole frame with no alignment, sizes ranging from about 20px (far) to 110px (near) in a 1600px-tall frame; some near badges are cropped by the frame edges.
- Three apparent depth layers: near (large, sharp, full opacity, 0 8px 24px soft shadow), middle (medium, slightly faded), far (small, 10 to 30 percent opacity, 2 to 4px blur).
- Plenty of empty space between badges; density stays roughly even across the frame.

## Elements
- White badges: circles with a soft grey shadow containing a small coloured placeholder logo mark.
- Filled badges: circles in a solid brand-like colour (blue, purple, black, navy, red, grey) with a white glyph.
- Bare marks: some logos float with no circle at all, just a tiny mark at low opacity.
- Pointer: a small grab-hand cursor appears in the field, suggesting the cloud can be dragged or reacts to the mouse.

## Motion
- 0.6s: the field starts almost empty and badges fade in from 0 opacity with a slight scale up (about 600ms, ease-out, staggered over 2s).
- 3.1 to 13.4s: badges drift slowly in random directions at 10 to 30px per second, and periodically move between depth layers: growing, sharpening and gaining shadow as they come forward (about 1200ms, ease-in-out), or shrinking, fading and blurring as they recede.
- Large foreground badges sometimes slide in from the edges and exit again.
- No sudden moves; the field feels like objects floating in water and loops continuously.

## Rebuild it
1. Create a full-width section `relative h-[50vw] max-h-[720px] overflow-hidden bg-white`.
2. Keep an array of 30 items, each with a logo, position (x, y in percent) and a depth value z from 0 (far) to 1 (near).
3. Render each as a `motion.div` with `rounded-full grid place-items-center`, and derive style from z: `size = 20 + z * 90` px, `opacity = 0.15 + z * 0.85`, `filter: blur((1 - z) * 4px)`, and a shadow only when z is above 0.7.
4. Drive x and y with slow random drift: every 4 to 8 seconds pick a nearby target and animate with `transition: { duration: 6, ease: "easeInOut" }`.
5. Every 3 seconds pick one or two items and animate their z to a new random value over 1.2s so badges come forward and recede.
6. Add mouse parallax: offset each item by `pointer * z * 20px` using `useMotionValue` and `useSpring` for smoothing; respect `prefers-reduced-motion` by freezing the drift.

## Generation prompt
A wide minimal white canvas with dozens of circular logo badges floating at different depths, near ones large and crisp with soft drop shadows, distant ones tiny, faded and blurred, slowly drifting and swapping depth like bubbles in water; badges in white, blue, purple, black and red with simple invented icon marks, airy social-proof animation, smooth seamless loop, no real logos or brand names.