A coverflow that starts with HTML

Share the geometry, not two approximations

A coverflow needs to decide how far a cover moves, how much it turns and how it recedes. If the static build and the browser calculate those differently, the first interaction can cause a visible jump.

This portfolio exports coverflowStyle from its template module. The build uses it for each card’s initial inline style; the browser imports the same function when it repaints the ring.

The distance is expressed in multiples of the CSS card-width variable. The stylesheet can change that width for the available space without replacing the JavaScript geometry.

Make the list behave like a ring

The interaction keeps a fractional position for the animation and a selected index for the caption. Wrapping the offset around the number of cards makes the previous and next actions continue across the ends of the project list.

The paint function folds each card towards the shorter side of the ring before applying the shared geometry.

let offset = (((index - pos) % count) + count) % count;
if (offset > count / 2) offset -= count;
Object.assign(card.style, coverflowStyle(offset, count));

The count comes from the rendered cards. Adding a project changes the list, captions and geometry together rather than requiring a separate carousel total.

Give the same content several controls

The frame accepts left and right arrow keys. Previous and next buttons provide visible controls, while pointer input supports dragging and swiping. The active caption includes the real website link and a button for the project dialog.

Reduced motion makes the settle step go straight to its target. The same selected project and caption remain available, without requiring the easing sequence.

The regular work page provides the complete project grid. The coverflow is another way to browse that work, while the grid remains useful for scanning and category filtering.

Think about the covers beyond the first screen

A far cover can begin outside the clipped viewport. Relying only on native lazy loading could leave its image unloaded until it travels into view.

The coverflow therefore watches when the carousel approaches the viewport. At that point, it switches the cover images to eager loading and disconnects the observer. This keeps the image-loading decision tied to the carousel’s location rather than fetching every cover at the top of the page.

• Check first-to-last and last-to-first navigation after adding a project.
• Verify the active caption, real link and dialog refer to the same project.
• Test a narrow viewport and reduced motion as well as desktop animation.