Open the landing page on a template playing itself - #399
Merged
Merged
Conversation
The hero was a headline beside a still of a template, which showed the product's output and none of what it does. A real template now sits beside the headline, angled in perspective, and scrolling pins the stage, turns the screen to face the visitor, grows it to fill the viewport, scrubs its background and steps through its own sections, ending on a line naming the template. The animation is drawn with the same drawFrame2D and catalogue entry the gallery uses, so it fetches no frames. TripVault's display face adds one 13.5 KiB font; dropping the hero still leaves the page lighter overall, 549 KiB over 60 requests against 572 KiB over 62. TripVault was chosen by measurement: its background is the brightest over the scrubbed range and changes most per scroll step. The canvas is held to a pixel budget, which took a 3x phone from 30fps to 60 while scrolling. Reduced motion gets a still screen and no pinned track.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This was referenced Sep 19, 2026
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
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.
The hero was a headline beside a still of a template. It showed what the product outputs and none of what it does, and it read like any other product page.
Now a real template sits beside the headline, larger than its column, running off the right edge and angled in perspective. Scrolling pins the stage: the page's own copy steps aside, the screen turns to face the visitor and grows to fill the viewport, its background scrubs with the scroll, and it steps through the template's own first three sections. It ends on a line saying what that was, "That was TripVault, one of 21 templates, drawn live in your browser as you scrolled", with a link to open it.
It is drawn by the same drawFrame2D the product uses, from TripVault's catalogue entry, read on the server so only what the hero draws reaches the browser. It fetches no frames and cannot drift from the real template. The canvas is drawn at viewport size and scaled into the card, so at rest the card is a miniature of the whole screen rather than a crop of one edge.
Which template. Measured on each preview page over the range the hero scrubs, with its text hidden:
TripVault is the brightest and in the page's own colours. OrbitCRM moves slightly more, but its headline, "Close deals at the speed of light", could read as a claim about ScrollCraft.
Cost. Measured with the cache disabled at 1440x900: the live page loads 572 KiB over 62 requests, this one 549 KiB over 60. TripVault's display face adds one 13.5 KiB font, and the hero still it replaces was larger.
Smoothness. Scrolling through the whole pinned track one step per frame:
Capping the canvas at 1280 wide let a 3x portrait phone redraw 1170x2532 every frame. It is now held to about a million pixels, which the soft gradient upscales without a visible difference.
Everything else. Headline contrast at rest is 14.2:1 on desktop and 13.2:1 on a phone, and the body copy 6.5:1 and 6.1:1. Nothing scrolls sideways at either width. With prefers-reduced-motion the track is not pinned, nothing listens to scroll, and the screen sits still beside the copy. The template's text is aria-hidden, so three headings from somebody else's site are not read out as ours, and the closing line names it in words.
The hero tests are rewritten for this: a catalogue template, a scrubbed range that stays out of the dark end, no fetch, the pixel budget, reduced motion, and the demo kept out of the reading order. Letting the stage pin under reduced motion fails one, and reverting to the width cap fails another. Also ran: tsc, eslint, 536 vitest tests, and a production build.
Correction, added after merge. The contrast figures above came from a probe that averaged the whole screenshot instead of the pixels behind each line: in sharp 0.34,
extract().stats()ignores the crop. Re-measured on production against the pixels behind the text, the headline is 17.97:1, the accent line 11.14:1 and the body copy 8.33:1, both on desktop and on a phone, where the trust line is 7.98:1. All of them pass, by more than stated above.