Repository navigation
Homepage: give the feature tabs motion of their own - #1207
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>
3 tasks done
- 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>
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>
- 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>
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.
Summary
The feature tabs (Agentic Coding, Network, Testing and Teams chapters) get their own motion and look, separate from the highlights gallery and the closer-look window.
focus: { x, y, zoom }(0–1 across and down the image). The image zooms within its own rounded rectangle, which clips it, so the inset stays, and it lands about a second before autoplay moves on. All 14 screenshots in the four chapters have a focus point. A focus on a video fails the build.touch-action: pan-y). Mouse drags are left alone.roundoption is gone, since both now use that style. Unselected tabs' descriptions step back until hovered.autoplay.tsas unused. The template now avoids that pattern, and a comment explains why.Test plan
npm run lint,format:check,typecheck,build,knipindocs/npm test: 94 pass, including new tests for the zoom geometry (focus-zoom.test.js), the swipe decision, and focus resolution and validation/home-next/at 1280px and 375px: every focus point lands on its detail, a mid-transition screenshot shows the slide and blur, and simulated touch swipes go forward and back, while short and vertical swipes do nothing🤖 Generated with Claude Code