Site Motion Log 02: Header, Hero, and Scroll Reveal Timing

After fixing the first-visit intro, the next problem was timing.

If the header appears before the overlay is gone, the page feels rushed. If every block waits too long, the site feels slow. The final order is small but important:

1. The first-visit overlay covers the page.
2. The overlay starts leaving.
3. The homepage and header become visible.
4. The welcome text, calligraphy image, name card, and actions enter.
5. Lower sections reveal when the visitor scrolls.

The Header Waits

Header.tsx reads useHomeEntranceReady(). Before the homepage is ready, the header stays hidden:

const headerHidden = { opacity: 0, y: -16, filter: "blur(4px)" };
const headerShown = { opacity: 1, y: 0, filter: "blur(0px)" };

The brand pill, nav island, and control pill use tiny delays. The header feels placed on the page instead of suddenly pinned there.

The Hero Enters as a Group

Hero.tsx uses a few variant groups:

• heroVariants handles the overall stagger.
• itemVariants handles text, card, and buttons.
• imageVariants handles the calligraphy image.
• actionVariants handles the actions inside the card.

The animation uses opacity, vertical movement, and slight scale. It avoids animating layout properties, so the page stays steady.

The down arrow also has a rule. It is visible on the first screen, then fades out when the next content section enters the viewport:

homeContent.getBoundingClientRect().top >
  window.innerHeight * SCROLL_CUE_CONTENT_THRESHOLD;

Its job is only to say “there is more below.” Once that is obvious, it leaves.

Scroll Reveal Waits for the Intro

HomeReveal.tsx uses useInView, but it also waits for the homepage ready state:

const shouldReveal = reduceMotion || (homeEntranceReady && isInView);

This fixed a bug where lower homepage sections did not animate after the first load, but did animate after returning from another page.

The observer and the intro now share one timeline. First the intro finishes. Then scroll reveal can begin.

The Lower Sections Stay Light

The homepage sections below the hero still have small interactions:

• Recent posts change line and text color on hover.
• Recently played has a slow record spin and hover marquee for long titles.
• Recent photos lift slightly on hover.

These are not loading animations. They are small signs that the content can be explored.

Takeaway

Homepage motion is mostly about order.

The overlay leaves. The header and hero enter. Lower sections reveal on scroll. With that chain in place, the site feels calm instead of busy.