Skip to content

web: a sketched caveman mascot, and clearer clickables - #13

Merged
gothicscientist merged 1 commit into
mainfrom
claude/project-thread-u1znxt
Nov 5, 2026
Merged

gothicscientist merged 1 commit into
mainfrom
claude/project-thread-u1znxt

Conversation

@gothicscientist

Copy link
Copy Markdown
Owner

Requested by Bharat · project thread

Merging this deploys to stratalab.cc, so it waits for Bharat's go-ahead.

The mascot

An original little Palaeolithic digger, drawn as inline SVG to look like a coloured-pencil sketch: ink outlines over fills printed slightly off register, with a slow "boil" on the lines. He wears a fur tunic and a malachite-bead necklace, and carries a flint pick. All movement is CSS, and it stops under prefers-reduced-motion.

Where What he does
Landing, on top of the core Chips at the surface every few seconds and throws up grit. He waves when you hover over him; tap him and he hops and the core shakes.
Footer, every page Walks along the sediment rule and turns around at each end.
404 Scratches his head next to the empty core.
Upload box Waves on hover and cheers while you drag a file over the box.

digger

Clearer clickables

  • How it works (Upload / Place / Fit / Test): each step is now a bordered, raised key with a chevron. It lifts on hover and sinks when pressed, and the chosen step gets a malachite outline. The step's action ("Upload a file →") is a button, and "Play again" has an icon.
  • How it is built: a "Tap a box to see what it does." hint with a tapping hand, a ⊕ badge on every box (a filled ✓ on the open one), and a halo that glows over the boxes in turn until someone points at one.
  • Upload: the whole drop zone opens the file picker, not just the small link. It now has hover, keyboard-focus and drag states, plus a "Choose a file" button. Drag-leave no longer flickers when you pass over the zone's own contents.
  • Site-wide: buttons, tabs, label[for] and summary get a pointer cursor, because Tailwind v4's reset gives buttons the arrow. Under reduced motion, looping animations now run once and stop; before, they flickered through their frames.

Screenshots

hero steps
map upload
404 phone

Checks

  • pnpm typecheck, pnpm test (53 passing) and pnpm build all pass.
  • Screenshots come from the static build against a local API at 1280px and 390px.
  • With reduced motion emulated, no mascot animation runs.

Generated by Claude Code

- Caveman: an original coloured-pencil-style Palaeolithic digger drawn as
  inline SVG with CSS animation. He chips at the top of the landing core
  (tap him to shake it), strolls along the footer rule, scratches his head
  on the 404 page, and cheers when a file is dragged onto the upload box.
  All motion stops under prefers-reduced-motion.
- How it works: the Upload / Place / Fit / Test steps are raised, bordered
  keys with a chevron that lift on hover; the step action is a button.
- How it is built: a "tap a box" hint, a plus badge on each box, and a
  halo that glows over the boxes in turn until one is touched.
- Upload: the whole drop zone opens the file picker, with hover, focus and
  drag states and a "Choose a file" button.
- Buttons, tabs and labels show a pointer cursor site-wide (Tailwind's
  reset gives buttons the arrow), and looping animations rest instead of
  flickering under reduced motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HEuHS4cfoZR8XF5eD6UH64
@gothicscientist gothicscientist self-assigned this Nov 5, 2026
@gothicscientist
gothicscientist merged commit 33130f6 into main Nov 5, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants