('[role="tab"]')[active];
if (!tab || !bar.current) return;
bar.current.style.translate = `${tab.offsetLeft}px 0`;
bar.current.style.scale = `${tab.offsetWidth / 100} 1`; // bar is 100px wide, origin left
};
place();
const ro = new ResizeObserver(place);
if (list.current) ro.observe(list.current);
return () => ro.disconnect();
}, [active]);
return (
{
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
setInstant(true); // keyboard: no animation
setActive((i) => (i + (e.key === "ArrowRight" ? 1 : tabs.length - 1)) % tabs.length);
}}>
{tabs.map((t, i) => (
{ setInstant(false); setActive(i); }}
className={cn("px-3 py-2 text-sm transition-colors duration-(--duration-fast)", i === active ? "text-fg" : "text-fg-muted hover:text-fg")}>
{t.label}
))}
);
}
```
Pill-shaped active background with a perfect text-color change (after Emil Kowalski): render a second copy of the tab list styled as active (`bg-fg text-bg`), stack it on top with `pointer-events-none aria-hidden`, and animate its `clip-path: inset(0 R 0 L round var(--radius-md))` to the active tab's box with `--duration-base` `ease-in-out`. Text and background change as one element, so they never drift out of sync.
## 10. Text reveals
**Hero lockup on load (LCP-safe):** H1 moves but never fades; supporting lines fade + rise with a stagger.
```css
@layer components {
@media (prefers-reduced-motion: no-preference) {
.void-rise { animation: void-rise var(--duration-slower) var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 60ms); }
.void-settle { animation: void-settle var(--duration-slower) var(--ease-out-expo) both; }
}
}
@keyframes void-rise { from { opacity: 0; translate: 0 0.75rem; } }
@keyframes void-settle { from { translate: 0 0.3em; } } /* no opacity: the H1 is visible at first paint */
```
```tsx
…
…
…
```
**Masked line rise on scroll** (hellohello-style section statements, not the hero). Author the line breaks (lines can't be measured on the server):
```tsx
const lines = ["We design memorable", "experiences for brands", "that refuse to blend in."];
{lines.map((line, i) => (
{line}
))}
```
```css
@layer components {
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.void-lines { view-timeline-name: --void-lines; }
.void-line {
animation: void-line-rise linear both;
animation-timeline: --void-lines;
animation-range: entry calc(10% + var(--i) * 8%) cover calc(30% + var(--i) * 8%);
}
}
}
}
@keyframes void-line-rise { from { translate: 0 105%; } }
```
Unsupported browsers (Firefox) and reduced motion render the finished statement. Per-word reveals with `@starting-style`: `components` (RevealText). Don't split per character (one node per glyph).
**Stagger a group entrance** (cards appearing once) †: `.void-rise` with `[--i:0]…[--i:5]`; items beyond 6 share `--i:5`.
## 11. Page transitions (View Transitions)
Next 16 App Router with React 19.2's ``:
```tsx
// src/app/template.tsx — crossfade content between routes; header/footer stay outside
import { ViewTransition } from "react"; // if your React types lack it: /// {children} ;
}
```
```css
::view-transition-old(.void-page) { animation: void-vt-out var(--duration-fast) var(--ease-out) both; }
::view-transition-new(.void-page) { animation: void-vt-in var(--duration-slow) var(--ease-out) both; }
@keyframes void-vt-out { to { opacity: 0; } }
@keyframes void-vt-in { from { opacity: 0; translate: 0 0.5rem; } }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
```
- Shared element (thumbnail → detail): wrap both in ``. ≤ 10 named elements per transition; names unique on the page.
- Directional transitions: `
```
Static fill under reduced motion (`motion-safe:`); skeleton height equals the final content height; show only after 150–300ms of loading.