---
id: "2112524525917143529"
source: https://x.com/oguzyagizkara/status/2112524525917143529
author: "Oğuz Yağız Kara (@oguzyagizkara)"
media: "video, 2720x1800, 10.4s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Customer Story Cards with Barcode Visuals

## Summary
A horizontal row of tall customer-story cards, each with a brand mark, a large generative visual made of fine vertical lines forming an abstract shape, a two-line statement and a read-more link. Hovering a card reveals measurement callouts over the line art, a nice blend of editorial cards and data-viz texture.

## Style
- Theme: mixed (light page, dark and blue cards)
- Mood: confident, technical, editorial, polished
- Tags: case-study-cards, generative-lines, carousel, hover-reveal, enterprise, data-viz, editorial
- Category: Testimonials

## Palette
| Role | Hex |
|---|---|
| Page | #FEFDFE |
| Card dark | #1A171A |
| Card dark line art | #3B383C |
| Card blue top | #201A71 |
| Card blue mid | #3332AA |
| Card blue bottom | #4748E3 |
| Card text | #FFFFFF |
| Muted line | #A1A0B8 |

## Typography
- Statement: neo-grotesk, regular, about 4.5% of card width per line, two to three lines. Closest free font: Inter (400).
- Brand lockups: placeholder wordmarks at the top left.
- Link: Inter (500), small, with an arrow icon.
- Callout labels: tiny mono numerals in white boxes. JetBrains Mono (500).

## Layout
- 1.51:1 frame (2720x1800) showing a horizontal row of 3:4 cards (about 20% of frame width each) with 2% gaps, the third card cut off at the right edge to signal scrolling.
- Inside each card: 6% padding, logo at the top, line art filling the middle 55%, statement and link at the bottom.
- No borders; cards have square corners.

## Elements
- Blue card: vertical gradient from indigo to bright periwinkle, with line art forming a soft wave shape.
- Dark card: near-black, with line art forming a diagonal arrow-like shape.
- Line art: hundreds of 1 to 2px vertical lines whose length and brightness trace a hidden silhouette.
- Hover callouts: thin white rectangles joined by connector lines, with coordinate-style numeric labels; a magenta highlight tag appears on the blue card.
- Read-more link with an arrow icon.

## Motion
- Idle: line art shimmers subtly as individual lines brighten and dim (about 2s cycle, random offsets).
- On hover (around 6s): callout boxes draw in over 250ms with connector lines, labels fade in 100ms later; a magenta tag slides in on the blue card.
- On leave: callouts fade out over 200ms.
- The row can scroll horizontally with momentum.

## Rebuild it
1. Build a horizontal scroller: `flex gap-6 overflow-x-auto snap-x no-scrollbar`, each card `w-[320px] aspect-[3/4] snap-start p-6 flex flex-col`.
2. Render the line art on a `<canvas>`: sample a silhouette (from an SVG path or a grayscale image) column by column and draw a vertical line per column whose length and alpha follow the sampled value.
3. Give the blue card `bg-gradient-to-b from-[#201A71] via-[#3332AA] to-[#4748E3]` and the dark card `bg-[#1A171A]`.
4. Animate the shimmer by modulating line alpha with noise each frame (throttled to 30fps, paused offscreen).
5. Add hover callouts as absolutely positioned SVG overlays: rectangles and polylines animated with Motion `pathLength`, labels fading in afterwards.
6. Use placeholder logos and generic statements.

## Generation prompt
A clean website section with a horizontal row of tall rectangular customer-story cards on a white page, one with a deep indigo-to-periwinkle gradient and one near-black, each filled with an abstract generative image made of hundreds of thin vertical lines forming a soft shape, a placeholder logo at the top, a short white statement and a small read-more link at the bottom; on hover, thin white measurement callouts with tiny numeric labels appear over the line art; crisp editorial look, no real brand names.