Skip to content

Add view transitions to the shell - #567

Open
AllTerrainDeveloper wants to merge 1 commit into
trunkfrom
add/view-transitions
Open

Add view transitions to the shell#567
AllTerrainDeveloper wants to merge 1 commit into
trunkfrom
add/view-transitions

Conversation

@AllTerrainDeveloper

@AllTerrainDeveloper AllTerrainDeveloper commented Aug 12, 2026

Copy link
Copy Markdown
Collaborator

Animates the moments the shell changes state, using the browser's View Transitions API.

A transition is CSS, not JavaScript — the player starts one carrying a view-transition type, and assets/css/view-transitions.css owns every keyframe. A plugin ships one as a registry entry plus a stylesheet, with no animation code and no teardown.

What's in it

Two settings (OpenStation Preferences → Effects), one registry partitioned on a def's scope:

  • Screen transitions — 25, for switching Space and for appearance changes.
  • Window transitions — 7, for a window opening, closing, minimizing, restoring or maximizing. On open the window morphs out of whatever you clicked, inferred from the last pointerdown rather than threaded through every caller — so it works for launchers that don't exist yet, including a plugin's (data-os-vt-launcher).

Cross-document transitions are separate and always on: chromeless.css opts framed admin pages in, so navigating inside a window animates instead of flashing blank.

Both settings default to none, and every wired surface keeps its original un-animated code path behind a hasActiveViewTransition() guard.

How to test

Turn something on in Preferences → Effects. Picking a transition plays it immediately; "Play it again" replays.

  1. Windows — set Window transitions to Morph, then click a wallpaper icon or a dock tile. The icon should stretch into the window. Then close it, minimize it, click its dock tile to bring it back, and double-click a title bar to maximize. Try Genie, Slam, Unfold for different character.
  2. Desktops — set Screen transitions to Cube, then press Left / Right to change Space. Direction-aware ones should mirror between the two.
  3. Appearance — set Screen transitions to Ripple, then swap the wallpaper (or the accent, or a desktop theme). The new look should flood out from where you clicked.
  4. In-window navigation — open Posts in a window and click around (Posts → Add New → back). Independent of the settings above.
  5. Reduced motion — turn it on at the OS level; everything becomes instant, including fix: resolve 3 PHPUnit failures + 1 error on trunk test code #4.

Three deliberate non-animations, so they don't read as bugs: session restore at boot, keyboard/programmatic opens (no click to morph from), and prefers-reduced-motion.

Chrome/Edge 126+ for the full path; older engines degrade a step at a time rather than breaking.

🤖 Generated with Claude Code

Open WordPress Playground Preview

A new `src/view-transitions/` layer built on the View Transitions API.
Transitions are CSS, not JavaScript: the player starts a transition
carrying a view-transition *type* and `assets/css/view-transitions.css`
owns every keyframe, so a plugin ships one as a registry entry plus a
stylesheet.

Two settings, one registry partitioned on a def's `scope`:

- Screen (25) — switching Space, and any appearance change.
- Window (7) — a window opening, closing, minimizing, restoring or
  maximizing. On open the window morphs out of whatever the user
  pressed, inferred from the last pointerdown rather than threaded
  through every caller.

Separately, `chromeless.css` opts framed admin pages into
cross-document transitions, so navigating inside a window animates.

Both default to `none`; every wired surface keeps its original
un-animated path behind a `hasActiveViewTransition()` guard.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant