ONE Portfolio Immersive Video Layout

Overview

This website for ONE is a sophisticated example of high-end studio portfolio design, featuring a minimalist aesthetic and immersive full-bleed video. It serves as a strong reference for builders looking to implement cinematic "entry" effects, seamless scroll-triggered reveals, and typographic-heavy layouts that prioritize brand identity over complex UI.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic base (white background with black text) to ensure legibility and focus. Visual hierarchy is established through a large, edge-to-edge video hero that captures immediate attention, followed by clean, horizontally-aligned text sections.
• Typography: The system relies on a clean, sans-serif typeface. It features a bold uppercase brand logo ("ONE") and clearly labeled functional buttons ("Contact"). Body text is formatted in a controlled measure for readability, with high-quality spacing throughout.
• Page Structure & Section Flow:
  • Hero: Full-screen immersive video with rounded corners (12px border-radius) and centered playback controls.
  • Manifesto: A centered text section using <mark> tags for highlighted readability.
  • Partner List: A horizontally structured grid of button-like list items.
  • Animated Brand Strip: Multiple horizontal marquee strips (logo-strip) moving at varying speeds (18s to 32s durations) to create depth.
  • Keywords Grid: A dense list of services and themes (sentences-list) presented in a simple, flat structure.
• Reusable Components:
  • base-button: A minimalist button with a pill-shape border, adaptable for standard, blur, or dark mode variants.
  • index-entry-video: A robust video wrapper component optimized for high-quality background loops using Mux streaming.
  • logo-strip: A CSS-animated background marquee for secondary brand signaling.
• Interaction & Motion: The site uses GSAP-style parallax and scale transforms (scale3d, translate3d) as seen in the HTML. As users scroll, content transitions through different opacity levels and scale states (from 0.85 to 1.0).
• Implementation Clues: Built using Nuxt.js, the site utilizes a component-driven architecture. Layouts are managed with a standard 12-column grid system (row, col, justify-center).

Use Cases

• Who should clone this: Creative agencies, production houses, and independent artists who want a "silent" but premium digital presence that lets their video work speak first.
• Effective Remix Directions:
  • Showcase: Swap the hero video for a high-res image slider or a WebGL experiment.
  • Architecture: Adapt the sentences-list into a tag-based navigation system for filtering projects.
  • Minimalism: Use the logo-strip logic to build a client logo carousel for B2B SaaS landing pages.
• Suggested Clone Scope: A partial clone focusing on the fixed header and the immersive video entry (index-preview) provides a high-impact landing page experience with minimal developmental overhead.