AssetFrame.tsx

AssetFrame displays product visuals inside a simple browser-style frame. Use it for app screenshots, product videos, feature walkthroughs, and homepage showcase sections.

It currently supports three render modes:

• Mocked asset - Renders AssetMockup from components/svgs/AssetMockup.tsx
• Image asset - Renders a Next.js <Image />
• Video asset - Renders a muted, looping, autoplaying <video />

Props

Usage

Mocked Placeholder

Use isMocked while your product visuals are not ready yet:

import { AssetFrame } from '@/components/AssetFrame';

export function AppShowcase() {
  return (
    <AssetFrame
      isMocked
      src="/images/app-screenshot.png"
      alt="Product dashboard"
    />
  );
}

This renders AssetMockup, not /images/app-screenshot.png.

Screenshot

Remove isMocked to render a real image:

<AssetFrame
  src="/images/app-dashboard.png"
  alt="Plainform dashboard overview"
/>

Video

Use isVideo for MP4 walkthroughs:

<AssetFrame
  isVideo
  src="/videos/product-demo.mp4"
  posterSrc="/images/product-demo-poster.png"
  alt="Product demo video"
/>

The video is rendered with loop, autoPlay, muted, and playsInline.

Where To Customize

Use this component when you want to show what your product does:

• Homepage app showcase
• How-it-works tabs
• Feature walkthrough sections
• Product screenshots
• Short product videos

Add your own screenshots or videos to your public assets folder, S3 bucket, or another configured media source, then pass the URL through src.

Current Usage

AssetFrame is used in:

• components/AppShowcase.tsx
• components/HowItWorks.tsx

Both currently pass isMocked, so they render AssetMockup. To show real media, remove isMocked and provide the real image or video URL from locales/en.json.

Related

• Custom Icons - SVG illustrations and mockups
• ImageWithFallback - Image fallback handling