Split Index

A project list with a fixed preview beside it. Point at a title and the image next to the list changes. Built for portfolio, studio and agency index pages where every project should be one glance away.

Change: Wipe slides the new image across the old one. Fade blends them with a slight settle. Slide pushes the new image up from below. Set the duration, or turn it down to zero for an instant swap.

Panel: put the preview on the left or right, set its width as a share of the component, its aspect ratio and corner radius. The panel stays in view while the list scrolls, with a top offset you choose.

Rows: each row has a title, a category, a year, an image and an optional link. While you point at a row the others can dim, with thin dividers between them. A caption under the image shows the category, the year and a 01 / 04 counter.

Narrow screens: below a width you set, the preview moves above the list so it still works on phones and in narrow columns.

Touch and keyboard: tap a row to show its image. Tab through the rows and the preview follows the focus. Rows with a link open it, in a new tab if you want.

Each image keeps its alt text and the caption is announced to screen readers when it changes.

Zero dependencies, no network calls, no animation loop. Visitors who ask for reduced motion get an instant change. On the canvas it shows the first project.

Ships with four demo projects so it works the moment you drop it in.

Built by KHZ ART, a Tokyo studio working in editorial and fashion.