Welcome widget: add a subtle shine to the version digits#78626
Merged
Conversation
parametric 0-9 glyphs with per-stroke gradients, all WPDS tokens
Slow specular sweep clipped to the glyphs; gated by reduced-motion.
add layout containment so tall content scrolls within the cell
simison
approved these changes
May 25, 2026
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
simison
reviewed
May 25, 2026
| transform: translateX(-360px); | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { |
Member
There was a problem hiding this comment.
Let's use @media not (prefers-reduced-motion) instead for consistency with how we use it elsewhere in the repo?
simison
reviewed
May 25, 2026
| .glint { | ||
| animation: | ||
| welcomeVersionGlint 10s var(--wpds-motion-easing-balanced) | ||
| infinite; |
Member
There was a problem hiding this comment.
Rolling just once at init could be enough? With delay if need.
simison
reviewed
May 25, 2026
| @media (prefers-reduced-motion: no-preference) { | ||
| .glint { | ||
| animation: | ||
| welcomeVersionGlint 10s var(--wpds-motion-easing-balanced) |
Member
There was a problem hiding this comment.
Curious how --wpds-motion-easing-expressive would look here 🤔
Member
|
Left some comments but none blocking! |
|
Size Change: -26 B (0%) Total Size: 8.04 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 45dd51e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26396118736
|
Three runs after a 3s delay; negate the reduced-motion query.
Contributor
Author
|
Addressed all three in
|
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.
What?
Adds a slow specular sweep to the stylized version digits in the Welcome widget banner. A narrow highlight travels across the numbers, catching the bevel of the existing gradient glyphs, then pauses before repeating.
The effect is purely decorative and lives entirely inside the existing
HeaderBackgroundSVG.Why?
The banner already renders the WordPress version as beveled, gradient glyphs that read as folded ribbon. A gentle moving highlight gives that surface a little life and quietly draws attention to the version, without adding any new chrome, text, or layout.
How?
renderGlyphs( forMask )helper so the same shapes paint both the visible digits and an SVG<mask>.<Rect>filled with a narrow diagonal gradient (transparent, highlight, transparent) slides across the masked group via a CSStranslateXanimation. The gradient is tilted to follow the bevel direction.--banner-glinttoken derived from existing banner tokens, so no raw color values are introduced.@media (prefers-reduced-motion: no-preference). At rest the band sits off-screen, so reduced-motion users see the static glyphs unchanged.Timing is a 10s cycle: the sweep crosses during the first half and idles for the rest, using the
--wpds-motion-easing-balancedtoken.Testing
Screen.Recording.2026-05-25.at.10.18.24.AM.mov