Stink Studios Creative Agency Portfolio

Overview

Stink Studios' portfolio is a masterclass in high-end creative agency design, featuring a dynamic visual-first hero and a sophisticated content grid. It is an excellent clone reference for those looking to implement seamless video-to-background transitions and complex sticky typography overlays that change state during scroll.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast foundation (black/white) but relies on "logo blending" and background colors extracted from media to create an immersive experience. The hierarchy is driven by large-scale typography that layer over media reels, ensuring the brand name remains a constant focal point.
• Typography: The system utilizes robust sans-serif weights for headers (global_font-subtitle) and smaller, monospace-adjacent or clean sans-serifs for navigation and metadata (global_font-caption). Emphasis is achieved through scale and GSAP-animated character reveals.
• Page Structure:
  1. Dynamic Hero: A full-bleed video player (VideoPlayer_wrapper) behind a large sticky logo overlay.
  2. Brand Statement: A centered, large-scale headline with word-by-word animation.
  3. Project Grid: A dense collection of cards (ProjectGrid_project) that use varied aspect ratios and internal padding to create a rhythmic, non-linear flow.
  4. News Feed: A minimalist list of site updates with date stamps and integrated animated icons ("dings").
• Reusable Components: The VideoPlayer component (supporting blobs/loops), the ProjectGrid (asynchronous image/video loading), and the sticky menu with light/dark mode toggles are high-priority targets for cloning.
• Interaction & Motion: The site heavily employs GSAP for staggered animations on text elements (gsap-animate-word) and filter-based image reveals. A notable pattern is the use of blob: URLs for seamless video background playback.
• Implementation Clues: Built with Next.js (indicated by __next and next-route-announcer), the site uses CSS Modules for scoping and GSAP for state-based animations and layout transitions.

Use Cases

• Who should clone this: High-end creative agencies, production houses, and independent directors who need a visually dominant, media-heavy portfolio.
• Effective Remixes: This pattern works perfectly for fashion Lookbooks or cinematic storytelling sites where imagery must precede text. The project grid can be remixed for an e-commerce "Editorial Collection" page to show products in lifestyle contexts.
• Practical Directions: Builders can swap the complex GSAP logic for standard CSS scroll-timeline or framer-motion while keeping the specific grid layout (global_subgrid). The "logo blend" effect can be simplified by using mix-blend-mode: difference on a fixed header.
• Suggested Scope: A full-page clone is recommended to capture the sophisticated interplay between the sticky hero and the scrolling grid contents.