Repository navigation
Animate the website: typed tagline, key field and tile demos - #31
Merged
Merged
Conversation
Give keyloom.net the kind of life omarchy.org has, in Keyloom's own vocabulary of keys. The hero types its tagline under a caret while a field of loose keycaps across the top of the hero presses the matching letter as each one lands. Keys under the headline are faint so the words stay readable; the ones beside it show more. A key sinks and lights under the pointer or a finger, one is pressed on its own now and then, and each key hangs on a spring, so when the page starts or stops scrolling they lag or overshoot, tilt, bounce and settle back. The eyebrow, headline, lead, button and recording rise in with a stagger, and the glow breathes. Each feature tile scrolls in and loops a short demo while on screen: a tap and then a hold, a layer switching off and on, a chord pressed in turn, the profile dot moving, F-keys lighting with their readout. The loops run on one number, --lit, so a browser that never runs them shows the still illustration. The step numbers are pressed in turn, the brand keycap presses, install commands fade in line by line, and the copy button's tick pops. Everything is gated on scripting and prefers-reduced-motion: reduced motion gets a plain headline, no key field and no loops. The headline keeps a hidden copy for assistive technology, and typing waits until the page is visible. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
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.
Summary
Gives keyloom.net the kind of life omarchy.org has, in Keyloom's own vocabulary of keys.
--lit, and a tile's resting look is its loop's first frame, so a browser that never runs them shows the still illustration.Guardrails
Everything is gated on scripting and
prefers-reduced-motion: reduced motion gets a plain headline, no key field and no loops, and nothing moves on its own. The headline keeps a hidden full-sentence copy for assistive technology. Typing waits until the page is visible, so a page opened in a background tab doesn't type to nobody. No build step was added.Verification
Checked in a browser at phone (375), tablet (768), laptop (1024) and desktop (1440) widths: no console errors, reveals fire on scroll and from the nav links, the loops run only while a tile is on screen, pointer and touch press the keys, and the scroll springs swing up to about 20px and are back in place within about 1.6s.
cargo fmt,clippy -D warningsandcargo test(335 passed) are green; no Rust changed. No product docs needed updating.