Posthuman Studio Portfolio Gallery

Overview

Posthuman Studio Portfolio is a high-end creative showcase featuring a sophisticated freeform masonry gallery that breaks the traditional grid. It serves as an excellent clone reference for its seamless integration of auto-playing video thumbnails and a minimal, sticky navigation system that remains secondary to the visual content.

Design System

• Color Palette & Visual Hierarchy: A clean, high-contrast palette of white and black (#000000) creates a neutral backdrop for vibrant, multi-colored media. Visual hierarchy is established through image scale and staggered placement rather than text size.
• Typography: A minimalist sans-serif system using all-caps for project titles (e.g., "COSMIC DRIVE", "HELENA RUBINSTEIN"). Titles use a light font-weight and generous tracking, while the navigation uses a slightly bolder weight for the active brand mark.
• Page Structure: The site uses a two-tier structure: a fixed header containing the branding on the left and navigation links (Work, About, Play) on the right, followed by a gallery-freeform container that allows for asymmetrical image positioning.
• Reusable Components:
  • Sticky Header: A lightweight, pinned top navigation (pinned-top fixed) that uses flexbox to justify content.
  • Media Cards: Custom media-item components that wrap both static images and <video> tags with playsinline, autoplay, and loop attributes.
  • Hover Captions: Captions are positioned directly below or overlapping media, maintaining a tight relationship between title and visual.
• Interaction & Motion: The interface relies on automatic video playback within the gallery items to create a sense of life. The HTML evidence of video-player-playing vs video-player-stopped classes suggests a state-based visibility toggle often triggered by viewport entry or hover.
• Mobile Behavior: The gallery-freeform component includes mobile-gutter="2rem" and mobile-stack="true" attributes, indicating a transition from an asymmetrical spread to a simplified vertical stack on smaller screens.

Use Cases

• Who should clone this: Motion designers, 3D artists, and creative agencies looking to showcase a high volume of visual work without the clinical feel of a standard square grid.
• Effective Remixes: This layout is perfect for fashion lookbooks or architecture portfolios where the scale and orientation of each project image should vary to reflect the content.
• Remix Directions: Builders could swap the white background for a dark mode palette to emphasize cinematic lighting in their work, or replace the freeform layout with a rigid CSS Grid while keeping the video-on-hover logic.
• Suggested Clone Scope: Start by cloning the gallery-freeform structure to master the absolute positioning and z-indexing (freeform-z) of media items before implementing the full multi-page navigation.