SNOG Productions Creative Portfolio Gallery

Overview

This portfolio for SNOG Productions is a masterclass in immersive, motion-driven minimalism. It utilizes an asymmetric, depth-based image gallery where scrolling triggers complex Lottie animations and shifts in spatial hierarchy, making it an excellent reference for high-end creative agencies and production houses looking to elevate their visual storytelling.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast palette of stark white, deep black, and a vibrant primary red (#FF0015 visible in the logo and link hover states). The primary visual hierarchy is driven by imagery; posters and photography serve as the dominant elements against a neutral canvas.
• Typography: The typography system relies on a bold, sans-serif aesthetic. The logo and main headings use an ultra-wide, heavyweight font, while navigation links (e.g., "PROJECTS", "ABOUT") use a cleaner, all-caps sans-serif typeface to maintain clarity without competing with the vibrant project visuals.
• Page Structure: The layout features a fixed top navigation bar and a centralized, large-scale Lottie logo animation. Below the fold, the site transitions into multiple collectionfeatured dynamic lists that use unconventional positioning (asymmetric grid) and varying scale3d values to create a 3D parallax effect on scroll.
• Reusable Components: Key items to clone include the lottie-animation logo containers that handle scroll-based state changes, the navtitrecontainer with its animated underline (lineundertext), and the custom cursorcontainer that follows the mouse with a contextual "SEE MORE" call to action.
• Interaction & Motion: The site is heavily reliant on Webflow's interaction engine (IX2). HTML evidence shows sophisticated scroll-triggers where div-block scales and positions (translate3d) change dynamically. Hovering over images triggers titrefeatured visibility, syncing specific project titles with their corresponding posters.
• Implementation Clues: The code reveals multiple overlapping w-dyn-list elements (Webflow CMS), indicating that the layout is built by stacking collection lists and using CSS transforms/absolute positioning to scatter images across the viewport for a "floating" effect.

Use Cases

• Who should clone this pattern: Creative directors, film production companies, and high-fashion photographers who need a portfolio that feels as cinematic as their work.
• Remix Directions: Swap the red accent for a different brand-specific primary color; adapt the floating grid into a more structured grid for e-commerce Lookbooks; or reuse the Lottie scroll-animation logic for a heavy-hitting landing page hero section.
• Suggested Clone Scope: A full-page clone is most effective here to preserve the fragile balance of motion and spacing. However, the navmobile and the custom animated cursor can be extracted as standalone components for lighter projects.