UNLIRICE Minimalist Floating Gallery Landing

Overview

UNLIRICE is a minimalist, high-impact landing page that uses a dynamic gallery system where images drift and rotate across the viewport. It is an excellent reference for creatives looking to build an unconventional, non-linear portfolio or a brand splash page that emphasizes motion and serendipity over traditional grid layouts.

Design System

• Color Palette and Visual Hierarchy: The design uses a stark, high-contrast monochrome base (pure white background #FFFFFF and black text #000000). Hierarchy is established through scale; the central logotype acts as the primary anchor, while floating perimeter elements create a secondary layer of visual interest.
• Typography System: The typography is bold and functional. It features a heavy sans-serif typeface for the main brand mark ("UNLIRICE") and a medium-weight sans-serif for secondary links like the pagination/version marker ("#00"). Text is used sparingly, primarily for functional navigation and brand identity.
• Page Structure and Section Flow: Unlike standard vertical scrolls, this is a single-screen "stage." The center is occupied by the brand logo (home-logo), while the background and foreground layers (home-gallery) house floating image components that move independently.
• Reusable Components:
  • Floating Post Container: A div wrapper with CSS-based gallery-h and gallery-v animations for directional movement.
  • Rotating Image Child: Nested image containers (image-container) that apply continuous CSS keyframe rotations (rotating and rotating2).
  • Utility Overlay: The #00 fixed link serves as a minimal navigation anchor in the top right.
• Interaction and Motion Patterns: The primary interaction is passive; images float across the screen using randomized speeds and durations (visible in the inline styles as varied animation-duration). Elements also feature a persistent 360-degree rotation. The logo uses a class-based transition system (is-start) for entry animations.
• Implementation Clues: The site utilizes a WordPress backend with custom JavaScript to handle the distribution and animation of elements. Inline styles are used heavily to inject randomized timing and starting positions (top, left, width) for the floating gallery items.

Use Cases

• Who should clone this pattern: Creative directors, visual artists, and experimental fashion brands who want a landing page that feels like a digital installation rather than a store.
• Products for remixing: Music label homepages, lookbooks for seasonal fashion drops, or digital design agency portfolios where "vibe" precedes information density.
• Practical remix directions:
  • Architecture: Swap the central text for a video loop or a 3D canvas while keeping the floating perimeter image logic.
  • Interactivity: Change the passive floating to cursor-reactive movement where images flee or follow the mouse.
  • Branding: Adjust the heavy black-on-white theme to a "dark mode" aesthetic with neon accents for a tech-focused feel.
• Suggested clone scope: A full-page clone is best to preserve the spatial logic, though the floating image container logic can be extracted as a standalone background effect for more traditional sites.