Elva Agency Portfolio Landing Page

Overview

Elva is a high-performance agency portfolio that blends minimalist aesthetic with complex scroll-driven storytelling. It serves as an excellent reference for builders wanting to master typography-integrated icons, horizontal scroll carousels, and advanced canvas-based sprite animations.

Design System

• Color Palette & Visual Hierarchy: Built on a high-contrast foundation of stark whites and deep blacks (-white and -black classes). The hierarchy is established through extreme scale variations in typography rather than color, using a layout grid visible in the HTML as 18 alternating background blocks (bg-block).
• Typography System: The site uses a range of typographic scales labeled t1 through t6. The hero section (heroEmojis) utilizes ultra-large display type with custom line-icon spans injected between characters to break up text density.
• Page Structure: The flow moves from a massive typography-led hero to a full-width featured project, followed by a sticky vertical-scroll work gallery, and finally a specialized section with a scroll-triggered canvas animation (smiley-frames).
• Reusable Components:
  • heroEmojis: A text-heavy hero where characters and icons are interleaved.
  • slider -circular: A horizontal work showcase with synchronized meta-labels (slider-label).
  • Sticky Text Blocks: Sections like largeTitle and swirlBlock that use data-sticky attributes to pin content while the background or text transitions.
• Interaction & Motion: The design relies heavily on scroll manipulation. Elements use data-smooth-item for parallax-like positioning. The HTML shows a custom scrollbar__handle and a canvas-based cursor, indicating a fully controlled user experience. Text is heavily processed for animation using character and line splitting (data-split="lines, chars").
• Implementation Clues: The structure uses a router-wrapper for seamless transitions and GSAP-style split-text utilities. The presence of a custom canvas cursor and smooth-scroll data attributes suggest a heavy reliance on a JavaScript animation engine for layout orchestration.

Use Cases

• Who should clone this: Creative agencies, freelance designers, or studios looking to move away from standard grid-based layouts into more cinematic, scroll-narrative territories.
• Remix Directions: Replace the agency work with a high-end fashion lookbook or an architectural portfolio. The swirlBlock text transition can be adapted for mission statements or "About" sections in complex corporate sites.
• Practical Adaptations: Builders can selectively clone the typography-icon hero pattern for marketing landing pages to increase visual engagement without adding heavy custom imagery.
• Suggested Scope: A full-page clone is recommended for those wanting to maintain the sophisticated smooth-scroll rhythm; however, the featuredProject and horizontal work slider are highly modular and can be ported into existing site frameworks.