Give the memory librarian three rising Z's with a brightness wave - #461
Merged
Conversation
The growing zzz worked but read as a text spinner. Three Z's climbing a staircase, with peak brightness travelling up them on a ~1s cycle, reads as the comic-book shorthand for sleeping instead. This is a chase, not the pulse the strip removed earlier. That one modulated a single glyph's opacity uniformly, so nothing moved and the eye read it as static. Here the bright spot changes POSITION, which carries motion the way marquee bulbs do even though no glyph ever changes shape. Uniform fading is what failed; travelling brightness is a different mechanism. Its own component rather than another AsciiSpinner variant. The two now share no implementation at all - CSS keyframes over three spans against a JS interval over one text node - so a variant prop would have been two disjoint render paths behind one name. AsciiSpinner and its frame module revert to the bar-only shape they had before the variant table, and the wiki strip is untouched: the contrast is how you tell which librarian a strip belongs to. Three details that will look arbitrary later, so they carry comments. The staircase is `transform: translateY()` and not sub/sup markup, which would shrink the font, change the glyph advance width, and grow the line box - breaking the ch grid the column depends on. The animation delays are negative and in an order that looks wrong (0, -2D/3, -D/3), because an element started x seconds in next peaks at duration - x, and a positive delay would park each Z at its base opacity until it elapsed. And the wave is opacity against the inherited colour rather than literal greys, so it respects dark mode and the accent and danger tints the settled rows use. The empty script block is required: svelte-check cannot synthesise a component declaration for a script-less .svelte file, and importers fail with an implicit-any error without it.
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
2 participants
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.
SYNOPSIS
The memory strip's growing
zzzbecomes three Z's climbing a staircase with peak brightness travelling up them on a ~1s cycle. Wiki keeps the bar.PURPOSE
The growing
zzzworked, but read as a text spinner rather than as sleeping. The comic-book shorthand is rising Z's, and the memory librarian's two passes are named after sleep stages (deep-sleep for slow-wave, rem for REM), so the motif is worth getting right.DESCRIPTION
How it behaved.
AsciiSpinnergrew az/zZ/zZZsequence on a 100ms JS interval, selected by avariantprop, with a frame table insrc/lib/ui/ascii-spinner.ts.What this changes. A new
<SleepSpinner>owns the memory strips;AsciiSpinnerand its frame module revert to the bar-only shape they had before the variant table. Wiki is untouched.Its own component, not another variant. The two now share no implementation at all - CSS keyframes over three spans vs a JS interval over one text node - so a
variantprop would have been two disjoint render paths behind one name. The variant table would also have collapsed to a single entry.This is a chase, not the pulse #454 removed. That one modulated a single glyph's opacity uniformly, so nothing moved and the eye read it as static. Here the bright spot changes position, which carries motion the way marquee bulbs do even though no glyph ever changes shape. Uniform fading is what failed; travelling brightness is a different mechanism. Worth stating plainly because "we removed a fade, this is a fade" is the obvious wrong read.
Notes:
transform: translateY()for the staircase, not sub/sup markup.<sub>/<sup>shrink the font (~0.83em) and usevertical-align, changing glyph advance width and growing the line box - which would break thechgrid and make the rows taller. Transforms don't participate in layout.animation-delays in an order that looks wrong (0, -2D/3, -D/3). An element startedxseconds in next peaks atduration - x, so those offsets put the peaks at 0, D/3, 2D/3 - travelling upward. Negative because a positive delay parks each Z at base opacity until it elapses, visible as a settling-in on cycle one.<script lang="ts">block is required. svelte-check can't synthesise a component declaration for a script-less.sveltefile; importers fail with implicit-any. It's the only script-less component in the repo, so it's commented against deletion.vite.config.tsgains oneenvironmentMatchGlobsentry. The new test mounts a component, and the jsdom list enumerates files by name - a file added after that sweep defaults tonodeand dies ondocument is not defined. Verified by removing the entry: all 4 tests fail that way..librarian-step-iconstays at3ch, so memory step labels sit slightly right of where they did pre-zzz. Intentional - it keeps the settled check/cross rows sharing one gutter with the spinner.Gate green: 2147 vitest, svelte-check, lint, build, knip.
Not verified in a browser - cloud session. The opacity swing (0.45 -> 1.0) reading as a travelling wave at 0.9rem, and the +/-0.15em staircase clearing the row leading, both want a look.
Generated by Claude Code