[moshiur01]

What it does

Adds Project Hover Reveal (/block/project-hover-reveal), a two-column "Selected Projects" list.

• Project titles are on the left. On the right is one panel with the image and the project's role, timeline, year and team.
• Pointing at a title steps it forward and switches the panel to that project.
• The new image opens as a circle from the frame edge nearest the hovered row (the left edge at that row's height, or the bottom edge when the panel stacks above the list). It settles from 1.2× to 1×, and the old image dims underneath.
• Each detail rolls in on its own masked line, 50ms after the one before, in the direction you moved.
• The sample images are from Lummi.

Decisions

• No layout movement. The first version was an accordion with a cursor-following card. Rows changed height under the pointer and the card chased a slot that kept moving, so it felt rough. The split layout keeps every box a fixed size.
• No flash between images. All project images are mounted in one frame up front. The outgoing image stays fully drawn underneath until the new one has opened over it.
• Layout follows the block's width, not the window's. The columns use container queries, because the docs preview column is much narrower than the window. Switching on window width made the panel overlap the titles.
• Touch screens. There's no hover, so the panel is hidden and each row shows its image, role and year inline. A tap opens the project in one go.

Accessibility

• Every row is a real <a href>, and its accessible name includes the role and year.
• Keyboard focus switches the panel to that project. The panel repeats the list's information, so it's aria-hidden.
• Image alt text comes from each title.
• With prefers-reduced-motion: reduce there's no iris, zoom, dimming or roll; the panel switches instantly.

Checks

• pnpm registry:build (generated files are committed)
• pnpm typecheck
• pnpm test: 70 files, 1228 tests passed
• Viewed the static layout in the docs dev server at the narrow pane width and at 1440px, and confirmed all 5 Lummi images load. I didn't check the animation in the browser.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
tween-ui	Ready	Preview	Oct 25, 2026 10:58am UTC