MetaMusic Service Landing Page

Overview

MetaMusic is a sophisticated service landing page designed for managing complex industry data. It is a premier reference for cloning due to its unique "notched corner" UI language and highly polished horizontal scrolling carousels. It demonstrates how to present dense technical information through a playful, modern aesthetic that balances technical utility with creative industry appeal.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast palette featuring a vibrant primary blue (-primary-500), deep purples (-lilac-500), and dark neutrals (-neutral-700). Background colors shift between sections to define distinct content blocks, using these bold colors to guide the eye toward call-to-action (CTA) elements.
• Typography: The system uses a clean, sans-serif font scale. It utilizes heavy weights for oversized hero titles (c-hero_title) and smaller, all-caps overlines (c-overline) to provide categorization and structural hierarchy.
• Page Structure: The layout follows a modular flow: an immersive hero section with floating SVG illustrations, a vertical feature list, a large horizontal scrolling card deck for value propositions, a multi-step process guide, and finally a logo marquee for social proof.
• Reusable Components:
  • Notched UI Elements: The core visual hook is the o-notch component used for buttons and cards, which features a cut-out corner containing indices or icons.
  • Interactive Cards: The c-card component combines icons, titles, and descriptions within a specific geometric frame.
  • Logo Marquee: A seamless horizontal infinite scroll (c-marquee) for partner logos.
• Interaction & Motion: The site heavily utilizes parallax scrolling (data-scroll-parallax) for floating illustrations and horizontal scroll triggers for the card decks. Entry animations use transform offsets (translating from 120px to 0px) combined with opacity fades to create a staged entrance for text blocks.
• Implementation Clues: HTML classes indicate a utility-first approach with a custom component library (prefixed with o- for objects and c- for components). It uses flickity for carousels and appears to rely on GSAP or a similar engine for sophisticated scroll-based transformations.

Use Cases

• Who should clone this pattern: B2B SaaS builders or service providers who need to explain a complex workflow or a multi-stakeholder platform without overwhelming the user.
• Target Products: Creative agencies, music distribution platforms, Fintech dashboards, or educational tools that benefit from a "guide-style" horizontal flow.
• Practical Remix Directions:
  • Geometric Branding: Swap the notched corner radius or shape (e.g., change the -radius-sm class) to match different brand identities.
  • Simplified Architecture: Reuse the multi-step c-step section to create onboarding guides or "How it Works" sections for any product.
  • Icon Swap: The floating SVGs in the hero can be replaced with 3D renders or product screenshots to shift from an illustrative to a literal style.
• Suggested Clone Scope: Start by cloning the o-notch CSS and the horizontal card container (o-horizontal-layout) as a standalone feature section before committing to the full multi-layered page structure.