Ink blob cursor

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

An issue index for Field Notes, a fictional garden journal. Six editorial cards sit on warm paper. A 168px gooey ink blot — three dark-green SVG circles blurred together with an SVG feColorMatrix “goo” filter — follows the pointer with a 0.14 lerp lag. When the blot’s centre sits inside a card (8px inset), that card fills with ink #0f2e22, type flips to paper, and the card lifts 8px. The system cursor is hidden. Replay recenters the blot and clears hits. The one idea is ink moving over paper, not a generic spotlight.

Reference behaviour

1. Initial state: paper #efe8d8, 64px nav with italic 26px “Field Notes”, links Essays (current) / Garden / Archive, Replay on the right. Title “Letters from the plot” plus “Issue 09 · Autumn 2026”. Six cards in two rows of three.
2. The blob starts at 62% × 48% of the viewport. body { cursor: none }. The blob is pointer-events: none and does not steal clicks.
3. pointermove writes target coordinates. A requestAnimationFrame loop lerps current x/y toward the target by 0.14 per frame (~14% of the remaining distance). The blob’s transform: translate(x px, y px) uses a −84px margin so the 168px square is centred on that point.
4. Each frame, for every [data-card], if the blob centre is inside the card rect inset by 8px, add class hit. Otherwise remove it. Multiple cards can theoretically hit if they overlap; they do not overlap here, so one at a time.
5. .hit: background --ink, colour --paper, border --ink, translateY(-8px) over 280ms expo-out. Index, paragraph and time go paper at 78% opacity.
6. The SVG circles keep a slow animate on r / cx / cy (5s, 6s, 4.5s) so the blot breathes while idle.
7. Replay sets current and target to the start position, applies the transform, and removes .hit from every card.
8. Reduced motion: lerp factor becomes 1 (blob sticks to the pointer), circle SMIL animation is off, card transition is 1ms. Hit-testing still runs.
9. Nav links href="#" preventDefault. Focus-visible restores a default cursor on the focused control so keyboard users can see it.

Structure

1280 × 800
┌────────────────────────────────────────────────────────────┐
│ Field Notes          Essays  Garden  Archive     [Replay]  │ 64
├────────────────────────────────────────────────────────────┤
│ Letters from the plot                 ISSUE 09 · AUTUMN    │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐                     │
│ │ 01 · Soil│ │ 02 · Seed│ │ 03 · Light│   cards, 16 gap    │
│ │ Clay     │ │ Saving   │ │ The short │                    │
│ │ after…   │ │ the beans│ │ afternoon │                    │
│ │ 12 Sep   │ │ 19 Sep   │ │ 26 Sep    │                    │
│ ├──────────┤ ├──────────┤ ├──────────┤                     │
│ │ 04 · Tool│ │ 05 · Kit.│ │ 06 · Note │                    │
│ │ A hoe…   │ │ First    │ │ Leave the │                    │
│ │ 1 Oct    │ │ quince…  │ │ seed heads│                    │
└────────────────────────────────────────────────────────────┘
  blob 168×168, centred on pointer, z-index 5, not in the grid

• Hidden SVG in the document with <filter id="goo">: feGaussianBlur stdDeviation 8, feColorMatrix alpha goo (20 / −8), feBlend.
• <nav> + <main> padding 28/48/32. .grid is 3 columns, rows auto 1fr 1fr, gap 16, height 100% of main (calc(100% − 64px)).
• Each card: .idx, <h2>, <p>, <time>.
• #blob.blob is position: fixed; width/height: 168px; margin: -84px 0 0 -84px. Inner SVG viewBox 0 0 120 120, three circles filled #143d2c / #0f2e22.

Card copy

Idx	Title	Body (short)	Date
01 · Soil	Clay after rain	The bed by the wall holds water a day longer than the rest. We stopped fighting it and planted what likes wet feet.	12 Sep
02 · Seed	Saving the beans	Hung in pairs from the rafter until they rattle. Next spring they will remember this roof.	19 Sep
03 · Light	The short afternoon	Shade reaches the rosemary by four. We moved the bench, not the plant.	26 Sep
04 · Tool	A hoe with a name	Ash handle, worn where Marta’s thumb sits. Oil it on Sundays; it will outlast the fence.	1 Oct
05 · Kitchen	First quince jelly	Four fruits, too hard to bite, cooked down to a rose slab that cuts like cheese.	2 Oct
06 · Note	Leave the seed heads	Goldfinches found the fennel. The plot is not only ours, and the calendar can wait.	2 Oct

Tokens

