Liron Moran Commercial Interiors Portfolio

Overview

This portfolio for Liron Moran Commercial Interiors features a high-impact, minimalist brutalist design centered around a sophisticated custom loading sequence. It is a premier clone reference for developers looking to implement high-end cinematic transitions, numerical loaders, and bold, oversized typography that differentiates a brand through motion and spacing.

Design System

• Color Palette & Visual Hierarchy: A stark, high-contrast monochrome palette (pure black #000 and white #FFF) that prioritizes negative space. The visual hierarchy uses large-scale typography as the primary graphic element rather than relying on imagery during the initial load.
• Typography: The system uses a clean, geometric sans-serif (resembling Inter or a similar grotesque face). It features extreme scale variations, with massive "ICONIC INTERIORS" headings and distinct, small-caps or mono-style secondary text for the loader and credits.
• Page Structure & Components:
  • Interactive Loader: A full-screen overlay featuring a vertical 'rail' animation for numbers (00 to 100%) and a horizontal progress bar.
  • Branded Footer/Header: Minimalist brand identifiers placed at the extreme edges of the vertical axis during loading.
  • Curtain Transitions: The HTML reveals a loader_curtains system (_1tc5s divs) designed to slide horizontally or vertically to reveal content.
• Interaction & Motion Patterns:
  • Rolling Numbers: The loader uses a CSS transform: translate() rail system to cycle through digits, creating a mechanical, precise feel.
  • Progress Bar: A thin, one-pixel horizontal line that expands across the width of the screen.
  • Easing: The implementation utilizes specific cubic-bezier timing functions (e.g., cubic-bezier(0.55, 0.055, 0.675, 0.19)) to create a "weighted" feel to the animations.
• Implementation Clues: Built with React (indicated by the react-view ID) and leveraging Prismic for image management. The styling uses scoped CSS classes with specific animation-timing-function overrides directly in the style attributes for precision control.

Use Cases

• Who should clone this: Architectural firms, luxury fashion brands, or high-end creative agencies that want a "concierge" digital experience where the loading time is transformed into a brand-building animation.
• Remixing Directions:
  • Brand Swap: Keep the numerical rail loader but replace the monocromatic scheme with a high-saturation brand color and a serif typeface for a more editorial look.
  • Functional Adaptation: Adapt the large-scale vertical rail animation for use in financial dashboards or countdown timers for product launches.
  • Navigation Remix: Extract the 'curtain' transition logic to create seamless navigation between project pages in a standard portfolio.
• Suggested Scope: A full-page clone is recommended to capture the sophisticated interplay between the loader and the curtain reveal, as the timing of these elements is what provides the high-end feel.