DNA Capital Healthcare Investment Portfolio Site

Overview

This high-end venture capital site for DNA Capital features a sophisticated dark-themed aesthetic characterized by fluid, scroll-driven GSAP animations and canvas-based data visualizations. It is an excellent clone reference for building immersive, narrative-driven corporate portfolios that require a balance of technical prestige and pharmaceutical-grade cleanliness.

Design System

• Color Palette & Visual Hierarchy: A deep midnight-to-charcoal background (#16161d-style) provides a high-contrast foundation for white and silver-grey typography. Primary emphasis is achieved through large-scale headings, while secondary data is relegated to muted grey shades to maintain focus.
• Typography: The system uses a clean, sans-serif font (likely a custom branding or high-end geometric face) with a hierarchy focused on large heading-a and heading-b classes. Text is often wrapped in lines-mask divs, indicating a split-text animation style for staggered entry.
• Page Structure: The flow is linear and cinematic: a minimalist hero with a scroll-indicator, followed by an 'About' section featuring interactive canvas graphs, a video-integrated team section, and a global location footer.
• Reusable Components:
  • Canvas Graphs (.graph): Circular data visualizations using <canvas> for smooth value counting and stroke rendering.
  • Video Blocks: Parallax-enabled containers (.video-container) that scale and translate based on scroll position.
  • Scroll-Triggered Content Rows: Vertically stacked text blocks (.row-content) that transition opacity (from 0.02 to 1) as they enter the viewport.
• Interaction & Motion: The implementation relies on fixed-position content containers and transform: translate3d for smooth parallax. Page transitions use a dedicated .transition overlay for seamless navigation.
• Implementation Clues: Built using Nuxt.js, as evidenced by the __nuxt and __layout IDs. The use of data-v- scoped attributes suggests a Vue-based component architecture designed for high performance.

Use Cases

• Who should clone this: Agency developers building for luxury brands, biotech firms, or fintech startups that need to convey authority and modern technical stacks.
• Effective Remixes: This layout works exceptionally well for annual reports, impact studies, or product landing pages where heavy data (the graphs) needs to be paired with emotive imagery (the video blocks).
• Remix Directions: Swap the dark background for a clinical white/blue palette for a more traditional medical feel, or adapt the video parallax section to showcase software UI walkthroughs instead of lifestyle footage.
• Clone Scope: A full-page clone is recommended to capture the synchronized scroll-jacking feel, but the .graph canvas components and the .lines-mask heading styles are modular enough to be reused as standalone UI tokens.