:root {
  --paper: #efe8d8;            /* page */
  --paper-2: #e4dcc8;          /* card rest */
  --ink: #0f2e22;              /* type, hit fill */
  --ink-2: #3d5a45;            /* card body */
  --ink-3: #7a8f7e;            /* index, dates, replay */
  --line: rgba(15, 46, 34, .16);
  --blob: #143d2c;             /* circle fill */
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --gutter: 48px;
  --t-micro: 160ms;
  --t-card: 280ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
}

Typography

Role	Family	Size	Weight	Line-height	Tracking	Case
Page title	Instrument Serif	36px	italic 400	1.1	−0.02em	sentence
Card title	Instrument Serif	26px	italic 400	1.15	−0.02em	sentence
Brand	Instrument Serif	26px	italic 400	1	0	Title
Card body	Inter	13.5px	400	1.5	0	sentence
Nav	Inter	12px	500	1	+0.04em	Title
Index/date	Inter	11px	500	1	+0.06–.14em	UPPERCASE
Replay	Inter	11px	500	1	+0.12em	UPPERCASE

Motion

Element	Trigger	Property	From → To	Duration	Easing	Notes
Blob position	pointermove	transform translate	lerp 0.14 / frame	rAF	—	factor 1 if reduced
Blob shape	always	r / cx / cy	±6px breathe	4.5–6s	SMIL	off if reduced
Card hit	overlap	bg, color, Y	paper → ink, 0 → −8px	280ms	--expo

Do not use mix-blend-mode difference (it turns the paper a strange complementary colour). Invert by swapping tokens on .hit.

States

• Card rest: --paper-2 fill, 1px --line, ink type.
• Card hit: --ink fill, paper type, −8px Y, ink border.
• Nav current / hover: --ink.
• Replay hover: paper type on ink fill.
• Focus-visible: 2px ink outline, 3px offset, cursor: default so the ring is findable.

Accessibility

• cursor: none is visual only. Keyboard users never need the blob. Cards are not buttons; they do not need a keyboard equivalent of the overlap invert.
• Replay is a <button> and is in the tab order after the nav links.
• Goo filter SVG is aria-hidden. The blob is aria-hidden.
• Contrast on rest cards: ink on --paper-2 exceeds 8:1. On hit: paper on ink exceeds 10:1. --ink-3 is 11px meta.
• Hit target for Replay: padding 8/12, border; pad to 40px tall if the host is touch.

Responsive rules

• ≥ 1280: 3×2 cards, blob 168px, lerp 0.14.
• 1024–1279: same grid, slightly smaller type (card title 22px). Blob 144px.
• 768–1023: 2 columns, 3 rows. Blob 128px.
• < 640: 1 column. Show the system cursor (cursor: auto) — a hidden cursor on a phone is unusable. Still invert a card on pointerdown if a stylus appears.

Acceptance checklist

• Blob is 168px, goo-filtered, filled #143d2c / #0f2e22, and lags the pointer with lerp 0.14.
• System cursor is hidden on the page; the blob has pointer-events: none.
• A card inverts to ink and lifts 8px when the blob centre is inside it (8px inset).
• Leaving the card restores paper-2 and Y=0 over 280ms.
• Replay recenters the blob at 62%/48% and clears .hit.
• Reduced motion: blob tracks with no lag, no SMIL, 1ms card transitions; invert still happens.
• Six cards with the copy in the table, Instrument Serif titles, Inter body.
• No emoji, no purple, no glassmorphism.
• Only Instrument Serif and Inter load.

Implementation notes

Goo from three circles, not a morphing path, keeps the SVG tiny:

<filter id="goo">
  <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="b"/>
  <feColorMatrix in="b" mode="matrix"
    values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" result="g"/>
  <feBlend in="SourceGraphic" in2="g"/>
</filter>

Lag and hit-test in one rAF so they cannot drift:

function tick() {
  const k = reduce ? 1 : 0.14;
  x += (tx - x) * k;
  y += (ty - y) * k;
  blob.style.transform = `translate(${x}px,${y}px)`;
  cards.forEach((c) => {
    const r = c.getBoundingClientRect();
    c.classList.toggle('hit',
      x > r.left + 8 && x < r.right - 8 && y > r.top + 8 && y < r.bottom - 8);
  });
  requestAnimationFrame(tick);
}

Centre with negative margin, not translate(-50%,-50%) stacked on the lerp translate — two translates on the same property overwrite each other.

Common mistakes: mix-blend-mode: difference on cream paper (the blot goes magenta). Putting pointer-events on the blob so cards never receive hover. Lerping at 0.4, which feels glued, or 0.04, which never catches up.