Repository navigation
Homepage: list the feature tabs beside the stage on wide screens - #1208
Merged
Merged
Conversation
- Images zoom slowly in on the detail their tab describes. Chapter items take an optional `focus` (x, y and zoom); the zoom moves the focus to the middle of the stage without showing past the image's edges, and lands a second before autoplay moves on. - Changing tabs slides the old media away as it blurs and fades, and brings the new media into focus from the other side. Going forward the media moves left, the way the tabs read; autoplay always moves forward. - On touch screens a sideways swipe on the stage changes tabs. The media follows the finger, resists past the first and last tab, and settles back after a short swipe; vertical swipes still scroll the page. - The phone caption swaps in from the side the media comes from. - The progress line fills in the chapter's colour, and the play button lights up in it on hover, so the tabs look unlike the gallery. - The other tabs' descriptions step back until hovered. - Reduced motion keeps the instant switch, with no zoom or drag. - Template literals in Tabs.astro no longer end in a word: knip reads that as a tagged template and missed the script's imports. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- From lg the tabs form a list beside the stage instead of a row under it. Only the selected tab opens to show its description, and the progress line runs down beside the list, drawing in from the top. - Arrow keys follow the layout: up and down the list, left and right along the row. The tab list reports its orientation. - Panels change vertically along the list, going up as the list reads; a swipe still moves them sideways. - The Agentic Coding extras sit side by side under the stage, the terminal as tall as the stat beside it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- A blurred copy of the media fills the whole stage, and the media sits inset on it with rounded corners, instead of filling the stage with a glow only around its edges. Videos inset too. - An image now zooms within its own rounded rectangle, which clips it, so the inset stays while it zooms. The script measures the image to set the zoom and the clip. - Push notifications zooms in less, so the arrow panel stays in view in its narrow portrait frame. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ge-feature-tabs-list # Conflicts: # docs/src/components/home/presentations/Tabs.astro
The play, pause and replay button is round, borderless and grey in both the tabs and the gallery, so the `round` option is gone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ge-feature-tabs-list
- InsetMedia.astro holds the media that sits inset on a full-frame backdrop, shrinking to fit so its rounded corners sit on its own edges. The gallery and the tabs both use it instead of each repeating the frame, the sizing classes and why they work. - Tabs: the panel-change animations no longer need an ID to spare the focus zoom, which is a transition on the image inside. The swipe keeps how far the media followed the finger instead of reading it back from the style, and checks the first and last tab directly. The media to animate is looked up once. - Tabs: the ResizeObserver is disconnected before the tabs set up again, since the ClientRouter keeps the script running from page to page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ge-feature-tabs-list The list layout's media query listener is removed before the tabs set up again, alongside the ResizeObserver. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ion' into claude/homepage-feature-tabs-list
…ture-tabs-list # Conflicts: # docs/src/components/home/presentations/Tabs.astro
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #1207 (merged).
Summary
From
lg(1024px) the feature tabs become a list beside the stage, after Linear's and Raycast's feature sections. Belowlgnothing changes from #1207.aria-orientationto match.bindRovingKeysnow accepts a function for the orientation.Trade-off: the stage is about 770px wide at full width instead of 1080px, so the media shows smaller. The focus zoom from #1207 offsets some of that.
Test plan
npm run lint,format:check,typecheck,build,knipindocs/;npm test(94 pass)/home-next/at 1280px: the list, a mid-transition frame, a 6-item list (Testing), the Agentic Coding extras, and ArrowDown moving along the list🤖 Generated with Claude Code