Blog 101 block design & features
Blog101 is an editorial title index for shadcn/ui projects. A heading and description sit above six ruled rows, each with a large linked post title on the left and a category, date, and arrow on the right. There are no inline thumbnails; the cover photos only appear on hover.
Moving the pointer over a row fades in a rounded four by three cover image that tracks the cursor across the list, with a soft shadow and hairline ring lifting it off the page. The image swaps with a crossfade as the pointer moves between rows, the other titles fade to a muted tone, and the hovered row's arrow darkens. The effect is pointer-only, so touch and keyboard users get the plain list with full-strength titles and visible focus underlines.
The look is gallery-like and confident, borrowing the cursor-follow preview common on studio and portfolio sites and applying it to a journal. It stands out among list layouts because the type does all the work until the reader shows interest. Complexity is moderate and code-driven: content is the standard post set, but each post needs a cover image for the preview to be worth showing.
On phones the preview is disabled and the category and date line stacks under each title.