Hypertria Agency Portfolio Landing Page

Overview

Hypertria is a high-motion agency portfolio that uses bold, immersive visuals and 3D typography to establish a premium creative brand identity. It is a strong clone reference for developers looking to master video-heavy landing pages, scroll-triggered reveal animations, and non-standard layout structures that break the traditional grid.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast 'Dark Mode' foundation (pure black #000000) to make white 3D elements and vibrant accent colors—like the lime green (#409b3f) in the footer marquee and pink cookie modal—stand out. The hierarchy is driven by scale and motion rather than traditional text blocks.
• Typography: The system pairs a high-character Serif (BigCaslon) for project titles with a modern, technical Sans-Serif (WhyteInktrap) for descriptions. The typography is often oversized, using large letter spacing and 3D rendering to act as a primary visual element.
• Page Structure: The flow begins with a full-bleed showreel video (#landing-video-section), followed by alternating project showcases (#projects-section) that use staggered layouts (left-aligned vs. right-aligned). It concludes with an infinite horizontal scrolling marquee (#outer-sliding-effect) serving as a call-to-action.
• Reusable Components:
  • The 'Hyper' Cookie Modal: A distinct pink pill-shaped box with a high-contrast red 'Accept' button.
  • Interactive Project Links: Large-scale text links paired with 'arrow-simple' animations.
  • Infinite Marquee: The 'Dare to go Hyper?' sliding ribbon created using a duplicated #content loop for a seamless transition.
  • Floating Navigation: Minimalist top-right 'Agency' and language toggle ('En').
• Interaction & Motion: The site relies heavily on data-scrollreveal attributes for orchestrating entry animations (e.g., enter top over 3s). The cursor is custom-styled, and video elements are set to autoplay and loop to maintain a sense of constant energy.
• Implementation Clues: The HTML reveals a custom WordPress build (/wp-content/themes/Hypertria-rebrand/) using Bootstrap-style grid classes (col-md-6, row no-gutters) for the inner layout, while manual CSS transforms (translatey, opacity: 0) manage the initial state of animated elements.

Use Cases

• Who should clone this: Creative agencies, motion designers, and high-end fashion or production studios wanting a 'brutalist' yet polished portfolio.
• Remixing the Content: Instead of the 3D 'Hyper' branding, developers can swap the hero video for high-quality product renders or architectural walkthroughs while maintaining the scroll-reveal logic.
• Practical Directions:
  • Information Architecture: Replace the abstract headlines with clear value propositions for a SaaS product while keeping the oversized typography scale.
  • Section Cloning: The infinite marquee is an excellent standalone component to clone for 'As Featured In' sections or 'Sale' banners.
• Clone Scope: A full-page clone is best for those wanting to replicate the precise timing of the scroll reveals. For a quicker remix, focusing on the #landing-video-section and the unique cookie banner provides the most immediate visual impact.