Rauno Freiberg Horizontal Scroll Portfolio

Overview

This portfolio by Rauno Freiberg features a sophisticated horizontal deck navigation that reimagines the typical vertical scroll as a series of distinct, large-scale frames. It is a premier reference for builders wanting to implement high-fidelity motion design, specifically focusing on smooth transitions, clipping animations, and unique navigation metaphors like the "minimap" progress bar.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast minimalist base (white backgrounds, black typography) with a singular, high-vibrancy accent color (Canary Yellow #FFFF00). Visual hierarchy is established through scale rather than color, using massive glyphs and geometric shapes to anchor each frame.
• Typography: The system relies on a clean, geometric sans-serif (Inter or similar). Headlines use a tight tracking and large scale, while auxiliary information like frame labels uses small, uppercase or semi-bold metadata styles for a blueprint-like aesthetic.
• Page Structure: The layout is organized into horizontal frames (index_frame__XKrH1) with a fixed width of 1200px and height of 720px. Each frame serves as a standalone canvas for a specific project or bio section, connected by a top-bar progress minimap that tracks horizontal position.
• Reusable Components:
  • Frame Container: A standardized 1200x720 canvas that ensures design consistency across different content types.
  • Minimap Navigation: A set of vertical lines and tracker blocks at the top of the viewport that provides spatial awareness during horizontal movement.
  • Clip-Reveal Text: A motion component (index_clipReveal__tvsbV) that uses overflow: hidden and translateY transforms to slide text into view from a masked container.
• Interaction & Motion: The core experience is driven by horizontal scroll-jacking or swipe. Frames scale slightly (transform: scale(0.98)) during transition to create depth. Interactive elements like the email button feature nested vertical slides for state changes (e.g., "Email" to "Copied").
• Implementation Clues: Built with Next.js (__next ID) and likely Framer Motion for the complex transform-based animations. The CSS utilizes a system of CSS variables (e.g., --frame-width, --line-gap) for a highly modular, grid-based layout.

Use Cases

• Who should clone this: Creative developers, interaction designers, and agency studios who want a site that feels like a physical presentation deck or a premium terminal interface.
• Remix Directions: This pattern works effectively for high-end product landing pages where storytelling is linear. You can remix it by swapping the yellow circle for 3D GLTF models or changing the frame aspect ratios to suit photography-heavy portfolios.
• Suggested Clone Scope: For a quick win, clone the Minimap Progress Bar and the Clip-Reveal Text components. For a comprehensive project, clone the Horizontal Framed Canvas structure to replace a standard vertical "About" page with an immersive walkthrough.