Social Proof Stats Band
Full-width stats band with count-up metrics, divider hairlines, press logos and an optional live-pulse metric.
Prompt-nya
# 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.
Kamu mungkin juga suka
Heritage Grove Footer
Full-viewport footer laid straight onto a hand-drawn ink landscape loop — five columns on the paper sky, and below 1100px the clip leaves the background and becomes a flow item under the copy.
Figurine Carousel Hero
Full-viewport figurine carousel where background colour, scale, blur and position all crossfade together on one 650ms curve.
Asme
Dark cinematic hero over a looping film whose seam is hand-rolled with 500ms requestAnimationFrame fades: a liquid-glass nav and Login pill, an Instrument Serif headline, a glass email bar and three glass social buttons.
Augment Reveal Hero
Cyberpunk hero where a cursor spotlight reveals the augmented version of the portrait, with stats drawn on fading circular arcs.