Analytics Blocks

A four-metric site tracker covering API uptime, SEO score, visitors and error budget. Each card pairs a count-up number and a trend chip with a bar of fine ticks that recolor left to right to show progress against target. A 24h / 7d / 30d switcher (sliding pill) swaps the readings: numbers roll from their previous value, ticks re-sweep, and chips pop in. Cards enter with a staggered blur-in and lift on hover.

Install

Props

Four headline numbers in a single row (two-by-two on medium widths, one column on phones). Each card pairs a large count-up figure with a trend arrow and a sparkline that draws itself in, then fills with a soft tint. Cards enter with a staggered spring, lift on hover, and the trend arrow nudges forward.

Install

Props

A complete monitoring screen for one story: is the API up, where is the traffic, and which endpoints are hurting. A breadcrumb with a pulsing Production dot, a 1h / 24h / 7d range switcher (morph tabs) and a Live toggle sit above three cards. Uptime shows a count-up percentage over a 60-day status strip whose bars grow in sequence and dim around the hovered day. Traffic by region is a donut that draws itself, with a legend that spotlights a segment and swaps the centre readout. Latency tracks p95 against Fast / Slow / Critical zones with a spring-driven marker that moves on every live tick. The Endpoint Explorer below filters with morph tabs, slides rows in and out, and exports through a confirm-swap button.

Props

A five-stage signup funnel (Visited to Retained) drawn as columns joined by translucent ribbons, so drop-off reads as a shape, not just a number. Bars grow from the baseline in sequence, counts roll up, and a drop-off chip sits on each ribbon. Hovering a stage spotlights it and its neighbouring ribbons while dimming the rest. The morph tabs switch the traffic source (All, Organic, Paid, Referral): bars and ribbons spring to their new heights, and the summary tiles below recompute overall conversion, the biggest drop-off and the best-retaining stage.

Props