DEV Community: Teodor Avadani

Make your v0 or Cursor app stop looking AI-built in 10 minutes

Teodor Avadani — Tue, 20 Oct 2026 21:04:11 +0000

If you've built a landing page with v0, Cursor, Lovable or Bolt, you've probably had this moment: you put it next to someone else's and it's the same page. Purple-to-blue gradient, centred headline, one font, three feature cards with an icon in a circle, a pricing table, and a "Get started" button that does nothing you can see.

Nothing on that page is broken. It's the average of every landing page the model has seen, and that's what you get when you don't ask for anything specific. Visitors recognise it within seconds, though, and some of them decide the product behind it got the same amount of thought.

Here are the five tells I look for and a fix for each. Every fix is a couple of minutes in a Next.js App Router project with Tailwind CSS v4. I put the result in a free starter (MIT) so you can copy single pieces or start from the whole thing:

The five tells

A gradient where a brand colour should be.
One font at one weight for everything.
Everything centred.
An illustration where the product should be.
Buttons that don't respond.

0. Get a page to work on (1 minute)

To try the fixes on a clean page:

npx create-next-app@latest my-app -e https://github.com/teodoravadani/qodesign-next-starter
cd my-app
npm run dev

Or open your own project. The steps assume Next.js 15 (App Router) and Tailwind v4, the setup where globals.css starts with @import "tailwindcss".

1. Swap the gradient for three colours (2 minutes)

Delete the bg-gradient-to-r from-purple-500 to-blue-500 (or whatever your hero has). In Tailwind v4 the palette lives in CSS, and every variable in @theme becomes a utility class:

/* app/globals.css */
@theme {
  --color-ink: #0a0a0d;
  --color-paper: #f3f1ea;
  --color-volt: #c6ff3d;
}

Now bg-ink, text-paper and bg-volt exist. Ink is the page, paper is the text (swap them for a light theme), and the accent goes on one or two things per screen: the main button, a status dot. Once the accent is on every element it does the gradient's job again.

2. Two fonts with some character (1 minute)

Pick a display face for headings and UI and a mono for numbers and small labels. The starter uses Space Grotesk and JetBrains Mono. The font @import has to be the first line of the file:

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
@import "tailwindcss";

