How Jelmata Draws Connected Cells

A Jelmata group is a cluster of your cells that are orthogonally connected. The score you get from a group is a function of how big it is, so knowing where one group ends and the next begins is one of the things you read off the board at a glance.

For most of Jelmata's life, the board drew each of your occupied squares as its own rounded rectangle. Two cells next to each other looked connected, but if you zoomed in you could see a thin seam between them. Three cells in an L-shape had a visible corner gap. A 2×2 block had a tiny hole in the middle. We patched it with an extra layer of “connector bars,” but it still looked like a grid of rectangles pretending to be a blob.

The current renderer draws each group as one continuous outline — the silhouette of the whole group, traced in a single stroke, with rounded outside corners and sharp inside corners. An L-shape is one L-shaped blob, not three overlapping rectangles. A 2×2 is a soft-cornered square. A lone cell is a perfect circle. There are no seams because there are no internal edges to leave gaps.

The visual upgrade is subtle until you notice it. Groups read as gel now, not as tile. Your eye tracks territory by shape, not by count. And the bigger the group, the more the outline does the thing the score rule is doing under the hood: combining the cells into a single thing whose shape encodes its value.

When you tap a square that touches one of your existing groups, the group doesn't just instantly expand to include the new cell. For 300 milliseconds, the old group stays exactly where it was and a small rounded bar pushes outward from each neighboring cell toward the tapped square. When the bars meet the new cell, the whole group snaps together into its final shape.

It looks like the group is sending out a pseudopod to absorb the new cell. That's the only frame-by-frame animation in the rendering layer and it's load-bearing: without it, merging a cell into a group would just be a silent shape-swap from one frame to the next, and you'd miss the fact that anything connected at all.

If you drop a cell in a square with no adjacent same-color neighbors, the grow animation doesn't play. It would have nothing to grow from. The cell just appears as its own one-cell blob. That's a deliberate choice — the animation's job is to show connection, and there's no connection to show.

For developers

The engineering writeup — the right-hand-rule walker over the vertex grid, inset padding via right-hand normals, convex-only corner rounding with a radius clamp, the useLayoutEffect + requestAnimationFrame loop behind the 300ms bridge, and the annotation trick that keeps score labels from blinking during the animation — lives on the Island & Pine studio blog: Drawing connected cells as one outline: contour paths, inset normals, and a bridge animation.