Repository navigation
feat: add testimonial reel focus block. - #17
Merged
Merged
Conversation
A reel of testimonial cards wider than the window, shown through a sticky stage. Vertical scroll is spent running the row sideways: the runway is one scrollport plus exactly the distance the row has to travel, so the reel starts when the stage lands and finishes on the last card. - Pins against whatever actually scrolls — the window on a page, or the nearest scrolling ancestor when the reel sits in a panel. That is the same element `position: sticky` picks, so the two cannot disagree, and it is what lets the docs preview hold the block in a scrollport of its own. - A tick strip reads the run back like a scrubber: a seven-bar window rides the head and tapers either side. The counter is driven off the same fraction, so the number can never disagree with the lit bar. - Cards wait below their line until they cross in from the right, and the row flexes while it travels — cards ahead of centre swing low, the ones behind ride high, by however fast you are scrolling. It falls flat when you stop. - Hover focus: the rest of the row dims and blurs while the hovered card stays sharp and its border warms to the accent. - No image requests — each avatar is a monogram over a gradient built from its hue, with a grain overlay. Under `prefers-reduced-motion` nothing is pinned and nothing is tweened: the row becomes a natively scrollable strip and the scrubber reads that scroller instead. Covered by 30 tests in apps/docs/tests/testimonial-reel-focus.test.tsx.
The reel spends scroll rather than time, so it is only ever as smooth as the scrolling driving it: a wheel notch moves the page in one jump and the row jumps with it. The velocity lean in particular has far more to read from when the scroll is continuous. Adds a Smooth scrolling section with a Lenis setup that shares GSAP's ticker and forwards scroll to ScrollTrigger, bails out under prefers-reduced-motion, and tears itself down. Flagged as optional — the block works on native scroll, which is what the docs preview uses — with a note on pointing Lenis at the same scroller when the reel sits inside a panel.
The block works on native scroll, so the Lenis setup guide and its cross-link are removed to keep the page focused on the block itself.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
2 participants
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.
Adds the Testimonial Reel Focus block: a horizontal testimonial reel that pins and scrolls sideways as the page scrolls.
For reviewers: a note about adding a smooth-scroll library (Lenis) was added and then removed in this branch, so the docs page only covers the block itself, which works on normal browser scrolling