Skip to content

feat(site): Huginn flies in and draws in the page - #13

Merged
craig-o-curtis merged 2 commits into
mainfrom
feature/huginn-on-entrance
Oct 30, 2026
Merged

craig-o-curtis merged 2 commits into
mainfrom
feature/huginn-on-entrance

Conversation

@craig-o-curtis

@craig-o-curtis craig-o-curtis commented Oct 30, 2026 •

Copy link
Copy Markdown
Contributor

What

On the home page Huginn now opens the visit, and his flight draws in the page.

  • The fly-in. He comes in over the top edge at the far left, close and wide: about a third of a desktop screen, at most half of a phone's. He swoops down and away, pulls out low, then leaves in one of three ways: circling back to the left, on into the background, or off to the right. Each load varies the line, and some add a roll, a steeper dive, wide circles or an S-bend.
  • Flown, not drawn. A simple glider steers through the waypoints under gravity, with drag on a raven's glide polar (best glide about 1 in 9 at about 8.5 m/s) and no more lift than his wings bear (2 g). His speed, turns and pull-outs are ones a raven could fly, and he flaps only when he is slow or climbing.
  • Big and unhurried up close. Time runs slower the nearer he is, as wildlife film shows big birds: a quarter speed at about 3 m, easing to real time by about 12 m. He looks large and calm, and his speed across the screen stays steady.
  • Drawing in the page. The header, title, intro and cards wait, hidden, until he reaches them. The aurora sweep then draws each one in the direction he is flying, paced to trail just behind him. The header draws in as his wing sweeps it on the way in.
  • Clear of the mountains. Every flight keeps at least 2.5° above the skyline, eased along the path so it never kinks. At Ísafjörður the mountains fill the left of the view, and he used to fly in front of them.
  • After the fly-in. The fly-in ends once he has left the frame or is a speck in the distance. Then the existing passes and lazy circles come every 15–20 s (was 27–33 s). A flight that can't be planned for the current view is tried again in 1–2 s instead of leaving the sky empty for a whole gap.
  • Switching sky plays a fresh fly-in, aimed at the same page positions as the first.

Fallbacks

If he can't fly, the existing entrance plays instead. That covers reduced motion, no OffscreenCanvas or WebGL, and a tab in the background at load. The same happens if he hasn't reached the first item within 4 s. A page-side backstop also draws in anything still hidden 8 s after the first item.

How

  • aurora.raven.ts: entrance() picks waypoints in screen space and fly() flies them. keptClearOfSkyline() lifts every path above the skyline. Distance-based slow motion lives in timeScaleAt().
  • aurora.worker.ts: projects him onto the page each frame during the fly-in and posts a brush message as he reaches each box, with his heading and on-screen pace. It runs at 60 fps only while he is close and frames keep up, and the raven texture is 512 (was 256).
  • Aurora.astro: sends the boxes' positions, applies the sweeps, and starts the worker straight away when the page is waiting for him.
  • Base.astro: a small inline script hides the page items (ng-await) only when motion and OffscreenCanvas are available. It adds the diagonal ng-brush-pane / ng-brush-text sweeps.

The main thread does no per-frame work. It handles a handful of messages and one style update per item.

Checks

pnpm lint, pnpm format:check, pnpm check and pnpm build all pass. Flights were simulated against both real skylines on desktop and phone sizes: size on screen, speed across it, frame-to-frame smoothness, clearance above the skyline, and the 15–20 s cadence. The fly-in was reviewed in the browser throughout.

On the home page Huginn now opens the visit. He comes in over the viewer's
shoulder from just past the top-left corner, close enough to fill a good
part of the screen, glides out over the page with a few slow, deep
wingbeats, swoops low to the bottom right and leaves: circling back to the
left, on into the background, or off to the right. Each load varies the
line, and some add a roll, a steeper dive, wide circles or an S-bend.

The header, title, intro and cards wait, hidden, until he reaches them. As
he does, the aurora sweep draws each one in the direction he is flying,
paced to trail just behind him. If he cannot fly (reduced motion, no
OffscreenCanvas or WebGL, a background tab) or has not reached the first
within 4 s, the usual entrance plays instead.

Switching sky plays a fresh fly-in on the new one. After the fly-in, flights
come every 20 to 25 s, and a flight that cannot be planned for the view is
tried again in a second or two instead of leaving the sky empty for a whole
gap. The worker runs at 60 fps while he is close, and his texture is twice
the size so he stays sharp up close.
The fly-in is now flown rather than drawn. A simple glider steers through
the waypoints under gravity, with drag on a raven's glide polar and no more
lift than his wings bear, so his speed, turns and pull-outs are ones a raven
could fly, and he flaps only when he is slow or climbing. He comes in over
the top edge at the far left, close and wide (about a third of a desktop
screen, at most half of a phone's), swoops down and away and leaves. Up
close, time runs slower with his distance, as wildlife film shows big birds,
so he is large and unhurried and his speed across the screen stays calm. The
fly-in ends once he has left the frame or is a speck in the distance.

Every flight now keeps at least 2.5 degrees above the skyline, eased along
the path so it never kinks: at Isafjordur the mountains fill the left of
the view and he used to fly in front of them. Flights come every 15 to 20 s.
The header is drawn in as his wing sweeps it on the way in, and the fly-in
runs at 60 fps only while he is close and the device keeps up.
@craig-o-curtis
craig-o-curtis merged commit 4f71ac0 into main Oct 30, 2026
1 check passed
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