Add window reveal animations - #459
Merged
Merged
Conversation
Windows uncover their content with a clip-path animation when they finish loading, instead of fading in. Twelve reveals to choose from in OS Settings → Effects, plus a speed setting. The animation runs on a layer in the shell that sits above the window content without wrapping it, so it never interferes with the page it is revealing. Iframe and native windows behave the same. Themeable via four tokens (surface colour, edge colour, edge thickness, duration), and themes can recommend a reveal and a speed in their manifest. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Six equilateral wedges tile a hexagon over the window and slide tangentially. Their shared edges offset by the same amount, so they stay flush the whole way while a centred hexagonal aperture opens between them. Rendered as SVG rather than clip-path layers: a lens iris has a cyclic overlap that a linear paint order cannot represent. Adds a `render` escape hatch to the reveal API for effects layers cannot express, plus per-layer colours and multi-layer defs. Reveals now default to None, so nobody gets one they did not choose. Two fixes worth noting: - The renderer's play callback lived in module-level state, so the arm (window-system bundle) and the play (shell bundle) used different copies. Reveals vanished on window open while reload still worked. Now shared-store backed. - Rendered hosts no longer take the surface token's background, which had them uncovering an opaque rectangle instead of the page. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
epeicher
approved these changes
Jul 31, 2026
epeicher
left a comment
epeicher
left a comment
Collaborator
There was a problem hiding this comment.
Thanks for adding those animations, they look cool! I have tested them and they work as expected. I have also reviewed the code and I have not found any blockers. LGTM!
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.
Example.mov
Windows now uncover their content with a clip-path animation when they finish loading, instead of fading in. It plays right after the loading spinner clears — and on reloads and in-window navigation too, same as the spinner does.
Twelve reveals to pick from in OS Settings → Effects, plus a speed setting next to it. Off by default, so nobody gets one they didn't choose.
Sweep · Rise · Diagonal · Iris · Diamond · Curtain · Shutter · Blinds · Slats · Mosaic · Radar · Camera shutter
The animation runs on a layer in the shell that sits above the window content without wrapping it, so it can never interfere with the page it's revealing. Iframe and native windows behave identically.
Camera shutter is a real iris: six equilateral wedges tiling a hexagon over the window, sliding tangentially. Their shared edges offset by the same amount, so they stay flush the whole way while a centred hexagonal aperture opens between them. It's rendered as SVG rather than clip-path layers, because a lens iris has a cyclic overlap — every leaf over the next, the last back under the first — that a linear paint order can't represent.
Theming
--desktop-mode-window-reveal-surface--desktop-mode-window-reveal-edgetransparent(off)--desktop-mode-window-reveal-edge-thickness--desktop-mode-window-reveal-durationThe edge is a band that travels with the animation's leading edge, drawing whatever shape the active reveal has. It's off unless a theme colours it, and costs nothing while it is.
Themes can also recommend a reveal and a speed in their manifest, so the Themes tab button is now "Apply X's recommended layout and effects".
For plugin authors
wp.desktop.registerWindowReveal()takes afrom/toclip-path pair, alayersarray for effects whose parts overlap, or arender()that builds the DOM outright while the shell keeps the timing. Recipe indocs/examples/window-reveal.md.Testing
Turn a reveal on in OS Settings → Effects and open or reload a window. Reloading a cached window exercises the fast path where the spinner never appears.
2681 JS tests and 1700 PHP tests pass. The reveals have been checked visually.
🤖 Generated with Claude Code