Home Scroll

Krasimir Stoimenov kstoimenov.com/

Design type: WebGL motion portfolio homepage
Page tags: preloader smooth scroll scroll reveal kinetic type webgl dark portfolio homepage logo wall testimonials custom cursor motion
Site tags: dark portfolio motion webgl
Vocabulary: logo preloaderwebgl gradient herolerped smooth scrollscroll-scrubbed text revealinline icon glyphs in copykinetic type listmixed serif and grotesk headlineinline toggle pillstacked testimonial cardslogo wall gridcontextual custom cursorfloating pill navsocial link tilesnear-black canvas
Prompt: Show prompt
Build a single-page dark portfolio homepage for a freelance product designer, driven by scroll motion. Palette and type - Background #111111, text #F2F2F2, muted #8A8A8A, borders #2A2A2A, accent neon green #6BE36B with a darker #0E5C1A for glow. - Grotesk sans for most text; italic serif words mixed into headlines ("Services+ for better digital products", "What [italic]people[/italic] have to say"). Sections in order 1. Preloader: logo mark centred on #111, then the wordmark [Your name] slides out beside it (~1.2s). 2. Hero: full-viewport WebGL shader of vertical glowing green light bars/aurora that drift slowly; headline types in letter by letter. 3. Manifesto: a large paragraph (~36px) whose words brighten from 30% to 100% opacity as you scroll (scrubbed), with small green icon glyphs inline and some words underlined. 4. Services: five huge uppercase lines (PRODUCT DESIGN, DIGITAL STRATEGY…) each led by an icon, small labels pinned to the far left and right; lines stagger in and slide horizontally with scroll. 5. Selected work blocks (category pill, title, image grid). 6. CTA headline mixing serif and sans with an inline pill-shaped toggle holding [Your photo], plus a large "View all works →" button. 7. Testimonials as a stack of offset dark cards that fan out on scroll. 8. Client logo wall: 5-column grid with hairline borders, last cell "Your company ✦". 9. Footer: Contact pill button, five square social tiles, back-to-top circle, and the green WebGL glow rising from the bottom edge. Global: Lenis smooth scroll (lerp ~0.08), GSAP ScrollTrigger for scrubbed reveals, Three.js or OGL fragment shader for the glow, green translucent circle cursor that becomes "View case" over images, bottom-centre floating pill nav on blurred glass. Reduced motion: native scroll, static gradient image, all text fully visible.
Notes: Logo preloader, WebGL hero, then a full scroll of the homepage.
Recording: 0:34
Added: 26 Oct 2026

Esc gallery · ← → pages