Homepage Change Log 05: Why the Recent Photography Aperture Kept Looking Wrong

The recent photography section took longer than expected because it was not just a visual refresh. It exposed several boundaries at once: shape, layering, animation, and image display.

The intended result was simple to describe. The outside should be a circular set of recent photos. The center should feel like a camera aperture. Later, the center hexagon can carry actions such as recent photography and opening the gallery.

The early mistake was treating “aperture-like” as “draw six lines and a hexagon.”

Mistake One: Treating Gaps as Lines

In the reference aperture, the separations are not independent strokes. They are background showing through where adjacent blades do not cover the same space.

Early versions used separate SVG lines for the photo sectors and the center glyph. That worked only in still screenshots. Once hover and loading motion entered, the seams broke:

• The line layer did not move with the photo blade.
• Stroke width and clipped photo edges came from different rules.
• Endpoints could stop awkwardly near the center or outer rim.
• When a blade floated upward, fixed lines still crossed it.

This was the root cause of the repeated “the seam is not straight,” “there are extra pixels,” and “the hover reveals a fixed frame” feedback.

Mistake Two: Filling the Center Hexagon

The center hexagon should read as an opening. It should be the space left by the blades, not a white or black polygon pasted on top.

When the center was painted as a separate fill, light mode looked like an extra white patch, and dark mode looked like a forced black hole. It also made future aperture animation harder, because the hole should grow from the blade geometry, not from a cover shape.

Mistake Three: Keeping Photo-wall Thinking

The earlier section was a photo wall. When it became a circular aperture, some old assumptions stayed behind: photos sat inside a fixed round frame, and lines described the cuts.

That was why the hover state felt wrong. The photo blade moved, but the rim and separators stayed behind. Visually it looked like a picture escaping a frame, not like a complete blade lifting up.

The structure and the intended motion were disagreeing.

Mistake Four: Tuning Angles by Hand

An aperture is tempting to tune by eye. Rotate a line a bit. Make a stroke thinner. Move one endpoint.

That approach did not scale. Fixing one seam made another seam worse. Correcting the center broke the outer sector. The reason was that the outer photos and the inner glyph did not share a mathematical model.

They were both pretending to be one aperture system while using separate angles, strokes, and masks.

The Lesson

This pattern needed geometry before styling. Three relationships had to become explicit:

• The blade itself is the moving object.
• The gap is background exposed by blade geometry.
• The center hole is space left by blades, not a decorative fill.

Once those responsibilities were separate, the implementation could stop patching symptoms. The next step was to compare possible structures and remove the layers that did not belong.