Panic Animation Studio Portfolio Showcase

Overview

Panic Animation Studio's website is a high-impact portfolio that blends cinematic video backgrounds with a minimalist, high-contrast typography layer. It serves as an excellent reference for creators needing to showcase motion work through a non-traditional, asymmetrical layout that breaks the standard "square grid" mold.

Design System

• Color Palette & Visual Hierarchy: The site uses a warm, neutral base (peach/cream tones seen in the hero) juxtaposed with stark black typography and a vibrant mint-green brand accent (#00ffa2 approx.) for the logo. The hierarchy is driven by massive scale—the hero text and video assets dominate, while navigation and labels remain secondary in thin, spaced-out strokes.
• Typography: The design uses a sophisticated mix. A high-contrast, elegant serif is used for the primary "We're an animation studio" headline, creating a premium feel. The navigation and secondary UI labels use a geometric sans-serif (likely for legibility) with wide letter-spacing.
• Page Structure & Flow: The layout follows a layered stack:
  1. Full-screen Hero: Multi-video slider background with centered typography and an "Explore works" pill button.
  2. Alternating Grid: A series of containers (.sc-ffmr80-1) that flip between single wide video showcases and split-column layouts where video and text are offset.
  3. Logo Ticker: A continuous horizontal scroll feature (#name-drops-logos) for client social proof.
  4. Complex Footer: A multi-column contact section categorized by geographic region and inquiry type.
• Reusable Components:
  • Hero Video Slider: The HTML shows multiple video tags with opacity and transform logic for transitions.
  • Offset Project Cards: Asymmetric containers that mix video and img tags with project descriptions positioned in the white space.
  • Pill Buttons: Rounded outline buttons with internal hover states for "Explore works."
• Interaction Patterns: The design relies on scroll-triggered movement. Specifically, the .hero-background elements in the HTML use translate3d for subtle parallax or entrance effects. There is also a vertical arrow indicator in the bottom right to guide user flow.
• Implementation Clues: Built using Next.js (indicated by __next and data-reactroot) with Styled Components (the sc- prefixed class names), suggesting a highly modular, CSS-in-JS architecture optimized for performance.

Use Cases

• Creative Agencies: Perfect for studios specializing in 3D, motion graphics, or video production that want their work to feel immersive rather than categorical.
• High-End Fashion & Lifestyle Brands: Companies with high-budget visual assets can remix the hero section to create an atmospheric landing page.
• Remix Directions: Replace the illustrated characters with high-resolution product photography to transform the site into a luxury brand lookbook. Alternatively, reuse the "offset grid" logic for a blog layout to make text-heavy content feel more dynamic.
• Clone Scope: Start with the Hero Section to master the overlay of high-contrast serif typography on video. The Footer/Contact Section is also a great clone candidate for businesses with complex global representatives.