Backdrop-blur budget
75 blurs, 10 of them full-screen
Frosted glass is the cheapest way to make an interface look expensive and one of the more expensive things to animate: a blurred layer forces the compositor to sample everything behind it, every frame. So the count matters, and so does where each one sits — a blur on a chip is a rounding error, a blur over the viewport is a scroll-time bill.
Blur sites
75
every backdrop-blur / backdrop-filter in src
On a full surface
10
inset-0, fixed, full-height — the expensive kind
On a panel
54
cards, sheets, menus
On a chip
11
small badges and pills
Where blur is used
The classification is a line-level heuristic over the surrounding class strings: it says where blur sits, which is what a budget needs. It does not claim to measure compositing cost — that needs a real device, which is the device matrix page's job.
| File | Blur sites |
|---|---|
| src/components/demos/scenes/set-01.tsx | 10 |
| src/components/demos/scenes/set-02.tsx | 10 |
| src/lib/learn.ts | 9 |
| src/components/demos/scenes/set-04.tsx | 6 |
| src/components/asset-detail.tsx | 5 |
| src/components/demos/scenes/set-06.tsx | 5 |
| src/components/demos/scenes/set-07.tsx | 4 |
| src/app/(public)/page.tsx | 3 |
The full-surface sites, named
These are the ones to look at first when a page feels heavy on a low-end phone: a blurred layer covering the viewport makes the compositor redraw the whole screen on every scroll frame.
- src/components/demos/scenes/set-01.tsx:1115className="absolute inset-0 flex flex-col items-center justify-center rounded-3xl border border-white/12 bg-gradient-to-
- src/components/demos/scenes/set-01.tsx:1125className="absolute inset-0 flex flex-col items-center justify-center rounded-3xl border border-white/12 bg-gradient-to-
- src/components/demos/scenes/set-02.tsx:499className="absolute right-0 z-20 mt-2 w-72 origin-top-right overflow-hidden rounded-2xl border border-white/12 bg-[#0d0f
- src/components/demos/scenes/set-04.tsx:120className="absolute inset-0 z-30 flex flex-col bg-[#07080d]/97 px-6 py-5 backdrop-blur-md"
- src/components/demos/scenes/set-06.tsx:100<span className="rounded-full bg-black/30 px-2.5 py-1 text-[9px] font-bold uppercase tracking-[0.2em] text-cyan-100 back
- src/components/demos/scenes/set-06.tsx:108<span className="rounded-full bg-black/40 px-2.5 py-1 text-[9px] font-bold uppercase tracking-[0.2em] text-white/70 back
- src/components/demos/scenes-17.tsx:2281className="fixed inset-0 z-40 cursor-default bg-black/50 backdrop-blur-[2px]"
- src/components/home-cues.tsx:153<div className="fixed bottom-4 left-4 z-50 max-w-xs rounded-2xl border border-white/12 bg-[#10131c]/95 px-4 py-3 shadow-
- src/components/keyboard-shortcuts-modal.tsx:35className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
- src/components/pro-lab-gate.tsx:99<div className="pointer-events-auto max-w-lg rounded-2xl border border-white/10 bg-panel/95 p-4 text-center backdrop-blu