Case Study Transition

Krasimir Stoimenov kstoimenov.com/work/acronis

Design type: Portfolio-to-case-study page transition
Page tags: page transition image expand case study preloader full-bleed dark portfolio split layout floating nav motion
Site tags: dark portfolio motion webgl
Vocabulary: page transitionstepped tile wipeimage-led preloaderpercentage loaderfull-bleed herocase study herosplit heading and body columnsserif italic accentfloating pill navglassmorphic docktwo-up image gridnear-black canvascustom cursor follower
Prompt: Show prompt
Build a dark portfolio where clicking a project opens its case study through a cinematic transition. Layout and look - Canvas #111111, text #F2F2F2, muted text #8A8A8A, one accent (soft green #6BE36B) used only on the cursor. - Grotesk sans (e.g. Inter Display / Neue Montreal) for headings with occasional italic serif words for emphasis (e.g. Instrument Serif): "A product too deep [italic]to use[/italic]". - Floating pill nav fixed bottom-centre: theme toggle icon, Work, Services+, Pricing, About, Let's talk ↗, on a translucent blurred dark glass background. - Case study: full-viewport hero image of [Project name], then a two-column block (large heading left, small eyebrow label + body copy right), then full-width and two-up rounded image panels. Motion sequence (on clicking "View project") 1. Overlay fades to #111 with a centred logo mark; a square thumbnail of the project slides in beside it with a bracketed counter [0%]→[100%] (~800ms). 2. The hero image is revealed by a stepped staircase wipe: a grid of dark tiles retracts diagonally from top-right to bottom-left, staggered ~40ms per tile, ~700ms total, ease-out-expo. 3. Hero scales from 1.1 to 1 while the nav dock fades up. 4. Reverse the wipe when going back to the work index. Implementation: Next.js or Astro with the View Transitions API (or Barba.js) for routing, GSAP timelines for the tile stagger and counter, Lenis for smooth scroll. Generate tiles as an absolutely positioned CSS grid of divs over the hero. Reduced motion: skip the loader and tiles, cross-fade pages in 200ms. Use my content: [Your name], [Project name], [Industry tag], [Project summary].
Notes: Logo preloader, then the case study's hero image is revealed in stepped blocks from the top-right corner before the page scrolls.
Recording: 0:23
Added: 26 Oct 2026

Esc gallery · ← → pages