Repository navigation
Replace the how-it-works video with a scroll-driven demo - #129
Merged
Merged
Conversation
The landing section is now a sticky, full-width block whose playhead is the scroll bar. Three tiled windows tell the story: your terminal pasting the join prompt, a team-chat thread sending the channel link to Sam, and the Wave channel in a browser window, where both agents join and you steer. The window in use is lit and the others are veiled, a labelled pointer clicks each control, and on a phone the windows become a single accordion with a Paste / Share / Steer progress strip above the current step. The create-channel step is dropped, so the steps are now paste, share and steer. The visible section heading is gone; a screen-reader heading remains. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The pointer used to sit still and jump in a short burst before each click. It now travels the whole distance between two clicks as the reader scrolls, lingering a moment after one click and arriving a moment before the next, so each click still reads as landing, waiting, pressing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The pointer aimed at targets measured from the page as it stood, so a window folding or opening mid-move dragged its targets, and the pointer, up and down with it. Targets are now measured inside their own window, which lays its content out at its final size, and placed using where that window will be at the moment of the click. The click ripple is a filled, translucent circle that grows and fades, with no ring. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The ripple and the arrow's press were drawn from scroll position, so a fast flick skipped them and a slow scroll stretched them out. Crossing a click now starts them as short timed animations, the same speed however the reader scrolls. A flick across several clicks plays one, and scrolling back plays none. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
When the Wave window takes the whole frame for the steer, it now grows the panes the real channel page has beside a channel: the channel list on the left and who is in the room on the right, drawn with the same roster component. They slide open with the window. Phones keep the single column, as the channel page does. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Four one-line claims with icon tiles replace the five-paragraph card and its gradient, and the band spans the full width. The detail lives in the FAQ, which the section now links to. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The hero is sticky. As the carousel climbs over it the words fade and grow, and the ring tips back on a diagonal like a disc turning away. Reduced motion keeps only the fade. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
While the ring tips back it also turns in its own plane, so the agent cards drift round it. Each card counter-rotates to stay upright. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
On a wide screen the three steps sit in a ruled row over a full-width demo that fills the room it is given, all in the page column, with a dot grid and a glow in the current step's colour round it. The principles band now follows with no gap. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The steps keep their shared rules in one rounded card, and the demo's own frame is the second card, with the textured ground showing between and round them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Lines of slash glyphs swell on scroll and settle back into an even grid of plus marks. The per-step glow returns behind them, and the pointer sends rings through the grid that brighten and swell the marks they cross. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Each line's drift follows the scroll direction on a loose spring, so a reversal overshoots and the lines turn one after another, with a slap to their swell. Scrolling up draws the mirror image, arcs opening from the left, crossfading from the downward pattern as the turn happens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The carousel is meant to be seen whole, so the Use cases link lands it in the middle of the view instead of at the top, on click and on arrival at /#uses from another page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The headline turns over each supported agent in place of "the agent", and a row of five marks lights the matching one, replacing the drifting cards. The section moves above the FAQ, and the footer sits on its own ground. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The footer fades into lilac, and a sky and a peach glow roll across it from opposite sides on different periods, rising as they cross. They are translated, not repainted, so the motion stays on the compositor. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The headline runs across the section on a wide screen, leaving no empty corner beside it, and the agent name morphs between tools with Torph. The underline is drawn on the morph's box, since Torph's inline-block words are out of text-decoration's reach. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A shorter perspective makes the ring's near side swell and its far side shrink as the hero scrolls away. A translate fitted to the seats keeps the figure where it was, and the sideways clip moves from the hero's column to main, so the swelling side runs to the window edge without a scrollbar. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The ring arrives the way it leaves, turned away and faint, and unwinds to the flat circle. The drift correction is refitted across both directions of the turn, so the seats hold their centre throughout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
On arrival the ring starts all but edge-on, a diagonal line on a nearly flat perspective, and opens into the circle while an extra turn whips round and coasts out. The seats start a quarter apart and slide 20 degrees to their places as it opens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- The ring rides the scroll exactly, then coasts on at the speed it was turning and springs back to its seats when the scroll stops. - On phones the ring shows with marks-only seats and tips side to side, top toward the viewer, with its own drift correction. - The hero sticks where it starts, under the nav, instead of sliding up first. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Only the hero words fade, from the outside in; the ring stays. - The stage sticks past the end of the hero, so the ring stays put until the steps section has climbed over it, then hides. - The ring's tilt and spin run over that whole way (--ring-p), with the spin raised to 120deg to keep its pace. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The fade's edge is wider, so it spreads over the words rather than wiping across them, and it begins on the first scroll. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The side of the ring under a mouse pointer tips away, up to 8deg, measured across the hero words. It follows the pointer every frame and settles back to flat more slowly once the pointer leaves. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
As the page scrolls, the hero words swell toward the reader through an SVG displacement filter, its map drawn at the words' own resolution so they do not move in blocks, and blur more as they go. The fade runs a little longer to give it room. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The bulge now draws the middle from farther out, so the words sink away from the reader like the inside of a bowl rather than swelling toward them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Touch screens skip the bulge filter; the words only fade. - Elsewhere the filter runs only while the words are going, and lets go if frames start running long. - Sizes are measured when the layout changes, not every frame, and the bulge map is redrawn only when the words change size, not each time a phone's toolbar slides. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch was successfully deployed
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
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 landing page's how-it-works video is replaced by a sticky, full-width section whose playhead is the scroll bar.
Not in this PR
public/videos/how-it-works-*.mp4files, the Remotion source and thevideo:renderscript are now unused, but are left in place.wave-enterprisepicks this component up through its bump-core script, not here.Testing
npx vitest run: 57 files, 749 tests pass.eslintandtscare clean on the changed files.🤖 Generated with Claude Code