Pretty Metrics

The problem

Why Pretty Metrics exists

Founders love to share milestones like MRR, new customers and churn, but the usual options are a cropped dashboard screenshot or an evening spent designing a chart by hand.

The numbers already live in the payment provider. What was missing was a way to pull them out safely, chart them well and export something that looks good in a social feed, without spreadsheets or design work.

The product

What we built

Pretty Metrics connects to a product's payment accounts with a read-only key and opens a studio with fifteen metrics, a choice of charts and card styles, and a library of still and animated backdrops. One click exports a PNG sized for the feed, or an MP4 on an animated backdrop.

Paste a product's website and it reads the name, logo and brand colours from the site, then generates backdrops in those colours. It is free to use, with a one-time Pro payment for logos, no footer and video export.

• Seven payment providers

  Stripe, Paddle, Lemon Squeezy, Polar, RevenueCat, Square and Creem, with several providers combined into one total.

• Fifteen metrics

  MRR, ARR, revenue, subscribers, new customers, churn, lifetime value and breakdowns by plan, interval, country and cancellation reason.

• Sized for every feed

  Square, portrait, story and landscape exports at full social resolution, downloaded, copied or shared straight from the browser.

• Still and live backdrops

  Over a hundred backdrops, more than half of them animated, plus backdrops generated from each product's own brand colours and logo.

• Looping video export

  Animated cards export as seamless MP4 loops, encoded entirely in the user's browser.

• Private by design

  Keys are read-only and encrypted, revenue figures are never stored, and every image is drawn on the user's device.

Under the hood

The engineering

• Video encoded in the browser

  The card is captured once as a transparent image, then each frame paints the animated scene underneath it. Frames go to the browser's own video encoder, H.264 first with VP9 and AV1 as fallbacks, and every clip is exactly one loop long so it repeats without a seam.

• Animated scenes in plain canvas

  Around 9,000 lines of hand-written canvas scenes, each a function that paints one moment and loops exactly. Pixel-art scenes draw on a small fixed grid and scale up, so the preview and the exported file match at any size.

• Brand colours read from a website

  The server collects the colours a site declares, from its theme colour, manifest, CSS variables and SVG logo, groups near-identical shades and picks a primary and a clearly different secondary in a perceptual colour space. Every fetch is checked against private network addresses, so the URL box cannot probe the server.

• One model for seven provider APIs

  Each provider's data is mapped onto the same monthly grid. Stripe has no MRR history, so it is rebuilt from subscriptions. Mixed currencies are never summed, a product with one unreadable provider fails rather than showing a total that is too low, and derived metrics are calculated in the browser.

• Keys that only work for their owner

  Provider keys are encrypted with AES-256-GCM and bound to the owning account, so a copied ciphertext will not decrypt anywhere else. Stripe webhook signatures are verified directly, and production refuses test keys.

• Next.js
• Canvas
• WebCodecs
• Stripe
• React
• TypeScript
• Neon Postgres
• Neon Auth
• Recharts
• Resend
• Tailwind CSS
• Vercel