NotReal Design Agency Portfolio

Overview

NotReal is a high-end creative agency portfolio that utilizes a sophisticated asymmetrical masonry grid to showcase high-fidelity motion and CGI work. It is an excellent clone reference for its seamless integration of video-on-hover previews and a minimal, editorial-inspired typographic hierarchy. The site demonstrates how to balance dense visual media with significant white space to maintain a luxury brand feel.

Design System

• Color Palette & Visual Hierarchy: The site uses a neutral monochromatic base (off-white backgrounds and deep black text) to ensure the vibrant, multi-colored project thumbnails provide all the visual emphasis. The hierarchy is established through extreme scale—large brand logos and headers contrasted against small, technical sans-serif metadata.
• Typography: A dual-font system is employed. A high-contrast serif (likely a custom branding font or Ogg) is used for the main logo and emphasized text like "design-driven creative house," while a clean, low-stroke-weight sans-serif handles navigation and project categories. Small metadata tags (e.g., "cgi / art direction") use a monospace-style lowercase treatment.
• Page Structure: The layout follows a non-linear flow: a high-impact branding header leads into a staggered 12-column grid. Large 8-column wide video tiles alternate with smaller 4-column tiles, creating a rhythmic but unpredictable scrolling experience.
• Reusable Components:
  • Video-on-Hover Tiles: The primary component where a static image <img> is replaced by or layered with a <video autoplay loop> on mouseover.
  • Floating Badges: Minimalist "New!" and "Fresh!" pills that break the grid lines.
  • Scrolling Marquee: A CSS-driven horizontal ticker at the footer used for social media CTAs.
  • Time Tracking Footer: A custom code block displaying local times for global studio locations (BA and MAD).
• Interaction & Motion: Beyond the video hovers, the site uses smooth opacity transitions and subtle layout shifts. The HTML reveals a transition-wrap and masonry-item classes, indicating a reliance on JavaScript-based positioning (Masonry.js) to calculate the complex grid spacing dynamically.
• Responsive Behavior: The data-xl-width and data-sm-width attributes in the HTML indicate a fluid grid that collapses from complex multi-column arrangements to a single-column stack on mobile devices.

Use Cases

• Who should clone this: Motion designers, 3D artists, and creative directors who need a portfolio that prioritizes high-quality video content over long-form text.
• Remix Opportunities: The asymmetrical grid can be adapted for a boutique architecture firm or high-fashion brand by swapping the tech-heavy motion graphics for high-resolution photography.
• Remix Strategy: Builders can reuse the scrolling marquee and the specific grid proportions while swapping the minimal serif for a more aggressive brutalist typeface to change the aesthetic from "luxury" to "underground."
• Clone Scope: For a quick win, clone the header and the alternating 8/4 grid section. A full clone is recommended for those wanting to replicate the sophisticated "Semplice-style" editorial layout system.