Redis Agency Creative Design Portfolio

Overview

Redis Agency’s portfolio is a masterclass in high-end creative direction, utilizing immersive scroll interactions and bold typography to create a cinematic user experience. It serves as an excellent reference for builders looking to implement smooth, non-standard navigation like Lenis-based smooth scrolling and complex Lottie-driven transitions.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic base (pure black #000000 and white #FFFFFF) to create a premium, editorial feel. Visual hierarchy is established through extreme scale, where massive typography and centered imagery command attention.
• Typography: The system features a sophisticated mix of a classical high-contrast serif for headings (as seen in the "Redis" logo treatment) and a clean, utilitarian sans-serif for body text and navigation labels. Proportional spacing and large font sizes are used to transform text into a graphic element.
• Structure & Flow: The site follows an unconventional single-page flow featuring a fixed scroll-view container. It moves from a massive hero branding section into an 'About' section with split-list layouts for services and featured projects, ending in a bold 'Contact' section.
• Reusable Components:
  • Contact Modal: A slide-out panel (form-popup__container) containing a multi-step form, file upload functionality, and social links.
  • Navigation: A minimal hamburger menu (menu-popup-new) that expands into a full-screen overlay with staggered link animations.
  • Footer-less Layout: The contact section acts as the terminal point, featuring large email links instead of a traditional footer.
• Interaction & Motion: The site relies heavily on scroll-triggered animations. HTML evidence shows the use of data-lenis-prevent for modal scrolling and target-lottie for complex vector animations. The images (like the botanical 'botva' elements) are layered with different scroll speeds to create a parallax depth effect.
• Implementation: Built on Webflow, the site uses a heavy container-based structure (global-wrapper) and precise absolute positioning for decorative assets to ensure they frame the content during the scroll sequence.

Use Cases

• Who should clone this: Creative agencies, luxury brand studios, and independent designers looking to showcase a high-impact, low-content portfolio that focuses on "vibe" and motion over text density.
• Remix Directions:
  • Brand Swap: Keep the interaction framework but replace the monochrome palette with vibrant gradients or Brutalist colors.
  • Content Adaptation: Use the massive typography headers for product features in a SaaS landing page instead of agency services.
  • Selective Reuse: Clone the mobile-responsive slide-out contact form and the Lottie preloader for use in more traditional layouts.
• Clone Scope: A full-page clone is recommended to maintain the integrity of the scroll-based layout, though the contact modal is a perfect standalone component for any professional service site.