Short answer: The rice paper is the page background, so it is there for the whole scroll. The plum in the lower right is not fixed to the browser. It is placed with bottom and right against a box the theme has already sized to the window. Resize the window and that box’s bottom edge moves, so the branch stays in the corner. Scroll, and the box moves with the page, so the branch stays on the first screen and does not follow the corner down.
The paper
The homepage, hoho.live, paints body.home with #f3eee6. A fiber drawing, home-paper-grain.svg, repeats every 280 pixels. The header, the opening, and the footer normally wear a translucent white, the theme color raft-bg-alt. That utility sets its background with !important, so the homepage clears it the same way. With the veil gone, the paper shows through those bands.
The two paintings are not part of this. They are the original uploads. The theme only puts a mount around the img: padding, a lighter paper, a thin ink line, and a soft shadow.
Three drawings, two mechanisms
The blossoms are ink line drawings. The branch is #5c4636. The flowers are #c26148, the same cinnabar as the band at the bottom of the page.
A short sprig sits above the large heading. It is a ::before on that heading, in normal flow, so it travels with the title.
The corner branch is the same file twice. One copy uses top and left. The other uses bottom and right, turned over with scale(-1, -1). Both are absolutely positioned on .wp-site-blocks. Below 1320 pixels both are hidden: the side margins are gone, and a branch there would sit on the words.
The corner branches are the ones that move in the odd way. The sprig does not. It is in the flow.
A box the height of the window
The theme already contains a short-page footer trick. The site wrapper is a column flex, exactly as tall as the window, and the footer is pushed to the end of that column:
html, body { height: 100%; }
.wp-site-blocks {
display: flex;
flex-direction: column;
height: 100%;
}
footer { margin-block-start: auto; }height: 100% here is the window, not the document. On a page taller than the window the wrapper stays one window tall. The rest of the content overflows. Overflow is visible, so nothing is clipped. The box simply does not grow. On the homepage that box is about one viewport high while the content is more than twice that.
The homepage makes the wrapper position: relative. An absolute branch is then placed against this box, not against the document and not against the viewport.
body.home .wp-site-blocks::after {
position: absolute;
right: 0.6rem;
bottom: 1.5rem;
transform: scale(-1, -1);
}bottom: 1.5rem means one and a half rem up from the bottom edge of that window-tall box. The sections of the page are z-index: 1. The branches are z-index: 0, so the words and the paintings sit above the flowers.
Resize and scroll ask different questions
Resize changes the window. The box’s height is the window, so its bottom edge moves. The branch is tied to that edge, and it stays in the screen’s lower right.
Scroll does not change the box. It moves the box up the page. The branch is not position: fixed, so nothing pins it to the viewport. It stays on the bottom edge of the first screen and leaves the window with that screen. The browser’s lower right, now showing a later part of the page, stays empty.
position: fixed would have done the other thing. The branch would have remained in the corner for the whole scroll. That is the effect this page does not use.
The paper does not leave with the branch. It is a background on the body, not an element with one coordinate, so scrolling still shows paper. The branch is one element, and it has one place.