Bento Charts — Dark Analytics Dashboard

A production-quality recreation of the “Cards & Chart Layout 01 (Dark)” UI kit, rebuilt as a Next.js 14 (App Router + TypeScript) app. The original ~140-card single artboard is reorganized into 3 clean bento-grid pages with fully hand-built, animated SVG charts (no charting libraries).

Reference artwork lives in design-reference/.

Pages

Route	Page	Highlights
/	Overview	Hero cards, earnings area chart, candlesticks, donuts, gauges, heatmap
/analytics	Analytics	Sessions/page-views lines, grouped bars, calendar, device split, gauges
/reports	Reports	Incidents bars, shipments ledger, population lines, retention rings

Highlights

• Zero runtime dependencies beyond next / react / react-dom. Every chart (area, line, sparkline, bar, grouped bar, horizontal bar, donut, ring, radial gauge, candlestick, heatmap, equalizer) is hand-built SVG/CSS.
• Perfect bento grid — a 12-column dense CSS grid with per-card column/row spans, responsive down to mobile.
• Animations — scroll-reveal entrance (IntersectionObserver), path-draw line charts, growing bars, sweeping donut/ring/gauge arcs (SMIL), hover lift, and animated route nav. Respects prefers-reduced-motion.
• Hydration-safe by design — all mock data is generated deterministically from fixed seeds (no Math.random() / Date during render), so server and client markup match.
• Unsplash imagery for avatars (fixed photo IDs → stable across renders).

Getting started

npm install        # or: pnpm install / yarn
npm run dev        # http://localhost:3000

Production build

npm run build      # compiles + type-checks + lints
npm run start      # serve the production build

Create the production ZIP

To produce a shippable archive of the source (excluding installed/build artifacts):

# from the repo root
zip -r bento-charts.zip . -x "node_modules/*" ".next/*" ".git/*"

Or download the branch as a ZIP directly from GitHub (Code → Download ZIP).

Tech notes / correctness

• App Router, TypeScript strict: true.
• Client boundaries are minimal: only Reveal, TopBar, and the gradient/useId charts (LineArea, Radial) are "use client". Pages and layout stay server components.
• useId() gives every SVG gradient/filter a unique, SSR-stable id — no id collisions, no hydration warnings.
• Every list/.map() render uses a stable, unique key.
• Fonts use the system stack (no build-time font fetch).

Project structure

app/
  layout.tsx            # root layout, TopBar + footer
  page.tsx              # /            Overview
  analytics/page.tsx    # /analytics   Analytics
  reports/page.tsx      # /reports     Reports
  globals.css           # design system (dark palette, grid, animations)
  components/
    Card.tsx  Reveal.tsx  TopBar.tsx  ui.tsx  pieces.tsx
    charts/   LineArea.tsx  Bars.tsx  Radial.tsx  Misc.tsx  util.ts
  lib/
    data.ts             # deterministic mock-data generators
    avatars.ts          # Unsplash avatar/scene URL helpers
design-reference/       # original design PNGs

Mock data is for demonstration only.