Free
πŸš€ Startup

Social Proof Stats Band

Full-width stats band with count-up metrics, divider hairlines, press logos and an optional live-pulse metric.

599 views 150 copies 260 words

The Prompt

# Stats Band β€” Landing Page Section

## Goal
Build a full-width social-proof band: 4 headline metrics with count-up, hairline dividers, and a press-logo row beneath. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Band: subtle vertical gradient (transparent β†’ white/[0.02] β†’ transparent) with border-y hairlines β€” reads as a distinct 'plate' without being a box.
- Metrics row: 4 columns split by 1px dividers; each = big number (40-56px, tabular, semibold) + 13px muted label below ('developers onboard', 'requests/day', 'countries', 'uptime').
- Number formatting: 12.4k / 99.98% / 1.2B styles β€” write a tiny formatter, don't print raw values.
- One metric may be marked `live`: shows a pulsing dot and ticks up by small random increments every 3-5s after the initial count-up.
- Press row: 'As featured in' 11px caps + 4-5 grayscale wordmarks at 45% opacity, hover 80%.

## Motion Spec
- Count-up: 1.4s ease-out-expo, starts when band is 40% in view, runs once (store fired-flag).
- Live metric ticks with a quick 120ms scale pop on the whole number.
- Logos fade in after numbers finish β€” sequence, don't compete.
- Respect `prefers-reduced-motion` β€” provide a static fallback that still looks intentional.

## Component API
- `<StatsBand stats={{value:number,label:string,format?:'compact'|'percent'|'plain',live?:boolean}[]} logos?: {src,alt}[] />`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only β€” no external CSS files.
- Works on mobile: touch targets β‰₯ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.

You may also like