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

Open
niels9001 opened 5:09pm on October 16, 2026 wants to merge 187 Δ into microsoft/powertoys main from
niels9001/welcome-hero-tweaks

Pull Request Overview

  • Opened on October 16, 2026
  • Status Open
  • Commit count 1 with first commit October 16, 2026

Total Delta

187 Total Diff Delta

Open Days

Open 18 weekdays

Test Delta

0 Diff Delta in Test Files
Breakdown by Phase

How long has this pull request spent in each phase of its lifecycle?

Fraction of total time Business days Phase
 
0.0 days Authoring 1 commit before pull request opened for review
 
0.0 days Awaiting first review
 
18.3 days Revising work with 0 commits in response to 1 review that left 3 comments

Total time for pull request still awaiting merge (longer than repo's target): 18.3 business days

Author avatar

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

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
    <!-- - [ ] 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



  • [ ] 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.

Comments Threads Pending Resolution

ljharb reviewed on October 16, 2026
ljharb left a comment

### 🟡 Changes recommended

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

1 open finding

- High severity [Use a supported surface brush for the trail mask](https://github.com/microsoft/PowerToys/pull/51367#discussion_r4296237617) · New

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.

src/settings-ui/Settings.UI/SettingsXAML/Controls/WelcomeHero/WelcomeHeroScene.cs
1063
            }
1064
1065
            var streak = Track(_compositor.CreateMaskBrush());
Unspecified Git Hub Copilot Model
1066
            streak.Source = gradient;
Unspecified Git Hub Copilot Model
1067
            streak.Mask = _trailMask;
Unspecified Git Hub Copilot Model

Resolved Comment Threads

No resolved comments have been left on this PR.