fix(hero): center the pickets board (columns flip in place, never slide) - #219
Merged
Conversation
…s flip in place, never slide The previous no-slide fix anchored every title to one journey-wide LEFT column, which LEFT-HUGGED short titles: WELCOME rendered jammed at the left edge with ~16 blank tiles trailing, clearly off-center. The right model: every board COLUMN is a static physical slot, and each title is CENTERED on its own width. As the scroll front crosses a slot, that slot card-flips between its current word's glyph and the upcoming/previous word's glyph at that same column (a letter↔letter flip in the shared middle, a letter↔blank flip at the edges as a centered word grows/shrinks). So a scene change is a column-by-column flip cascade, never an instant positional slide — verified: WELCOME → DISCOVER MY CRAFT assembles left to right, each column flipping (D..DI..DISC WELCOME → DISCOWELCOME → ... → DISCOVER MY CRAFT). Removed the anchorWidth machinery (prop, STUDIO_BOARD_ANCHOR_WIDTH, the left-hug centering); toSharedGrid + wrapToGrid now center each text on its own width. The existing front-flip render already produces per-column flips, so centering is the only change needed. Tests: replaced the fixed-column regression test with two that match the new model — `[pickets] every scene title is CENTERED` (proven fail-before: WELCOME leftPad 1 vs rightPad 16 when left-hugged) and `[pickets] a scene change FLIPS column by column` (asserts many distinct intermediate boards = a flip cascade, not a ~2-board instant slide). Made the FREEZES test poll-for-stable to remove a catch-up-loop timing race. Board cluster green; 6 visual baselines unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ds (per this session's fix) Update maintain-homepage-hero to reflect the final Vestaboard behavior: - Gotcha 11 rewritten: the "centered AND no sideways slide" model (every column is a static slot that card-flips its glyph; nothing moves horizontally), plus the TWO rejected approaches that must not return — a per-crossing shared width (letters jump between crossings, the "sentences shifting left" bug) and a journey-wide anchorWidth (left-hugs short titles like WELCOME). The answer is plain per-title centering. Names the guarding tests. - Gotcha 24 (the sweep contract) gains an ALIGNMENT trap (e) cross-referencing gotcha 11, and lists the new "FLIPS column by column" guard. SplitFlap lives in the blog's src/components (not @omars-lab/blog-ui), so maintain-homepage-hero is the sole owning skill; modify-blog-ui-component does not apply. Hero-anchors validator still green (53 symbols). Co-Authored-By: Claude Opus 4.8 <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
1 participant
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.
Fixes the Vestaboard on the pickets homepage hero: short titles were LEFT-HUGGED (WELCOME jammed at column 1 with ~16 trailing blank tiles, clearly off-center) — a side effect of an earlier no-slide fix that anchored every title to one journey-wide left column.
The model
Every board COLUMN is a static physical slot, and each title is CENTERED on its own width. As the scroll front crosses a slot, that slot CARD-FLIPS between its current word's glyph and the upcoming/previous word's glyph at that same column (letter↔letter in the shared middle, letter↔blank at the edges as a centered word grows/shrinks). Nothing slides horizontally — only each slot's glyph changes, and only by a flip.
Verified live: WELCOME is now dead-center (leftPad 8, rightPad 9), and WELCOME → DISCOVER MY CRAFT assembles left-to-right column by column (
D..DI..DISC WELCOME → DISCOWELCOME → … → DISCOVER MY CRAFT).Two dead ends removed (do not reintroduce)
anchorWidth→ LEFT-HUGS short titles (the bug this PR fixes)Both
toSharedGridandwrapToGridnow center each text on its own width; theanchorWidthprop +STUDIO_BOARD_ANCHOR_WIDTHare removed.Tests
[pickets] every scene title is CENTERED— proven fail-before (WELCOME leftPad 1 vs rightPad 16 when left-hugged)[pickets] a scene change FLIPS column by column— asserts a real flip cascade (≥8 distinct intermediate boards), not a ~2-board instant slideSkill docs updated (maintain-homepage-hero gotcha 11 + gotcha 24 cross-ref).
🤖 Generated with Claude Code