Repository navigation
feat(site): Huginn flies in and draws in the page - #13
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
On the home page Huginn now opens the visit, and his flight draws in the page.
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 andfly()flies them.keptClearOfSkyline()lifts every path above the skyline. Distance-based slow motion lives intimeScaleAt().aurora.worker.ts: projects him onto the page each frame during the fly-in and posts abrushmessage 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 diagonalng-brush-pane/ng-brush-textsweeps.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 checkandpnpm buildall 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.