A red rectangle and a black one grow from the top left corner, then the next page grows over them.
Nothing moves until the next page is ready; if that takes a while, a loader shows at the cursor. Then a red rectangle grows from the top left corner until it covers the screen, a black one a beat behind it, and the next page a beat after that, in a window growing from the same corner, the page inside sliding a little into place. Going back, the same movement plays backwards.
Each rectangle is a panel cut with clip-path. The next page in the window is a still copy at full size, which the window uncovers.
Inspired by a post by Oli on X.
- File
src/transitions/corner.tsIts settings are at the top of the file.