Inspo
← All pages

Work Index

Krasimir Stoimenovkstoimenov.com/work↗
Design type
Typographic project index with hover cursor
Page tags
hoverlistimage previewdarkportfolioproject indexcustom cursorkinetic typetext revealtypography
Site tags
darkportfoliomotionwebgl
Vocabulary
uppercase oversized project namesinline discipline captionsright-aligned index numeralslist-based portfolio indexdim-others hover focuscontextual 'view case' cursormasked headline revealmixed sans and italic serif headlinethin outline line-art backgroundfloating pill navigationcentred statement ctaaurora gradient footer
Prompt
Show prompt

Build a portfolio "Work" index page that is pure typography on a dark background. Palette: bg #121212, text #f2f2f2, muted #8a8a8a, numerals #6b6b6b, hairline outline shapes #ffffff at ~15%, accent green #4ade80. Type: a wide neutral grotesk sans (e.g. Neue Montreal / Inter Display) plus an italic serif (e.g. Instrument Serif) for emphasis words. Layout: - Small centred logo. Hero headline left-aligned at ~80px: "[Word] italic-serif [word] / italic-serif [word] → / [rest of line]", with a one-line muted subtitle on the right. Large 1px outline circles and slanted lines sit behind as decoration. - Project index: a vertical list, one row per project. The project name is UPPERCASE sans at ~72px, followed inline by a small muted caption "/ [Discipline], [Discipline]" (or "Coming soon"), with a large grey index number (1, 2, 3…) right-aligned. Rows are tight, with no dividers. Content width ~1100px. - Below the list: a centred statement "italic-serif [Phrase] [rest of sentence]" at ~56px and an outline pill CTA "[Let's talk]" in italic serif, with a separate circular arrow button. - Footer: contact line plus outline "Contact ↗" pill, a row of five bordered social tiles, and a logo with legal links. A blurred animated green aurora glows at the very bottom. Motion: - On load, headline lines rise out of overflow masks with a staggered reveal (~700ms, ease-out expo), then the subtitle fades in. - Default cursor: a ~44px translucent green circle with a plus, lerp-following the pointer. - Hovering a project row: that row stays white while the other rows dim to ~35% opacity (~250ms). The cursor morphs (scale ~2x, ~300ms, springy) into a solid white circle labelled "View case" in small dark text. Optionally a project image preview follows the cursor at a slight lag. - Scroll: rows fade/slide up as they enter, and a bottom pill nav (frosted, blurred) condenses from a full-width bar. - Footer tiles flood with a green gradient on hover. Implement with GSAP or Motion plus CSS. Under prefers-reduced-motion: native cursor, no dimming animation (use an underline instead), instant reveals.

Notes
Project list with image previews on hover.
Recording
0:28
Added
26 Oct 2026
← PreviousPricing Interactions

Esc gallery · ← → pages