State now carries an array of custom patterns instead of one slot.
Each gets a unique id ("custom-<n>") and a user-editable title; they
render as full tiles in the reel between the presets and the
"+ Make your own" button.
Reel behaviour:
- Clicking a preset tile still selects it for play.
- Clicking a custom tile opens the editor pre-seeded with that motif
(rename, tweak geometry, re-download, or just press "Use this
motif" to re-select for play).
- "+ Make your own" always opens an empty editor so a second motif
can be drawn without overwriting the first.
Editor gains a Name input at the top. Saving writes the trimmed title
back onto the motif; downloads use it in the filename; parsed uploads
restore whatever title was baked into the JSON. Shared replay URLs
for custom motifs hydrate into a new "Shared motif" tile on the
viewer's reel rather than clobbering an existing custom.
Intro blurb split: the "editor only supports connected designs" and
"browser will not save your designs — download them separately"
sentences are now a single paragraph in foreground colour so the two
caveats read as a highlighted note.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
Hydration now pre-arms celebratedRef so the completion effect skips
both the confetti and the replayIdx=stitches.length snap. The viewer
lands on an empty fabric with the full tour queued up and drives
playback from the replay controls — no spoiler, and no party popper
on someone else's accomplishment.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
- Completion now fires confetti and leaves both fabrics on the final
tour (replayIdx = totalStitches, paused). The user drives the
replay from the control strip.
- Exported GIF frames render at 400 ms each (vs 200 ms on-screen) with
a 1200 ms hold on the first and last frame — half speed by default,
easier to follow when a platform auto-loops the preview.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
Adds a "Save GIF" button to the replay panel. On click, the component
renders each step of the replay to an offscreen canvas (both fabric
panels side-by-side, FRONT/BACK labels, active-side border, dashed
pattern guides for undrawn edges, drawn stitches in thread colour,
dashed start marker, red current-vertex dot) and feeds the frames
through gifenc — dynamically imported so the ~8 KB chunk only loads
when the user actually exports.
Frame timing: 200 ms between stitches, 900 ms hold on the first and
last frames. Palette is quantised to 64 colours per frame, which keeps
a Snowflake tour (~53 frames at 684×376) around 150–250 KB. The
button flips to "Encoding…" while busy and a sonner toast reports the
file size on success or the error on failure.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
A completed tour can now be serialised into a URL-safe base64 blob:
pattern id (with the custom pattern's edges inlined when the motif was
made in the editor), the start vertex, and the sequence of to-points.
Sides alternate so they don't need encoding. The payload lands in
?replay=<...> and is read back on mount — a hit on the URL hydrates
state, marks the tour complete, and the existing completion effect
picks up from there (confetti + autoplay).
Two new buttons in the replay panel:
- "Copy link" writes the URL to the clipboard with a sonner toast,
- "Share" opens an X intent pre-filled with the motif title, stitch
count, and the URL.
Mounts a local SonnerToaster on the component so the toast actually
shows (sonner's Toaster was never wired up at the layout level).
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
On completion, the green banner is replaced with a replay panel:
skip-to-start / prev / play / next / skip-to-end buttons, a scrubber
showing "n / total" stitches, and a 0.5× / 1× / 2× speed toggle.
Autoplay kicks off immediately after the confetti so the user sees
the tour traced out once by default; pressing play again after
reaching the end rewinds and replays.
Rendering uses effective stitches/drawn/currentVertex/activeSide
derived from replayIdx so both fabrics animate together. The side
badges and the running "n / total" counter track the replayed
position too. Undo and Reset stay wired to the underlying stitch
list and tear down replay state when they fire.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
- New 1200×630 og-image.png with the editorial palette, a kasuti-style
snowflake motif, and the correct title/tagline.
- Fixed the title-template suffix "| Hatch" → "| Interactives" in
BaseHead.
- InteractiveLayout now checks public/og/<slug>.png at build time and
passes it through as the preview image; falls back to the default
otherwise. Ships a dedicated og/kasuti.png showing the front/back
snowflake paired up.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
Replaces the terse graph-theory equivalence line with an invitation to
experiment with the editor — mentions picking a premade motif or
making / saving / sharing your own, and flags that disjoint designs
aren't supported yet.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
Single defer'd <script> in BaseHead so it lands on every page
(homepage, theme pages, full interactives, embeds, admin, blog).
is:inline keeps Astro from processing it.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
Adds a centered footer under the dead-end banner thanking Priyam and
linking to the Wikipedia page, the rocksea tutorial, the IITGN
course, Guddi Crafts, and the Instagram handle.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
Lifted the legal-stitches check into a deadEnd flag shared by the
banner and both fabric panels. When the user runs out of legal moves
on the active side, both SVG canvases fade to bg-muted (a light grey)
with a smooth transition — a passive cue to match the existing amber
banner.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
isNeighbor now also accepts unit-diagonal steps, and the editor adds
two diagonals per cell on top of the orthogonal edges. Diagonal hit
areas are rendered underneath the orthogonal ones so edge clicks
still prefer the straight segment and centre-of-cell clicks hit the
diagonal. Uploaded motif files with diagonal segments pass
validation.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
The active-side current vertex is red (primary) again; the green is
reserved for the go-indicators. A ring pulses briefly (SMIL animate
on r + opacity, keyed on side+vertex) each time the cursor lands,
to draw the eye — browsers won't let us move the OS mouse pointer.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
UI cleanups:
- MiniPreview fits every motif into a 60×60 box (Snowflake no longer
overshoots its card).
- Reel replaces the native overflow scrollbar with a scroll container
plus left/right chevron buttons and edge fades that appear only when
there is more content in that direction.
- Legal-next vertex markers are green instead of red; the current
vertex renders green on the active side and muted grey on the
inactive side (making the side-flip obvious without a jump).
Thread colours:
- Each fabric panel now has an extra swatch opening the native colour
picker, so the user can dial in any thread colour beyond the five
presets. The swatch shows a conic rainbow and highlights when the
current colour isn't one of the presets.
Editor:
- Validation simplified to connectivity only (the alternating Eulerian
tour on the doubled graph exists for every connected base graph, so
odd-degree vertices don't actually block solvability — the extra
warning was misleading).
- Download button exports the current motif as a small JSON file
({kind: "kasuti-pattern", version: 1, edges: [...]}); Upload reads
one back in, validates structure (orthogonal unit segments only,
fits in the editor grid), and loads it centered for editing.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
Adds Rose, Totem, Figurine, and Snowflake to the motif reel — inspired
by patterns 1/2/4 on the reference sketch and the red snowflake
sample. Each is an Eulerian graph so an alternating tour exists
(36/24/34/52 stitches respectively).
Appends a "+ Make your own" tile at the end of the reel that opens a
dialog-based pattern editor: click between dots on a 14×14 grid to
toggle stitch segments. The editor reports connectivity and Eulerian
status live and only enables "Use this motif" once the pattern is
connected. The saved custom pattern is centered into the main grid
and selected immediately.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
Trace traditional Kasuti embroidery motifs so the design appears
identical on both sides of the fabric. Two side-by-side 20×20 SVG
fabrics (front/back); the active side flips after every stitch, and
only legal unvisited pattern edges from the current vertex are
clickable. Seven Eulerian motifs in the top reel (Square → Temple),
per-side thread colour pickers (default black on front, red on back),
undo / reset, completion detection + canvas-confetti.
Implemented from the idea in admin-data.json; idea removed and
replaced with a note on the slug.
https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
T9: The center avg display is now a <button>. Clicking it toggles
between showing avg × 4 (with 'π ≈ 3.1416' reference) and showing
plain avg (with 'π/4 ≈ 0.7854'). Label flips accordingly. Subtle
background hover wash to hint at interactivity.
T10: Added a second instruction line below 'Click on any of the
completed runs to view the full sequence.' calling out the avg
toggle. Both lines sit in a shared centered text-muted-foreground
container with small vertical gap.
T5: Added a centered <footer> below the Card crediting Jim Propp's
paper, the LinkedIn post, and Arghya Dutta — markdown links rendered
as anchor tags with target=_blank rel=noopener noreferrer.
T6: Reset button shows a mono ({stoppedCount}/{n}) suffix while any
run is still active; the suffix disappears once all runs stop.
T7: Tile clickability is now per-run (run.stopped) instead of gated
on allStopped. Since stopped runs are immutable, the detail Dialog
stays accurate while unrelated tiles keep ticking.
T8: Added a small instruction note between the header and the tile
grid: 'Click on any of the completed runs to view the full sequence.'
The old 'All runs complete' banner is reduced to the discarded-runs
callout only.
Small black dot on the H/T row at left: (H / total) * 100%. The
midpoint corresponds to H = T, so the dot crosses the middle exactly
when a run hits the stopping condition (H > T). Discarded runs end
the simulation with their dot still left of center.
T1: MAX_TOSSES_PER_RUN is now 5000.
T2: Tiles in progress past 500 tosses wear a progressively darker
amber wash (units of 500, up to 9 levels). Completed runs stay green.
T3: Runs that hit the cap are now flagged discarded. They carry a red
wash and an italic 'discarded' footer, are excluded from avg × 4, and
the summary / detail dialog note how many were dropped.
T4: Added a grey H/T header strip to each tile showing the running
heads count on the left and tails count on the right.
neighbor-sum-avoidance (T2-T6):
- Start button now reads just "Start" (no mode suffix).
- Available numbers and shuffled preview arrangements render pre-start
so the arena isn't empty while the user is still deciding.
- Mode switch + count slider stay mounted once active; they're just
disabled, so starting no longer causes a layout jump.
- Guided-mode instructions expanded to call out light grey edges, red
violation arcs, and the green valid-neighbor line explicitly.
- Draggable numbers honor isActive for the draggable attribute and
onDragStart, showing opacity-60 + cursor-not-allowed when locked.
computing-pi (new interactive under Miscellany):
- N parallel first-passage simulations: toss until heads > tails,
record the fraction. Average × 4 converges to π.
- Header row: runs slider | live average × 4 | Start/Reset.
- Tile grid uses a mask-gradient marquee so long sequences scroll
their tail while staying readable.
- Click any tile once all runs complete to see the full toss sequence
in a Dialog.
- Safety cap of 1000 tosses per run (first-passage time has infinite
expectation, so without the cap a pathological run could block).
- Registered in interactives.ts + InteractiveRenderer + the parallel
interactive-components map. Filled in three-bank-accounts in the
latter while there, since it was missing.
admin-data.json updated to mark T2-T6 done with remarks, remove the
implemented Computing Pi idea, and add an implementation note.
Agents processing todos/ideas from admin-data.json should mirror them
as cards on the author's Fizzy board. Slug → tag, progress → Review
column, staging branch link in the card description. PAT is read
from FIZZY_PAT env var; never hardcoded.
- Replace literal admin password with a pointer to where it lives and
the ADMIN_PASSWORD env var override.
- Add a design section covering the shadcn-first approach, OKLCH
design tokens, mandatory dark-mode pairing, typography pairing
(Castoro serif display + Imprima/Geist sans), radius scale, motion
libraries and reduced-motion handling, and the tab/card/alert
patterns that published interactives tend to share.
