Prisma Labs App Showcase Landing

Overview

This landing page is a masterclass in high-impact simplicity, designed to showcase mobile applications through bold typography and dynamic visual layering. It is a strong clone reference for developers who want to replace static screenshots with interactive, layered mockups that use video backdrops to create depth and movement.

Design System

• Color Palette & Visual Hierarchy: The design uses a clean white background with high-contrast black typography. Vibrant accent colors (Sunburst Yellow and Sky Blue) are used for Call-to-Action (CTA) buttons and the animated "video blobs" that sit behind device mockups to draw the eye.
• Typography: The system relies on a bold, geometric sans-serif (reminiscent of Montserrat or Inter). Headers use a large scale with tight tracking and leading for a modern feel. Utility text (navigation) is smaller and uppercase to maintain hierarchy.
• Page Structure: The layout follows an alternating zig-zag pattern. The hero section features left-aligned text with a right-aligned mockup; subsequent sections reverse this layout to maintain visual rhythm during vertical scrolling.
• Reusable Components:
  • Magnetic Buttons: The cta-a-container and move classes suggest a "magnetic" hover effect where the button follows the cursor slightly.
  • Interactive Mockups: The iphone-wrapper contains multiple layered images (before, iphone, before-pen) and a video tag, designed to swap states or animate elements upon interaction.
  • Responsive Layout: The use of grid56 and grid44 classes indicates a proportional column-based grid system (56% and 44% widths) that stacks vertically on mobile.
• Interaction & Motion: The presence of will-change: transform and opacity: 0 on specific image layers indicates sophisticated entrance animations or hover-triggered "Before/After" reveals. Background motion is provided by looped MP4 "blobs" constrained within a circular mask.

Use Cases

• Who should clone this: App developers, SaaS founders, and UI/UX designers looking to build a high-converting "Features" page that feels premium and active rather than static.
• Effective Remixes: This pattern works perfectly for any mobile-first product. A developer could swap the video-blob background from orange to a brand-specific gradient or replace the iPhone mockup with a browser frame for Web Apps.
• Remix Directions: Reuse the alternating section grid for service pages, or isolate the iphone-wrapper component to create a standalone product hero section. The magnetic button container is a great micro-interaction to lift from the code for any CTA.
• Clone Scope: A quick section clone is ideal if you only need a hero section; however, cloning the full page is recommended to capture the layout transitions and the cohesive "blob" animation ecosystem.