How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Layout: the section is 120% of the screen tall, with a small muted heading at the top. The review column is 35% wide and centred. - Photo: 16:9 in a 16px-cornered frame, 8px inset with 12px corners. - Quote: 28px (weight 500, line-height 1.25, letter-spacing -1.2px), centred, 32px below the photo. - Tab row: 64px tall with 8px padding and 4px gaps, sitting 128px up from the bottom of the column.
- Tabs: each is 48px square (4px padding, 4px corners) with a 40px avatar, on a dark tint. The active tab is light and fills the rest of the row (row width minus 16px padding, minus 48px and a 4px gap per other tab). It shows the name (14.4px, weight 600) and role (12px, muted). Hovering an inactive tab lightens it (0.5s).
- Switching (click): - The old tab shrinks to 48px and the new one grows, together (0.75s, strong ease-in-out). - The old name fades out (0.5s). The new one fades in once the new tab has mostly opened (from about 0.6s, over 0.5s). - The quote's lines slide up out of their masks one after another (0.5s, ease-in, 50ms apart). Then the new quote's lines rise in from below (0.5s, ease-out, 50ms apart). - The new photo fades in over the old one after 0.5s (1s). - Clicks are ignored until the switch has finished.
- Width 1000px to 1200px: the column is 50% wide and the quote is 20px.
- Under 1000px: the section is one screen tall, the column is full width with 16px side padding, the quote is 20px, the tab row sits 32px up from the bottom, and roles hide.
- Fallbacks: reduced motion swaps instantly. The quote keeps its line breaks when the window is resized.