Moffitt Moffitt Portfolio with Animated Hero

Overview

This portfolio for Moffitt Moffitt is a sophisticated brand-led showcase featuring a cinematic project carousel with split-screen vertical animations. It serves as an excellent reference for creators needing to balance high-impact visual storytelling with a clean, functional UI, making it ideal for studios, agencies, and luxury brands.

Design System

• Color Palette & Visual Hierarchy: The site uses a minimalist "Ink and Paper" aesthetic, primarily featuring charcoal grays, stark whites, and desaturated backgrounds. Hierarchy is established through large-scale serif and sans-serif typography, with primary focus given to full-screen imagery while functional UI (like pagination and menu toggles) remains subtly anchored at the edges.
• Typography System: The system employs a contrast between a bold, clean sans-serif (used for headers and navigation) and a more traditional serif for narrative body text. There is a clear emphasis on large heading scales (e.g., h1 in the carousel) and a consistent body-text-small utility for meta-data like phone numbers and email addresses.
• Page Structure: The layout flows from a full-height animated hero carousel into a structured content grid. Significant vertical space is allocated between sections to provide "breathing room," moving from the hero into a text-based agency manifesto, and finally into a horizontal swiper-based project feed.
• Reusable Components:
  • The Split Carousel Slide: A complex component using image-container left and image-container right with complementary vertical transform values (one sliding up, one down).
  • Slide-out Navigation: A clean, full-screen overlay (slideout-panel --menu) that organizes contact info into columns and uses simple btn-link hover effects.
  • Article Cards: Modular swiper slides using aspectholder for consistent media sizing and absolute-positioned category tags.
• Interaction & Motion: The site relies on staggered entrance animations (indicated by --stagger CSS variables in the HTML). The carousel includes a circular progress indicator (clock) alongside a numerical counter (02/05). Hover states on buttons use a "text-swap" transition where the label shifts vertically.
• Implementation Clues: The HTML uses a modular data-widget architecture (e.g., data-widget="project-carousel", data-widget="feed-swiper"), suggesting a custom JavaScript controller manages specialized behaviors like the Swiper.js integration and custom page transitions.

Use Cases

• Who should clone this pattern: Creative agencies, independent architects, or high-fashion brands that have high-quality photography and need a website that feels as curated as a printed monograph.
• Remix Directions:
  • Quick Clone: Reuse the "Home Feed" swiper section to add a horizontal blog or news reel to an existing site.
  • Deep Clone: Adapt the split-screen vertical carousel for a product launch page where one side shows the product while the other shows lifestyle context.
  • Stylistic Shift: Replace the muted grays with vibrant neon gradients for a digital-first tech portfolio while maintaining the rigid typography grid.
• Practical Remix: The hero carousel is the most distinct asset; it can be remixed as a stand-alone landing page. For a more standard layout, the footer's clean column-based contact grid is easily extractable for any corporate or professional services site.