International Magic Immersive Portfolio Feed

Overview

This site is a high-end immersive portfolio for International Magic, a creative studio. It utilizes a sophisticated dark-mode aesthetic with a scroll-driven grid that feels both experimental and structured, making it an excellent reference for creators needing a high-impact, non-linear way to showcase visual media and case studies.

Design System

• Color Palette & Visual Hierarchy: A strict dark-mode color story using a deep black background (#000000) with high-contrast white text for headers and muted grey (text-grey-500) for secondary subtitles. Visual hierarchy is driven by absolute scale and vertical spacing rather than color.
• Typography: The system uses a clean, modernist sans-serif. Headers (type-h1) are large and impactful with tight leading (-short). Badges use a smaller uppercase type-caption style for information density.
• Structure & Flow: The page is built as a vertical "feed" of projects. Each project consists of a sticky title block followed by a custom CSS grid (x-grid) where media elements are placed using specific column/row spans (e.g., --w: 8; --h: 24).
• Reusable Components:
  • Sticky Media Teaser: A central video/image box that remains fixed as the user scrolls through the project's secondary assets.
  • Categorization Badges: Rounded, outlined secondary buttons (-outline -rounded) used to tag project types (e.g., "App", "Ecom", "Show").
  • Floating Menu: A minimal overhead navigation bar with a centered logo and ghost-style buttons for "Work" and "Info".
• Interaction & Motion: The HTML reveals heavy use of CSS variables for motion (--motion-translateY, --motion-scale). Elements appear to scale and fade based on scroll progress, creating a parallax-like entry as users move down the feed.
• Implementation Clues: The site is built with Nuxt.js and uses Headroom.js for the sticky navigation. It utilizes a custom grid layout system defined by inline style variables for positioning elements on a 24-column grid.

Use Cases

• Creative Portfolios: Digital artists, photographers, and motion designers can clone the x-grid structure to showcase varied media aspect ratios without the rigidity of a standard Pinterest grid.
• Fashion Lookbooks: High-end brands looking to present collections through immersive video and high-quality photography can remix the sticky media blocks for a cinematic experience.
• Technical Case Studies: Agencies can reuse the header/badge system to clearly categorize diverse project types while maintaining a unified brand voice.
• Remix Directions: Swap the dark background for a high-key white aesthetic for a clinical, gallery look; adapt the 24-column grid into a 12-column variant for simpler content management.
• Clone Scope: The sticky header and the individual index-feed-item grid are the most valuable components for quick section cloning.