@theme {
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

One trap I hit while testing this: a project set up with shadcn init (v0 projects use shadcn) already has an @theme inline block with --font-sans: var(--font-sans). That block wins, the variable points at itself, and the page falls back to Times New Roman. Edit the --font-sans and --font-mono lines inside that existing block instead of adding new ones. Also delete any font-family: Arial left on body by the default template, and put font-sans on <body>.

Then use contrast in size and weight: a bold 7xl headline with tracking-tight leading-[1.02], body text at text-lg and 60% opacity, mono at text-xs for the small stuff.

3. Move the hero off centre (1 minute)

Centred layouts are the default because they never look broken. A left-aligned hero with a width limit on the headline looks like someone placed it:

<section className="mx-auto max-w-6xl px-5 pt-28 pb-16">
  <h1 className="max-w-3xl text-5xl leading-[1.02] font-bold tracking-tight sm:text-7xl">
    Know your servers are down before your users do.
  </h1>
  <p className="mt-6 max-w-xl text-lg text-white/60">
    Uptime, latency and deploys on one screen. Set up in two minutes, no agent to install.
  </p>
</section>

Write the headline as one sentence about the visitor's problem. "Supercharge your workflow" is the copy version of the purple gradient.

4. Show the product (2 minutes)

Generated heroes get a blob or a 3D shape because the model has never seen your app. You have. Screenshot your best screen at 2x and put it in a plain browser frame:

import Image from 'next/image';
import shot from '@/assets/dashboard.webp';

<div className="mt-16 overflow-hidden rounded-2xl border border-white/10 bg-ink">
  <div className="flex items-center gap-1.5 border-b border-white/10 px-4 py-3">
    <span className="size-2.5 rounded-full bg-white/15" />
    <span className="size-2.5 rounded-full bg-white/15" />
    <span className="size-2.5 rounded-full bg-white/15" />
  </div>
  <Image src={shot} alt="The dashboard" priority sizes="(max-width: 1200px) 100vw, 1152px" />
</div>

The static import gives next/image the width and height, so nothing shifts when it loads, and it keeps working if you deploy under a sub-path. priority is there because it's the biggest thing above the fold.

No app to screenshot yet? The starter has a /dashboard route you can use as a placeholder. Swap in your real screen before you launch.

5. Make every button respond (3 minutes)

People feel this one without being able to name it. Click "Start free" on most generated pages and nothing visible happens. A loading state that turns into a confirmation tells the visitor their click did something.

I use the free Toast Stack component for this. It installs from a registry URL with the shadcn CLI, so the source lands in your project and you can edit it:

npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json

Mount the toaster once in app/layout.tsx:

import { Toaster } from '@/components/toast-stack/ToastStack';

// inside <body>
{children}
<Toaster />

Then wrap your signup call:

'use client';
import { toast } from '@/components/toast-stack/ToastStack';

const start = () => {
  toast.promise(createWorkspace(), {
    loading: { title: 'Creating your workspace…' },
    success: (name) => ({ title: 'Workspace ready', description: `${name} is live. The first check runs in 30 s.` }),
    error: () => ({ title: 'That didn’t work', description: 'Try again in a minute.' }),
  });
};

The spinner stays up for at least 600 ms so a fast request doesn't flash, then turns into a check. Hover the stack and the toasts fan out.

Pricing gets the same treatment. The Pricing Switch component replaces a static three-column table with a monthly/yearly switch whose prices roll like an odometer:

npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.json

<PricingSwitch
  plans={plans}
  header={<h2>Pay for monitors, not seats.</h2>}
  onSelect={(plan, yearly) => startCheckout(plan.id, yearly ? 'year' : 'month')}
/>

Its digits use Saira Condensed, so add &family=Saira+Condensed:wght@700;800 to the font import from step 2.

Bonus: motion that respects people (30 seconds)

If you add scroll-in animations, put them behind prefers-reduced-motion. In the starter the sections fade up with a CSS scroll timeline and no JavaScript:

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

Add className="reveal" to a section. The components in the starter check the same setting on their own.

If you'd rather hand it to Cursor

This prompt covers steps 1 to 4. I haven't compared how each tool handles it, so read the diff before you accept it:

Restyle the landing page in this Next.js App Router + Tailwind v4 project.
1. Remove every gradient background. In globals.css add --color-ink #0a0a0d, --color-paper #f3f1ea and --color-volt #c6ff3d to @theme. Use volt only on the primary button and one status dot.
2. Fonts: Space Grotesk for headings and UI, JetBrains Mono for numbers and small labels. Add a Google Fonts @import as the first line of globals.css. If an @theme inline block already defines --font-sans or --font-mono, change those lines instead of adding new ones. Put font-sans on <body>.
3. Left-align the hero: one-sentence headline (max-w-3xl, text-5xl sm:text-7xl, tracking-tight), one supporting line (max-w-xl).
4. Replace the hero illustration with next/image of src/assets/screenshot.webp (static import) inside a simple browser frame.
Don't change any other copy. Don't add dependencies.

What's in the starter

/: hero with a product shot, a log upload section with progress and retry (Upload Dropzone), pricing (Pricing Switch), toasts on every action (Toast Stack), and a light/dark switch (Day/Night Toggle).
/dashboard: Orbit, an observability dashboard with simulated live data.
Next.js 15.5, React 19, TypeScript, Tailwind v4, Framer Motion 11. next build passes and every page is static, so it deploys anywhere. The README has a one-click Vercel button.

About me, and the links. I'm Teodor, and I make animated UI components at qodesign, so the components in this post are mine. Everything here is free and MIT: the starter and the free components and dashboards in qodesign-free. The paid components are $3 each or $29 for all of them, each with a React + Tailwind version and a PROMPT.md for AI coding tools, at qodesign.dev.

If you run the five fixes on your own app, I'd like to see the before and after.

I wrote this post with help from an AI assistant. The code is copied from the starter repo, and every command above was run in a fresh Next.js 15 app (one plain, one set up with shadcn init) with next build passing before publishing.

A liquid glass tab bar: the magnifying lens is a scaled copy of the bar

Teodor Avadani — Tue, 20 Oct 2026 17:37:17 +0000

Apple's liquid glass tab bars have a lens that sits on the selected tab and magnifies the icon under it. When you switch tabs it moves like a drop of water: it stretches on the way, then settles.

Most web versions of this effect use an SVG displacement filter inside backdrop-filter. That only renders in Chromium browsers; Safari and Firefox skip it. I built one for a music-app demo and wanted it to look the same in every browser, so the lens uses no filter at all. It's a small window onto a second copy of the bar, scaled up 1.42 times.

This post covers three pieces:

The glass bar (plain backdrop-filter).
The lens: a clipped, scaled copy, and the one line of math that keeps it lined up.
The drop: a spring whose speed sets the lens width.

There's a single-file demo at the end you can paste into CodePen. If you build with Cursor or Claude Code, it also works as a reference file to hand to your agent: it's short, and every number in it is explained here.

1. The glass bar

The bar itself is ordinary frosted glass. Blur plus saturation does most of the work. The inset shadows draw a light top edge and a faint 1px rim so the bar reads as a solid object on any background.

This is the CSS from the shipped component (tabbar-liquid.css):

.glassbar {
  position: absolute;
  border-radius: 32px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.9);
  backdrop-filter: blur(16px) saturate(1.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px var(--glass-line),
    0 18px 40px rgba(0,0,0,.45);
}

saturate(1.9) matters more than it looks. Blur alone washes colours out to grey. Saturation brings back the colour of whatever scrolls underneath, which is what makes it read as glass and not as a grey panel.

Keep the -webkit- prefix. Safari still wants it.

2. The lens is a copy, not a filter

Real magnification would need a displacement filter on whatever sits behind the lens. You can fake the part people actually notice, the icon under the lens getting bigger, with plain transforms:

Render the tabs a second time inside the lens element.
Give the lens overflow: hidden so you only see the part under it.
Scale the copy by M (1.42 here) around the lens centre.

The markup is a lens with an inner layer that holds the copy:

<div class="lens" aria-hidden="true">
  <div class="lensIn"><!-- the same tabs again, not focusable --></div>
</div>

The copy must stay out of the accessibility tree and out of the tab order, or a screen reader reads every tab twice. In the React component the copy is rendered with live={false}, which does exactly that:

const inert = live ? {} : { tabIndex: -1, 'aria-hidden': true as const };

The one line of math

.lensIn has transform-origin: 0 0 and fills the same box as the real bar. The lens has width w, height h, and centre (x, y) in bar coordinates, so its top-left corner is (lx, ly) = (x - w/2, y - h/2).

You want the point under the lens centre to stay where it is, with everything around it pushed outwards by M. Here's the render code from the shipped engine.ts:

const Ls = S.lens, lx = Ls.x - Ls.w / 2, ly = Ls.y - Ls.h / 2, M = 1.42;
lens.style.transform = `translate(${lx.toFixed(1)}px,${ly.toFixed(1)}px) scale(${Ls.sx.toFixed(4)},${Ls.sy.toFixed(4)})`;
lensIn.style.transform = `translate(${(-lx + Ls.x - M * Ls.x).toFixed(2)}px,${(-ly + Ls.y - M * Ls.y).toFixed(2)}px) scale(${M})`;

Why it works: a point p of the copy lands at M·p + t inside the lens, and the lens sits at lx. On screen that is lx + M·p + (-lx + x - M·x), which simplifies to x + M·(p - x). At p = x you get x, so the centre stays put and everything else spreads out from it by M. It's the textbook "scale around a point" transform, with the lens offset cancelled out.

Since the copy is real DOM, you can style it apart from the bar. Trimmed from the shipped CSS (the comments are mine):

.lens {
  position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(3px) saturate(2) brightness(1.18);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),     /* bright top rim */
    inset 0 -2px 0 rgba(198,244,50,.55),     /* lime bottom rim */
    inset 0 -12px 20px rgba(139,108,255,.4),
    inset 5px 0 9px rgba(255,90,170,.35),    /* pink left edge */
    inset -5px 0 9px rgba(90,220,255,.35),   /* cyan right edge */
    0 0 0 1.5px rgba(255,255,255,.4),
    0 12px 28px rgba(0,0,0,.5),
    0 0 34px rgba(198,244,50,.42);
}
.lensIn { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lensIn .tab { color: var(--volt); }        /* the magnified icon turns lime */
.lensIn .tab i { opacity: 0 !important; }   /* hide the label inside the lens */
.lensIn .tab svg { translate: 0 8px; }      /* and drop the icon into the middle */
.lensIn .dockc {
  filter: drop-shadow(1.6px 0 0 rgba(255,70,150,.6))
          drop-shadow(-1.6px 0 0 rgba(70,210,255,.6));
}

Two details from that block:

The pink and cyan inset shadows on the left and right edges, plus two 1.6px drop-shadows on the copy, fake the colour fringing you see where real glass bends light. They're cheap and they sell the effect more than anything else in the file.
The label is hidden inside the lens and the icon moves down 8px. A magnified label gets cut off by the lens edge and looks like a bug. A centred icon looks deliberate.

The cost of this approach is that the content renders twice. For five icons that's nothing. The same component reuses the trick for a bigger orb that lifts out of the bar: the orb's copy holds the whole screen, scaled with the same formula.

3. The drop: speed sets the width

A lens that slides at a fixed width looks like a highlight pill. It reads as liquid once it stretches while it moves and goes back to round when it stops.

In the React version the lens x-position is a Framer Motion spring, and useVelocity reads how fast that spring is moving:

// live mode: the lens rides a spring, and its speed stretches the drop
const x = useSpring(tabX(0), { stiffness: 380, damping: 26 });
const stretch = useVelocity(x);

Every frame, the speed (px/s) maps to the lens size:

const v = Math.abs(stretch.get());
S.lens = {
  x: lx, y: g.cy,
  w: mix(66 + Math.min(92, v / 9), 56, c),
  h: mix(52 - Math.min(10, v / 90), 56, c),
  /* ... */
};

Leave out mix(..., c) for now. That's the compact state, when the bar shrinks on scroll. What's left:

At rest the lens is 66 × 52.
It gets 1px wider for every 9 px/s of speed, up to 92px more.
It gets thinner by up to 10px, so a fast move reads as a long, thin drop.
The clamps stop a very fast flick from stretching it across the whole bar.

The spring's overshoot does the rest. With stiffness 380 and damping 26 the spring is underdamped (damping ratio about 0.67), so it passes the target a little and comes back. The width follows the speed, so you get a wobble on landing without writing one keyframe.

Switching tabs is one line: x.set(tabX(i)).

Keyboard and screen readers

The real tabs are a tablist. Each tab gets role="tab" and aria-selected, and left/right arrows move between them:

if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
e.preventDefault(); i = (i + (e.key === 'ArrowRight' ? 1 : 4)) % 5;
screen.current?.querySelectorAll<HTMLElement>('[data-dock] [data-tab]')[i]?.focus();

(+ 4 is - 1 modulo 5, so left arrow from the first tab wraps to the last.)

The lens, the copy and the rings are all aria-hidden. Only the real tabs are announced.

The single-file version

No Framer Motion here. The spring is about ten lines of Hooke's law with damping, using the same stiffness and damping as the React version. Paste it into CodePen's HTML panel or save it as a .html file and open it:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Liquid glass tab bar: magnifying lens demo</title>
<!-- MIT licence. Teaching version of the lens from qodesign's Liquid Glass Tab Bar (qodesign.dev). -->
<style>
  :root { --ink:#0A0A0D; --text:#F4F4F6; --muted:#8A8FA3; --lime:#C6FF3D; }
  * { box-sizing:border-box; margin:0 }
  body { min-height:100vh; display:grid; place-items:center; background:#050507; font-family:system-ui,sans-serif; color:var(--text) }
  .phone { position:relative; width:390px; height:700px; max-width:100vw; border-radius:44px; overflow:hidden; background:var(--ink) }
  .feed { position:absolute; inset:0; overflow-y:auto; padding:56px 18px 140px; display:grid; gap:14px }
  .card { height:150px; border-radius:22px; display:flex; align-items:flex-end; padding:16px; font-weight:600 }
  .card:nth-child(3n+1) { background:linear-gradient(135deg,#8B6CFF,#2a1d66) }
  .card:nth-child(3n+2) { background:linear-gradient(135deg,#ff6a3d,#5a1d0b) }
  .card:nth-child(3n)   { background:linear-gradient(135deg,#C6FF3D,#2d4a00); color:#0A0A0D }

  /* the glass bar */
  .dock { position:absolute; left:14px; right:14px; bottom:22px; height:76px }
  .bar { position:absolute; inset:0; border-radius:32px; background:rgba(28,30,40,.45);
    -webkit-backdrop-filter:blur(16px) saturate(1.9); backdrop-filter:blur(16px) saturate(1.9);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px rgba(0,0,0,.45) }
  .tabs { position:absolute; inset:0; display:flex }
  .tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border:0; background:none; color:var(--muted); font:600 10.5px system-ui; border-radius:24px; cursor:pointer; touch-action:none }
  .tab svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
  .tab[aria-selected="true"] { color:var(--text) }
  .tab:focus-visible { outline:2px solid var(--lime); outline-offset:-4px }

  /* the lens: a window onto a scaled copy of the tabs */
  .lens { position:absolute; left:0; top:0; overflow:hidden; pointer-events:none; will-change:transform,width,height;
    background:rgba(255,255,255,.07);
    -webkit-backdrop-filter:blur(3px) saturate(2) brightness(1.18); backdrop-filter:blur(3px) saturate(2) brightness(1.18);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(198,255,61,.55), inset 0 -12px 20px rgba(139,108,255,.4),
      inset 5px 0 9px rgba(255,90,170,.35), inset -5px 0 9px rgba(90,220,255,.35), 0 0 0 1.5px rgba(255,255,255,.4), 0 0 34px rgba(198,255,61,.42) }
  .lens::after { content:""; position:absolute; left:14%; right:14%; top:5%; height:34%; border-radius:50%;
    background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)) }
  .lensIn { position:absolute; left:0; top:0; transform-origin:0 0;
    filter:drop-shadow(1.6px 0 0 rgba(255,70,150,.6)) drop-shadow(-1.6px 0 0 rgba(70,210,255,.6)) }
  .lensIn .tab { color:var(--lime) }
  .lensIn .tab span { opacity:0 }
  .lensIn .tab svg { translate:0 8px }
</style>
</head>
<body>
<div class="phone">
  <div class="feed" aria-label="Feed">
    <div class="card">Daily mix</div><div class="card">Late night</div><div class="card">Focus</div>
    <div class="card">Running</div><div class="card">Vinyl finds</div><div class="card">Live sets</div>
  </div>
  <nav class="dock">
    <div class="bar"></div>
    <div class="tabs" role="tablist" aria-label="Sections" id="tabs"></div>
    <div class="lens" id="lens" aria-hidden="true"><div class="lensIn" id="lensIn"></div></div>
  </nav>
</div>
<script>
const TABS = [
  ['Home',    '<path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/>'],
  ['Explore', '<circle cx="12" cy="12" r="9"/><path d="M15.5 8.5l-2 5-5 2 2-5z"/>'],
  ['Library', '<path d="M4 4v16M9 4v16M14 4l6 16"/>'],
  ['Inbox',   '<path d="M4 13l2-8h12l2 8v6H4z"/><path d="M4 13h5l1 2h4l1-2h5"/>'],
  ['Profile', '<circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/>'],
];
const tabHTML = (live) => TABS.map(([label, icon], i) =>
  `<button class="tab" type="button" ${live ? `role="tab" aria-selected="${i === 0}" tabindex="${i ? -1 : 0}"` : 'tabindex="-1"'}>
     <svg viewBox="0 0 24 24" aria-hidden="true">${icon}</svg><span>${label}</span></button>`).join('');

const $ = (id) => document.getElementById(id);
const dock = document.querySelector('.dock'), tabsEl = $('tabs'), lens = $('lens'), lensIn = $('lensIn');
tabsEl.innerHTML = tabHTML(true);
lensIn.innerHTML = `<div class="tabs">${tabHTML(false)}</div>`;   // the copy the lens magnifies
const tabs = [...tabsEl.children];
const M = 1.42;                                                     // magnification
const reduce = matchMedia('(prefers-reduced-motion: reduce)');

// a tiny spring: same feel as Framer Motion's useSpring({ stiffness: 380, damping: 26 })
const spring = { x: 0, v: 0, target: 0, k: 380, c: 26 };
const centerOf = (i) => tabs[i].offsetLeft + tabs[i].offsetWidth / 2;
let active = 0;

function select(i, focus) {
  active = (i + tabs.length) % tabs.length;
  tabs.forEach((t, j) => { t.setAttribute('aria-selected', j === active); t.tabIndex = j === active ? 0 : -1; });
  if (focus) tabs[active].focus();
  spring.target = centerOf(active);
  if (reduce.matches) { spring.x = spring.target; spring.v = 0; }
}

function paint() {
  const W = dock.clientWidth, H = dock.clientHeight;
  lensIn.style.width = W + 'px'; lensIn.style.height = H + 'px';
  const speed = Math.abs(spring.v);                        // px per second
  const w = 66 + Math.min(92, speed / 9);                  // faster = longer drop
  const h = 52 - Math.min(10, speed / 90);                 // ...and a little thinner
  const x = Math.max(w / 2, Math.min(W - w / 2, spring.x));      // keep the drop inside the bar
  const y = H / 2, lx = x - w / 2, ly = y - h / 2;
  lens.style.width = w + 'px'; lens.style.height = h + 'px';
  lens.style.borderRadius = Math.min(w, h) / 2 + 'px';
  lens.style.transform = `translate(${lx}px, ${ly}px)`;
  // keep the point under the lens centre still, and scale everything around it
  lensIn.style.transform = `translate(${-lx + x - M * x}px, ${-ly + y - M * y}px) scale(${M})`;
}

let last = performance.now();
function frame(now) {
  const dt = Math.min(0.032, (now - last) / 1000); last = now;
  const a = -spring.k * (spring.x - spring.target) - spring.c * spring.v;   // Hooke + damping, mass 1
  spring.v += a * dt; spring.x += spring.v * dt;
  paint();
  requestAnimationFrame(frame);
}

// tap, drag across the bar, or use the arrow keys
const nearest = (clientX) => {
  const r = dock.getBoundingClientRect(), px = clientX - r.left;
  return tabs.reduce((best, t, i) => Math.abs(centerOf(i) - px) < Math.abs(centerOf(best) - px) ? i : best, 0);
};
tabsEl.addEventListener('pointerdown', (e) => { tabsEl.setPointerCapture(e.pointerId); select(nearest(e.clientX)); });
tabsEl.addEventListener('pointermove', (e) => { if (e.buttons) select(nearest(e.clientX)); });
tabsEl.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight') { e.preventDefault(); select(active + 1, true); }
  if (e.key === 'ArrowLeft')  { e.preventDefault(); select(active - 1, true); }
});
addEventListener('resize', () => { spring.target = spring.x = centerOf(active); });

spring.x = spring.target = centerOf(0);
requestAnimationFrame(frame);
</script>
</body>
</html>

The parts worth reading in the demo:

// a tiny spring: same feel as Framer Motion's useSpring({ stiffness: 380, damping: 26 })
const a = -spring.k * (spring.x - spring.target) - spring.c * spring.v;
spring.v += a * dt; spring.x += spring.v * dt;

const speed = Math.abs(spring.v);              // px per second
const w = 66 + Math.min(92, speed / 9);        // faster = longer drop
const h = 52 - Math.min(10, speed / 90);       // ...and a little thinner
const x = Math.max(w / 2, Math.min(W - w / 2, spring.x));   // keep the drop inside the bar
lensIn.style.transform = `translate(${-lx + x - M * x}px, ${-ly + y - M * y}px) scale(${M})`;

The demo adds three things the shipped component doesn't have:

Drag along the bar and the lens follows your finger to the nearest tab, stretching over every tab it passes.
It clamps the drop inside the bar, because a 158px drop on the last tab hangs off the edge.
With prefers-reduced-motion: reduce it jumps straight to the new tab, with no stretch and no wobble. Do that in anything you ship. A drop that stretches across the screen is exactly the kind of motion that setting is for.

Easy ways to get it wrong

Scaling the copy around its own centre. The magnified icon drifts sideways as the lens moves. Use transform-origin: 0 0 and put the whole offset in the translate.
A CSS transition on the lens width. The width then lags behind the position. Set width, height and transform in the same frame, all read from the spring.
A focusable copy. Keyboard users tab through ten tabs instead of five. Mark the copy aria-hidden and give every button in it tabindex="-1".
Labels inside the lens. They get cut by the lens edge. Hide them in the copy.

About me, and the links. I'm Teodor, and I make animated UI components at qodesign. The tab bar in this post is one of them, so this is partly a post about my own product. The demo above is MIT: copy it, change it, ship it. The full component adds the orb that turns into a full-screen player, the compact bar on scroll, the badge pop, a React + TypeScript + Tailwind + Framer Motion version, and a PROMPT.md for AI coding tools. It's $3 on qodesign.dev. This week I'm also putting a few components on GitHub for free (MIT): two dashboards, a toast stack, a pricing switch and an upload dropzone. I'll add the link here when the repo is public.

If you build a lens with a real displacement map that works in Safari, I'd like to see it.

I wrote this post with help from an AI assistant. The code excerpts are copied from the shipped component, and the demo was run and checked in a browser before publishing.