Tactile chip tabs with a stretch

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

Studied from 60fps.design, a gallery of mobile micro-interaction clips: this piece takes the “tactile tab button” idea from its travel shots (pills that squash when tapped while the highlight slides and the feed reloads) and rebuilds it as working tabs. It is the explore screen of a fictional Nepali travel app called Basera. Four raised chips (Stays, Homestays, Treks, Food walks) sit under a raised search pill. Each chip has a 3px “lip” under it, so pressing it sinks 3px and loses the lip like a physical key. The selected chip sits inside a dark well that travels to the new chip by stretching: the leading edge leaves first and the trailing edge follows 60ms later on a slower spring. The grid then shows four shimmering skeleton cards for 650ms and the real cards rise in. The detail worth copying is the two-edge stretch: animating left and right on different timings makes the indicator feel elastic without any physics library.

The language is clay: warm grey ground, cream raised surfaces with a hard lip and a soft drop shadow, inset shadows for wells, one brick accent for focus and saved hearts.

Reference behaviour

1. First frame: search pill “Where to next? / Any week · 2 guests” with a sunken filter button; chips Stays 128, Homestays 46, Treks 31, Food walks 19; Stays is selected (cream text in the dark well); heading “Stays” in serif with “128 near Pokhara”; a 2×2 grid of listings.
2. The chip row scrolls horizontally inside itself (scrollbar hidden). At 390 wide the third chip is cut off at the edge, which tells the user it scrolls. The page never scrolls sideways.
3. Pointer down on a chip: it moves 3px down and scales to 0.95 in 90ms; its lip shadow goes to 0 and its drop shadow shrinks. navigator.vibrate(6) fires where supported.
4. Pointer up or leave: the chip returns in 320ms on cubic-bezier(.34,1.56,.64,1), overshooting slightly upward.
5. Click selects the chip. The well moves: if moving right, its right edge animates over 300ms and its left edge over 460ms with a 60ms delay; moving left, the reverse. Both use cubic-bezier(.34,1.3,.64,1). Mid-move the well is wider than either chip.
6. Selected text turns cream (#faf7f0) and its count turns #b8b2a5; the previously selected chip regains its raised cream surface.
7. If the chosen chip is partly out of view, the row scrolls smoothly to bring it in, with 40px to spare on the left.
8. The heading and count line change immediately (e.g. “Treks / 31 guided routes”).
9. The grid becomes four skeleton cards (photo block + two bones) with a 1.1s left-to-right shimmer. The panel has aria-busy="true".
10. After 650ms the real cards replace the skeletons; each rises 10px and fades in over 420ms, staggered 0, 50, 100, 150ms. aria-busy returns to false and a live region announces the count line.
11. Selecting quickly again cancels the pending swap; only the latest tab’s cards appear.
12. Each card has a 40px heart button; tapping toggles aria-pressed, fills it brick, and squeezes it to 0.86 while pressed.
13. Keyboard: the chips are a tablist with roving tabindex. Arrow Left/Right wrap, Home and End jump; selection follows focus. Enter or Space plays the press animation for 120ms.

Structure

390 × 844, padding-top 54
┌──────────────────────────────────────┐
│ ╭──────────────────────────────────╮ │ search pill 58px, margin 6 20 0
│ │ ⌕   Where to next?         ( ≡ ) │ │ filter well 42px
│ │     Any week · 2 guests          │ │
│ ╰──────────────────────────────────╯ │
│                                      │ 18px
│ [■ Stays 128] [⌂ Homestays 46] [▲ Tre│ chips 46px, gap 8, scrolls
│                                      │ 12px
│ Stays                128 near Pokhara│ serif 30 / 13px
│ ┌──────────────┐ ┌──────────────┐    │
│ │   art 4:4.6  │ │          (♡) │    │ cards in 2 cols, gap 14
│ └──────────────┘ └──────────────┘    │ radius 18
│ Lakeside Loft    Phewa Glass House   │ serif 20
│ Baidam, Pokhara  Sedi Bagar          │ 12px muted
│ Rs 4,200 / night Rs 6,800 / night    │ 13px, price bold
│ ┌──────────────┐ ┌──────────────┐    │
│ …                                    │
└──────────────────────────────────────┘

• The search is a single button with an aria-label that reads the whole pill.
• The chip row is a scroll container div.tabs-wrap (padding 4 20 12 so shadows are not clipped) holding div.tabs[role=tablist] with width: max-content.
• The well is a span.ind absolutely positioned inside .tabs, aria-hidden, under the chips (z-index 0 vs chips 1).
• Each chip is a button role="tab" with icon, label and a count span.
• The heading row has the h1 (current tab name) and the count line.
• The panel is a section role="tabpanel" labelled by the h1, with aria-busy.
• Each listing is an article with an art block (inline SVG landscape), a heart button, h2, place p and price p.

Tokens

:root {
  --bg: #e6e1d6;        /* clay ground */
  --chip: #f3efe6;      /* raised surfaces */
  --lip: #cbc3b3;       /* 3px key lip under raised surfaces */
  --ink: #2b2a26;       /* text, the well */
  --ink-2: #55524a;     /* search secondary */
  --ink-3: #6f6b61;     /* counts, meta */
  --line: #d3ccbe;
  --brick: #c2412d;     /* focus ring, saved heart */
  --paper: #faf7f0;     /* text on the well */
  --skel: #dcd6ca;      /* skeleton base */
  --skel-hi: #ebe6dc;   /* skeleton shimmer */
  --sans: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --chip-h: 46px;
  --search-h: 58px;
  --r-pill: 999px;
  --r-card: 18px;
  --s-2: 8px; --s-3: 12px; --s-4: 14px; --s-5: 18px; --s-6: 20px;
  --raised: inset 0 1px 0 #fff, 0 3px 0 var(--lip), 0 8px 14px -8px rgba(43,42,38,.35);
  --pressed: inset 0 1px 0 #fff, 0 0 0 var(--lip), 0 2px 4px -2px rgba(43,42,38,.3);
  --well: inset 0 2px 4px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5);
  --spring: cubic-bezier(.34, 1.56, .64, 1);   /* chip release */
  --soft: cubic-bezier(.34, 1.3, .64, 1);      /* well edges */
  --out: cubic-bezier(.16, 1, .3, 1);
  --std: cubic-bezier(.2, .7, .2, 1);
  --t-press: 90ms; --t-release: 320ms;
  --t-lead: 300ms; --t-trail: 460ms; --t-trail-delay: 60ms;
  --t-skeleton: 650ms;
}

Typography

Role	Family	Size	Weight	Line-height	Tracking
Section heading (h1)	Instrument Serif	30px	400	1	-0.01em
Card title (h2)	Instrument Serif	20px	400	1.1	0
Search title	Bricolage Grotesque	15px	700	1.4	0
Search sub	Bricolage Grotesque	12px	400	1.4	0
Chip label	Bricolage Grotesque	15px	500	1	0
Chip count	Bricolage Grotesque	12px	400	1	0
Count line	Bricolage Grotesque	13px	400	1.4	0
Card meta	Bricolage Grotesque	12px	400	1.4	0
Price	Bricolage Grotesque	13px	700 amount / 400 unit	1.4	0

The serif names places. The grotesk does every control and number.

Motion

Thing	Trigger	Property	From → to	Duration	Easing	Delay	Reduced motion
Chip press	pointerdown	transform, box-shadow	0 → translateY(3px) scale(.95), raised → pressed	90ms	--spring	0	none
Chip release	pointerup/leave	transform, box-shadow	back to rest	320ms	--spring	0	none
Well, leading edge	select	right (moving right) or left (moving left)	old → new	300ms	--soft	0	instant
Well, trailing edge	select	the other edge	old → new	460ms	--soft	60ms	instant
Chip colour	select	color, background-color	swap	200ms	--std	0	100ms linear
Row scroll	select off-screen chip	scrollLeft	—	browser smooth	—	0	auto
Skeleton shimmer	while loading	background-position	100% → 0	1.1s loop	linear	0	static
Card rise	content arrives	opacity, translateY	0,10px → 1,0	420ms	--out	0/50/100/150ms	none
Heart press	:active	transform	1 → 0.86	300ms	--spring	0	none

States

• Chip resting: cream, 3px lip, soft drop shadow, ink label, muted count.
• Chip pressed: 3px lower, 0.95, no lip, small shadow.
• Chip selected: transparent background over the dark well, cream text, no shadow; pressing it scales 0.95 without the 3px drop.
• Focus-visible: 2px brick outline, 3px offset, on chips, search, hearts.
• Loading: skeleton grid, panel aria-busy="true", shimmer.
• Loaded: real grid, aria-busy="false".
• Heart off: ink outline. Heart on: brick fill and stroke, aria-pressed="true".
• Empty (not in demo): replace the grid with one centred serif line “Nothing here this week” and a raised chip “Clear dates”.
• Error (not in demo): keep skeletons static (no shimmer) and add a 13px line “Could not load. Pull to retry.”

Accessibility

• role="tablist" labelled “Kinds of trip”; each chip role="tab" with aria-selected and aria-controls="panel".
• Roving tabindex: only the selected chip has tabindex=0. Arrow keys move and select; Home/End jump.
• The panel is role="tabpanel" labelled by the heading; aria-busy is true during skeletons.
• A hidden live region announces “31 guided routes” when the cards arrive.
• The well is aria-hidden; selection is also shown by text colour and by aria-selected.
• Hearts have aria-label="Save Lakeside Loft" and aria-pressed.
• Contrast: #2b2a26 on #f3efe6 ≈ 12:1; #faf7f0 on #2b2a26 ≈ 13:1; #6f6b61 on #e6e1d6 ≈ 4.5:1.
• Hit targets: chips 46px tall, search 58px, hearts 40px, filter 42px.

Responsive rules

• At 360 wide the chip row still scrolls; the grid stays two columns (cards about 156px wide).
• Below 720px tall the art ratio drops from 4:4.6 to 4:3.6 so two rows still fit.
• At tablet width, the row fits without scrolling; the grid becomes four columns with the same 14px gap; chip sizes do not change.
• The scroll container has 20px side padding, so the first chip lines up with the page margin and the last chip can scroll fully into view.
• Do not draw a status bar.

Acceptance checklist

Always

• Raised surfaces have a hard 3px lip plus a soft shadow; pressing removes the lip and moves the element down 3px.
• Release springs back with overshoot.
• The selection well animates its two edges on different timings, so it stretches mid-move.
• The well stretches in the direction of travel (leading edge first).
• Changing tab shows skeletons, then staggered real content; rapid changes show only the last tab.
• The tab row scrolls inside itself; the page has no horizontal scroll at 375px.
• Tablist semantics with roving tabindex and arrow keys.
• aria-busy reflects loading.
• Reduced motion: no press transform, no stretch, no shimmer, no rise; all states still visible.
• Hit targets at least 40px.

This demo

• Chips Stays 128, Homestays 46, Treks 31, Food walks 19; Stays selected first.
• Search reads “Where to next?” and “Any week · 2 guests”.
• Ground #e6e1d6, chips #f3efe6, lip #cbc3b3, well #2b2a26, brick #c2412d.
• First grid: Lakeside Loft, Phewa Glass House, Annapurna Rooftop, Old Bazaar Rooms with prices in Rs per night.
• Skeleton duration 650ms; well edges 300ms and 460ms with 60ms delay.

Implementation notes

1. The stretching well. Position it with left and right (both measured from the tab container), and choose which edge leads by direction. Set the class before the new values so the right transition is in place.

function place(i, animate) {
  const c = chips[i], w = tabs.offsetWidth;
  const left = c.offsetLeft, right = w - (c.offsetLeft + c.offsetWidth);
  ind.classList.remove('go-r', 'go-l');
  if (animate) ind.classList.add(i > cur ? 'go-r' : 'go-l');
  ind.style.left = left + 'px';
  ind.style.right = right + 'px';
}

.ind { position: absolute; top: 0; height: 46px; border-radius: 999px;
  background: var(--ink); box-shadow: var(--well); pointer-events: none; }
.ind.go-r { transition: right .3s var(--soft), left .46s var(--soft) .06s; }
.ind.go-l { transition: left .3s var(--soft), right .46s var(--soft) .06s; }

Common mistake: animating transform: translateX plus width. That moves the centre, not the edges, and the stretch looks like a zoom. Re-measure after fonts load, or the well starts a few pixels off.

2. The key press. Use a class on pointerdown rather than :active, so the press shows instantly on touch and the release can have its own slower spring.

.chip { box-shadow: var(--raised);
  transition: transform .32s var(--spring), box-shadow .32s var(--std); }
.chip.down { transform: translateY(3px) scale(.95); box-shadow: var(--pressed);
  transition-duration: .09s; }

chip.addEventListener('pointerdown', () => chip.classList.add('down'));
['pointerup', 'pointerleave', 'pointercancel'].forEach(ev =>
  chip.addEventListener(ev, () => chip.classList.remove('down')));

3. Skeleton hand-over with cancellation.

clearTimeout(timer);
panel.setAttribute('aria-busy', 'true');
grid.className = 'grid skel'; grid.innerHTML = skeletonHTML;
timer = setTimeout(() => {
  grid.className = 'grid real'; grid.innerHTML = cardsHTML(tab);
  panel.setAttribute('aria-busy', 'false'); status.textContent = tab.meta;
}, 650);

In a real app replace the timeout with the request, but keep a minimum of about 300ms so the skeleton never flashes for one frame.

Common mistakes overall:

• Letting the chip row widen the page instead of scrolling inside its own container.
• Clipping the chip shadows with overflow-x: auto and no vertical padding (keep 4px top, 12px bottom).
• A brick-coloured well. The well is ink; brick is only for focus and saved hearts.
• Using the serif for chip labels.
• Swapping the cards without skeletons, which loses the “feed reloads” beat that sells the tab change.
• Shimmer moving right to left. It runs left to right, like reading.
• Forgetting pointerleave, so a chip stays pressed when the finger slides off.

Where it sits: the top of a browse feed in any marketplace (stays, food, classes). Use three to six chips; past six, the stretch travels too far and should be replaced by a plain underline.

Rebuild order:

1. Set the clay ground and build the raised search pill with its lip and sunken filter well.
2. Build one raised chip with icon, label and count; confirm the 3px lip and soft shadow.
3. Put four chips in a max-content row inside a scroll container with 20px side padding.
4. Add the press class on pointerdown and the release spring; test sliding a finger off a chip.
5. Add the dark well under the chips; position it with left and right after fonts load.
6. Add the two direction classes so the leading edge moves first.
7. Wire selection, roving tabindex, arrow keys and scroll-into-view.
8. Build the card grid from data with SVG landscape art and heart buttons.
9. Add the skeleton swap with cancellation and aria-busy, then the staggered rise.
10. Add the reduced-motion override and check 360, 375 and short screens.