Why Horizontal Seams Appeared in the CaveMiner Cover

What happened

After the CaveMiner cover was added to project cards and the project detail page, several horizontal lines appeared across the illustration. They were visible not only during hover, but also in the normal state and on mobile devices.

The original artwork was a single image. To store it in the repository, it had been split into several horizontal images and stacked vertically with HTML and CSS.

Verified evidence

• The horizontal lines matched the boundaries between the image slices.
• Disabling the hover scale effect did not remove the lines.
• Setting gap: 0 and line-height: 0 did not remove them.
• The issue reproduced on both desktop and mobile.
• The detail page also displayed only part of the cover when the layout rules for the slice container were incomplete.

These observations showed that the primary cause was not the hover animation. It was the browser rendering and scaling several raster images as independent elements.

Cause

Each slice was painted separately. When the displayed size did not align exactly with the original pixel dimensions, slice boundaries could fall on fractional pixels. Interpolation then made the page background or a difference between neighboring slices appear as a thin line.

Although the composition looked like one image conceptually, the browser still handled it as six images. Removing CSS spacing therefore did not remove the source of the seams.

Action

The public pages no longer stack the slices directly.

A Node.js script now runs before Astro type checking and production builds. It places the six source slices into one SVG, with a very small overlap at each boundary. The resulting SVG is displayed as one ordinary img element.

This is not a vector version of the artwork. The SVG contains embedded WebP raster images and is used as a container that turns the source material into a single display asset.

Validation

• No horizontal seams appeared on the project card.
• Hovering the card did not reintroduce the seams.
• The full cover appeared on the detail page.
• The result was checked on desktop and mobile.
• Translation validation, Astro type checking, and the production build passed.

The implementation rule has been updated: a continuous cover illustration should not be reconstructed from multiple image elements in the browser.