Skip to content

Welcome hero: subtle Fluent hover, fix parallax top gap, soften intro streaks - #51367

Merged
Boliang Zhang (LegendaryBlair) merged 1 commit into
mainfrom
niels9001/welcome-hero-tweaks
Oct 19, 2026
Merged

Boliang Zhang (LegendaryBlair) merged 1 commit into
mainfrom
niels9001/welcome-hero-tweaks

Conversation

@niels9001

Copy link
Copy Markdown
Collaborator

Summary of the Pull Request

Polish for the new OOBE "Welcome to PowerToys" hero animation (#50873):

  1. Hover highlight: replaces the rainbow/brand-gradient stroke on tool tiles with a subtle Fluent-style hover: a faint fill plus a 1px neutral stroke on the tile edge. In high contrast it uses SystemColorHighlight with a 2px stroke.
  2. Parallax top gap: the aurora dome could slide down during pointer parallax and impact shake, leaving a gap between the blue background and the top edge of the hero. The dome now extends 24px above the hero (DomeBleed), so that gap no longer appears.
  3. Intro streaks: the light trails that shoot out during the intro had hard, rectangular edges. They now use a CompositionMaskBrush with a radial falloff mask, so they have soft edges and a tapered tail.

PR Checklist

  • Closes: #xxx
  • Communication: I've discussed this with core contributors already. If the work hasn't been agreed, this work might be rejected
  • Tests: Added/updated and all pass
  • Localization: All end-user-facing strings can be localized
  • Dev docs: Added/updated
  • New binaries: Added on the required places
  • Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

Detailed Description of the Pull Request / Additional comments

Changes are limited to src/settings-ui/Settings.UI/SettingsXAML/Controls/WelcomeHero/:

  • WelcomeHeroPalette.cs: Color[] Highlight is replaced by HighlightFill, HighlightStroke and HighlightStrokeThickness for Dark, Light and HighContrast.
  • WelcomeHeroScene.cs:
    • The highlight shape reuses the tile's glass geometry and sits beneath the icon. Ghost tiles have no highlight, and SetHighlightedTile is null-safe.
    • Theme changes animate the highlight fill and stroke colors.
    • DomeBleed offsets the dome and its center, and the intro dawn center accounts for it.
    • A new shared radial _trailMask masks the trail gradients. CreateTrailBrush still returns the stops so theme updates keep working.

No new strings, binaries or settings.

Validation Steps Performed

  • tools\build\build.ps1 -Platform x64 -Configuration Debug in src\settings-ui\Settings.UI: passed (exit code 0, empty errors log).
  • Manual: ran the Debug Settings build, opened Welcome to PowerToys, watched the intro streaks, hovered over the tiles, and moved the pointer to trigger the parallax. No automated tests cover this animation.

â€Ķ streaks

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 16eac730-9023-44c4-8d02-358ace31b45c
@github-actions github-actions Bot added Product-Settings The standalone PowerToys Settings application Ready for review labels Oct 16, 2026
@github-actions

Copy link
Copy Markdown

🧭 PR intake

Visual evidence: Not needed — The changed files do not indicate a visible UI change. No visual evidence is expected.

Recommendation

Link the issue this PR fixes using a closing keyword such as Closes #123.

✅ Ready for review

This PR passed the automated intake checks and is ready for maintainer review.

Automated PR intake; PowerToys maintainers make final decisions.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ðŸŸĄ Changes recommended

The trail mask uses an unsupported brush type during scene construction, risking hero initialization failure.

1 open finding
What changed in this PR

Polishes the animated Welcome hero introduced in #50873.

Changes:

  • Replaces rainbow hover outlines with theme-aware fills and strokes.
  • Extends the aurora dome to prevent gaps during motion.
  • Adds radial masking to soften intro streaks.
File Description
src/​settings-ui/​Settings.UI/​SettingsXAML/​Controls/​WelcomeHero/​WelcomeHeroScene.cs Updates hover rendering, dome positioning, and trail masking.
src/​settings-ui/​Settings.UI/​SettingsXAML/​Controls/​WelcomeHero/​WelcomeHeroPalette.cs Defines hover colors and stroke thickness for each theme.

🧠 Review effort: Balanced


ðŸ’Ą Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

return (gradient, stops);
var streak = Track(_compositor.CreateMaskBrush());
streak.Source = gradient;
streak.Mask = _trailMask;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Image

@LegendaryBlair
Boliang Zhang (LegendaryBlair) merged commit fbff588 into main Oct 19, 2026
11 checks passed
@LegendaryBlair
Boliang Zhang (LegendaryBlair) deleted the niels9001/welcome-hero-tweaks branch October 19, 2026 03:12
Boliang Zhang (LegendaryBlair) pushed a commit that referenced this pull request Oct 19, 2026
â€Ķ streaks (#51367)

<!-- Enter a brief description/summary of your PR here. What does it
fix/what does it change/how was it tested (even manually, if necessary)?
-->
## Summary of the Pull Request

Polish for the new OOBE "Welcome to PowerToys" hero animation (#50873):

1. **Hover highlight**: replaces the rainbow/brand-gradient stroke on
tool tiles with a subtle Fluent-style hover: a faint fill plus a 1px
neutral stroke on the tile edge. In high contrast it uses
`SystemColorHighlight` with a 2px stroke.
2. **Parallax top gap**: the aurora dome could slide down during pointer
parallax and impact shake, leaving a gap between the blue background and
the top edge of the hero. The dome now extends 24px above the hero
(`DomeBleed`), so that gap no longer appears.
3. **Intro streaks**: the light trails that shoot out during the intro
had hard, rectangular edges. They now use a `CompositionMaskBrush` with
a radial falloff mask, so they have soft edges and a tapered tail.

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [ ] Closes: #xxx
<!-- - [ ] Closes: #yyy (add separate lines for additional resolved
issues) -->
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [x] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

Changes are limited to
`src/settings-ui/Settings.UI/SettingsXAML/Controls/WelcomeHero/`:

- `WelcomeHeroPalette.cs`: `Color[] Highlight` is replaced by
`HighlightFill`, `HighlightStroke` and `HighlightStrokeThickness` for
Dark, Light and HighContrast.
- `WelcomeHeroScene.cs`:
- The highlight shape reuses the tile's glass geometry and sits beneath
the icon. Ghost tiles have no highlight, and `SetHighlightedTile` is
null-safe.
  - Theme changes animate the highlight fill and stroke colors.
- `DomeBleed` offsets the dome and its center, and the intro dawn center
accounts for it.
- A new shared radial `_trailMask` masks the trail gradients.
`CreateTrailBrush` still returns the stops so theme updates keep
working.

No new strings, binaries or settings.

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed

- `tools\build\build.ps1 -Platform x64 -Configuration Debug` in
`src\settings-ui\Settings.UI`: passed (exit code 0, empty errors log).
- Manual: ran the Debug Settings build, opened **Welcome to PowerToys**,
watched the intro streaks, hovered over the tiles, and moved the pointer
to trigger the parallax. No automated tests cover this animation.

Copilot-Session: 16eac730-9023-44c4-8d02-358ace31b45c
(cherry picked from commit fbff588)
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

0.102 Product-Settings The standalone PowerToys Settings application Ready for review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants