DOC: Replace landing page Roakey peeks with animated spritesheets - #2314
Merged
romanlutz merged 6 commits intoAug 6, 2026
Conversation
Swap the two photoreal Roakey images on the landing page for three cartoon spritesheets whose frames are stepped by a scroll timeline, so each mascot plays a short sequence as its section scrolls into view. Each sprite is a fixed-size window onto a horizontal frame strip: object-fit none renders the strip at 1:1 and the box clips it to one frame, so animating object-position steps through frames. The base object-position is the last frame, which is what shows when scroll timelines are unsupported or reduced motion is requested; starting from the first frame would leave the scout invisible because its opening frame is an empty ledge. Placement is anchored to content rather than the page edge so the three sit at distinct levels: the scout perches on the CoPyRIT card, the spyglass rests on the install code block, and the flag arrives centred below the tab group. The flag scrubs over a fixed 200px rather than a percentage of cover, because it sits at the very bottom of the page where a viewport-relative range would strand the sequence mid-run on tall screens. Net asset size drops about 1.4 MB. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 13a6d940-c11c-4ba7-a4d4-bc6b9d75c757
varunj-msft
approved these changes
Aug 4, 2026
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 13a6d940-c11c-4ba7-a4d4-bc6b9d75c757
The sprites were hidden below 1536px because they live in the gutters beside the centred content column, and narrow screens have none. Rather than moving them off the content, open vertical space for them to occupy: the capabilities grid and the install code block each gain a top margin on narrow screens, and the sprite settles into that gap. The gaps are applied with :has() so they only appear when the sprite they serve is actually present. The spyglass keeps its static position while the following block is pushed down, so its gap is sized to land the artwork exactly on the block's new top edge with no vertical transform needed. The flag needed no change; it was already centred in whitespace below the content. Verified at 320, 390, 768, 1280 and 1700px: the scout clears the Key Capabilities heading by 49px, the spyglass rests on the code block with zero overlap and 20px of clearance above, and no width introduces horizontal overflow. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 13a6d940-c11c-4ba7-a4d4-bc6b9d75c757
The narrow-screen gaps were gated on 1536px, which is above common laptop widths, so 1280, 1366, 1440 and 1512 all picked up 140px of unwanted space above the capabilities grid and the install code block. Measure where each sprite actually lands on text and gate on that instead. The thresholds come from the rendered glyph rects rather than the full-width block boxes, since a short final line leaves room a block box does not reveal: the scout only collides once the grid collapses to one column (below 768px), and the install paragraph only wraps under the spyglass below 900px. Also anchor the spyglass to the content column instead of a centre-relative calc. That offset assumed the column was at its capped 1157px width, which only holds from 1536px up; below that the column is fluid and the sprite drifted off the right edge of the block. Verified at 390, 640, 767, 768, 899, 900, 1024, 1280, 1440, 1536 and 1920px: no sprite overlaps text, gaps appear only below their breakpoints, the spyglass rests on the block at every width, and the flag stays page-centred. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 13a6d940-c11c-4ba7-a4d4-bc6b9d75c757
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.
Description
The landing page currently slides two photoreal Roakey images in from the screen edges as you scroll (added in #2099). This replaces them with three cartoon spritesheets that actually animate: each mascot plays a short frame sequence driven by a scroll timeline as its section comes into view, then holds its final pose.
roakey-landing-scroll.mp4
Each sprite is a fixed-size window onto a horizontal frame strip.
object-fit: nonerenders the strip at 1:1 and the box clips it to a single frame, so animatingobject-positionsteps through the frames. Aview()timeline drives that stepping, which means the reader scrubs the animation rather than watching it play on a timer.Placement is anchored to the content each sprite belongs to rather than to the page edge, so the three sit at clearly different levels down the page:
Two details worth a reviewer's attention:
Reduced motion needed a real fallback, not
animation: none. The baseobject-positionis the last frame, not the first. The previous rule disabled the animation outright, which would pin the scout to frame 1 - and frame 1 is an empty ledge, so it would render as nothing at all. Verified that all three show a meaningful static frame underprefers-reduced-motion: reduce.The flag scrubs over a fixed
200pxinstead of a percentage ofcover. It sits at the very bottom of the page, where only ~230px of scrolling remains once it starts entering. A percentage range scales with viewport height, so on tall screens the page ran out of scroll and the flag plant never landed. Confirmed completing at 700/900/1080/1300px viewport heights.Sprites stay gated to viewports >= 1536px (same rule the old peeks used) so they never cover the centred content column, and are hidden entirely below that.
Net asset size drops about 1.4 MB: the two photoreal PNGs were 989 KB and 813 KB, the three spritesheets total 366 KB.
Tests and Documentation
No tests or JupyText runs apply - this is a landing page asset and stylesheet change with no Python surface.
Verified against a local
myst build --htmlin Chromium at 1700x900:.myst-codewrapper that paints the backgroundThe recording above is a slow scroll through the full page at 1600x900.