Live plot rewrite, consistent plot sizing, and copy fixes - #4
Merged
Conversation
Lead with what PlotFlow is (pen-plotter art house, one-continuous-line mobile suit editions) and the process, while keeping the local-run, deploy, and structure notes. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS
…low/plotflow.github.io into claude/nifty-noether-TWhTu
Compute each suit's bounding box at runtime (getBBox) and crop the viewBox to a padded version, so every edition fills its card and the live-plot stage at a consistent scale instead of being letterboxed in the original canvas. Fix the paper bed to a single 4:3 shape so the canvas is consistent across designs, and reset the animation clock on load so the live plot always starts from a blank sheet. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS
Hide the path before swapping suit data so the old dash values don't flash the full path for a frame. Rename "PLOTFLOW ART HOUSE" to "PLOTFLOW" in all footer copyright lines. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS
The animated hero path used vector-effect:non-scaling-stroke, which measures stroke-dasharray in screen pixels while getTotalLength returns user units. The mismatch made the full path render as one solid dash (visible immediately) with the trace drawing over it. Drop non-scaling-stroke from the animated path and set its width in user units per-load so it stays ~1.2px. Static shop-card paths are unchanged. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS
Replace "art house" with "studio" in the hero sub, contact page, README, and design system doc; drop "ART HOUSE" from the README copyright line. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS
The suit paths contain thousands of M-command subpaths, which the CSS stroke-dashoffset reveal renders all at once — so the whole design appeared instantly instead of being traced. Replace the dash technique with progressive canvas stroking: walk the geometry with getPointAtLength, lifting the pen at subpath jumps, so ink only appears where the pen has passed. The SVG path is kept for geometry only (stroke:none) and the pen reticle stays on top. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS
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.
Summary
Iterates on the homepage following local testing.
Live Plot — now actually draws the suit
M-command subpaths, so the CSSstroke-dashoffsetreveal rendered the whole design at once instead of tracing it.getPointAtLength, lifting the pen at subpath jumps, so ink only appears where the pen has passed. SVG path is kept for geometry only; the pen reticle stays on top.Plot sizing — consistent across editions
viewBoxto its bounding box (getBBox) + padding so every edition fills its card and the live-plot stage at a consistent scale, instead of being letterboxed in the mostly-empty original canvas.Copy
No changes to the Acquire/checkout buttons or any cart/payment logic.
https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS
Generated by Claude Code