Locomotive Agency Portfolio Landing Page

Overview

This website is the portfolio for Locomotive, a digital-first design agency. It serves as a premier reference for high-end creative portfolios, showcasing how to blend bold typography, smooth scrolling, and immersive 3D elements into a cohesive brand experience. Builders should clone this to study the seamless integration of motion with minimalist layout structures.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic base (pure black and white) to let the colorful work thumbnails and video content pop. Hierarchy is established through extreme scale—large display headings versus small, structured utility text.
• Typography System: A mix of a sophisticated serif (likely a custom branding typeface) for big headings and a clean, monospace or sans-serif for UI elements like buttons and labels. Emboldened serifs are used for the main mission statement, while small-caps or mono fonts handle metadata.
• Page Structure: The flow begins with a full-bleed video hero and large-scale branding, followed by a "Featured Work" section using a vertically stacked list layout. It transitions into a multi-column "About" section containing a 3D canvas, and concludes with an "Extras" directory of articles and culture links.
• Reusable Components:
  • Shuffle Hover Links: The c-featured-links_item uses a "shuffle" interaction where text or images appear/change on hover.
  • Magnetic/Iconic Buttons: Horizontal buttons with trailing arrows (data-icon="→") and hover shuffle labels.
  • Content Overlines: Section headers with thin borders that categorize lists of links (Articles, Culture, Store).
• Interaction and Motion: The site is built on locomotive-scroll, providing fluid, momentum-based scrolling. Elements use data-scroll attributes to trigger entrance animations. The "Featured Work" list reveals image thumbnails only on hover, keeping the initial view clean.
• Implementation Clues: The HTML reveals a custom modular system (data-module="...") and heavy use of utility classes (e.g., u-gc-1/4 for grid control). It specifically avoids standard front-end frameworks in favor of a bespoke, vanilla-first approach with GSAP and Three.js for the 3D team canvas.

Use Cases

• Who should clone this: Creative agencies, independent designers, or high-end architectural firms looking to move away from standard grid-based portfolios toward a more editorial, motion-heavy experience.
• Effective Remixes: This pattern works well for luxury e-commerce brands or tech startups that want to tell a story through scroll-based reveals.
• Practical Directions:
  • Swap Brand Style: Keep the scroll logic but replace the serif with a bold grotesque sans-serif for a more "brutalist" tech vibe.
  • Information Architecture: Use the "Featured Work" hover-reveal list as a navigation menu for a massive product catalog.
  • Component Reuse: Extract the c-section-overline and c-list structures for a clean, text-heavy blog or resource index.
• Clone Scope: A full-page clone is best for those wanting to master the locomotive-scroll ecosystem. For a quicker win, clone the Featured Work section to implement its unique hover-triggered image preview functionality into an existing site.