Home Hovers

Krasimir Stoimenov kstoimenov.com/

Design type: Portfolio project-list hover interactions
Page tags: hover image swap custom cursor portfolio dark project list image grid micro-interaction floating nav
Site tags: dark portfolio motion webgl
Vocabulary: custom cursor followercontextual cursor labelimage swap on hoverimage grow on hoverasymmetric image gridcategory pillhairline dividerunderlined text linkfloating pill navnear-black canvasimage-led preloaderlarge grotesk headings
Prompt: Show prompt
Build the selected-work section of a dark portfolio homepage with rich hover states. Layout - Canvas #111111, text #F2F2F2, muted #8F8F8F, hairline dividers #2A2A2A, accent green #6BE36B. - Each project is a stacked block: small rounded outline pill with the industry ([Industry]), a large grotesk title ([Project name], ~48px, tight tracking), a right-aligned underlined "View project" link, then an image grid: one wide image (~65%) beside a tall narrow one, and below them a row of three equal smaller images. Images have 4px radius. Separate projects with a 1px full-width line and ~120px vertical spacing. - Bottom-centre floating pill nav on blurred dark glass. Interactions - Custom cursor: a 40px translucent green circle with a + glyph that trails the pointer with lerp (~0.15). Over text links it shrinks and sits on the link; over images it morphs into a white 88px disc labelled "View case" (scale-in 250ms, back-out ease). - Hovering a project image: images in that block cross-fade/swap to alternate shots and the wide image grows slightly in width while siblings adjust (flex-grow transition, 600ms, cubic-bezier(0.22,1,0.36,1)). - "View project" link: underline slides out and back in on hover. - Initial load: logo plus square project thumbnail and [100%] counter preloader before content fades in. Implementation: React/Next, GSAP quickTo for the cursor, CSS flex transitions for image resizing, IntersectionObserver for lazy images. Hide custom cursor on touch devices. Reduced motion: native cursor, no image resizing, instant swaps. Content placeholders: [Your name], [Project name], [Industry], [Image 1–5].
Notes: Hovering a project swaps its images and shows a "View case" cursor.
Recording: 0:32
Added: 26 Oct 2026

Esc gallery · ← → pages