DOC: Add scroll-triggered Roakey peeks to the landing page#2099
Merged
romanlutz merged 2 commits intoJun 29, 2026
Conversation
Add two decorative mascot images to the documentation landing page that slide in at predefined scroll positions: - A sideways-peeking Roakey slides in flush from the left edge partway through Key Capabilities. - Roakey's tail slides in from the right edge partway through Getting Started, stopping just before the wooden board so only the tail shows. Both are CSS-only, driven by scroll-based `animation-timeline: view()`, positioned absolutely so they never shift page content, and clipped with `overflow-x: clip` so they never add horizontal scroll. They only reveal on viewports >= 1536px wide, where the gutters beside the centered content column have room for them; on narrower screens they stay hidden off-screen. Reduced-motion and browsers without scroll-timeline support leave them hidden. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
jsong468
reviewed
Jun 29, 2026
jsong468
left a comment
jsong468
left a comment
Contributor
There was a problem hiding this comment.
so cute! :D Do you have a screen recording to see what this looks like?
jsong468
approved these changes
Jun 29, 2026
jsong468
left a comment
jsong468
left a comment
Contributor
There was a problem hiding this comment.
This might be the tiniest NIT ever but if Roakey is perched vertically on the board, should the tail come down and then to the left (convex instead of concave) 😆 Feel free to ignore
Contributor
Author
|
I love everything about this comment 🤣 that said, there's never just one raccoon. This may be a different one! |
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
Adds two decorative Roakey (the PyRIT raccoon mascot) "peeks" to the documentation landing page that slide in at predefined scroll positions:
How it works
animation-timeline: view()indoc/css/custom.css, triggered by two{image}directives indoc/index.md.position: absolute(out of flow), so they never shift page content.overflow-x: cliponhtml, bodyensures the off-screen start states never add a horizontal scrollbar.prefers-reduced-motionand browsers without scroll-timeline support leave them hidden.Files
doc/index.md— two{image}directives at the predefined spots.doc/css/custom.css—.roakey-peekstyling + scroll-driven reveal animation.doc/roakey_peek.png,doc/roakey_tail.png— transparent mascot art.roakey-peeks.webm