Good Morning, Alex

How it's built

This page is plain HTML, CSS and JS so you can read it with View Source. Each part below says how the original does the same thing in React, Tailwind and Framer Motion.

1 · One skeleton, two skins

Both themes use the same layout: sidebar, header and card grid. Only the colour variables change: body[data-theme] swaps --card, --accent and --blur.

React: a theme state plus Tailwind classes such as dark:, or a cn(theme==='home' ? 'bg-black/40' : 'bg-zinc-900') map.

2 · Bento grid with spans

A 4-column CSS grid with grid-auto-flow: dense. The important cards take span 2 on columns or rows. Below 860px it drops to 2 columns, and the small cards pair up.

Tailwind: grid grid-cols-2 lg:grid-cols-4 gap-4, with col-span-2 row-span-2 on the camera card. Turn on “Show grid” below to see each card's span.

3 · Frosted glass

Cards use background: rgba(30,30,30,.4) and backdrop-filter: blur(18px), with no border. The room photo behind them sets the mood.

Tailwind: bg-black/40 backdrop-blur-md rounded-2xl p-6. The fitness theme turns blur off and uses solid bg-zinc-900 (#18181B) on #09090B.

4 · Hover lift

Hovering a card (or holding it on a phone) applies transform: translateY(-5px) with an ease-out curve.

<motion.div whileHover={{ y: -5 }}
  whileTap={{ y: -5 }} />

5 · Staggered entry / tab switch

Each card gets --i, its position in the list, and its animation waits --i × 60ms. Switching tabs fades the cards out, swaps them, and plays the entry again.

const list = { show: { transition: { staggerChildren: .06 } } };
const item = { hidden: { opacity: 0, y: 18 }, show: { opacity: 1, y: 0 } };
<AnimatePresence mode="wait">
  <motion.div key={tab} variants={list} initial="hidden" animate="show" exit="hidden">…

6 · The 3D theme flip

This uses the Web Animations API. The dashboard shrinks to 0.9 and turns 90°. Edge-on, it's invisible, so the theme swaps there. It then turns from −90° back to 0 with a little overshoot. The whole flip takes about 0.7s.

<motion.div key={theme}
  initial={{ rotateY: -90, scale: .9 }}
  animate={{ rotateY: 0, scale: 1 }}
  exit={{ rotateY: 90, scale: .9 }}
  transition={{ type: "spring", stiffness: 200, damping: 20 }}
  style={{ transformPerspective: 1600 }} />

7 · Charts & icons

The curved line is a Catmull-Rom spline turned into SVG C curves. The fill under it is a linearGradient from 35% lime down to nothing. The rings are a circle with stroke-dasharray. The icons are inline SVG in the Lucide style: 24px grid, 1.75 stroke, round caps.

React: recharts <AreaChart type="monotone"> and lucide-react.

8 · Type & spacing rules

The font is Inter. The big numbers are 28–34px bold with −0.03em letter-spacing, card titles are 14px semibold, and labels are white at 60%. The corners are 20px, the padding 24px (16px on a phone) and the gaps 16px.