Block Showcase — React Page Block
Product showcase stage: browser-chrome frame with a replaceable screenshot or video (built-in CSS demo screen by default), headline and actions, with a gentle pointer tilt.
Usage
import { BlockShowcase } from "@/components/BlockShowcase";
export function Tour() {
return (
<BlockShowcase
eyebrow="Product tour"
title="Every launch, in one orbit."
description="Plan the release, watch the numbers move."
primaryCta={{ label: "Start free", href: "/start" }}
media={<img src="/app-screenshot.png" alt="Orbit release dashboard" />}
caption="Replace the built-in demo screen with your own media."
{...{
title: "Every launch, in one orbit.",
accent: "#d5ed9a",
interactive: true,
scheme: "dark"
}}
/>
);
}Implementation notes & API
Purpose: product showcase with a device frame and replaceable media. Copy it, ship it — every string, link and color arrives through props. Runtime: pure DOM + CSS. No WebGPU, canvas, animation library or external assets; SSR-safe on first render. Theming: root custom properties (--vb-bg, --vb-fg, --vb-accent, --vb-border, --vb-radius, --vb-container) or the accent/scheme/className/style props. scheme flips the dark default to light. Guardrails: responsive via container queries down to 320px; interactive behavior degrades on touch; prefers-reduced-motion drops entrance/scroll motion while content stays complete. The default screen is a fictional release dashboard drawn in CSS (role=img, labeled as demo) — pass media to replace it; the frame scales any aspect via object-fit.
| Property | Type | Notes / default |
|---|---|---|
eyebrow / title / description | ReactNode | Replaceable example copy |
primaryCta / secondaryCta | { label, href? , onClick? } | null | Actions under the headline |
media | ReactNode | Your screenshot/video; defaults to a fictional CSS demo UI |
mediaAlt | string | Accessible description for the default demo screen |
caption | ReactNode | Note under the stage; pass null to remove |
interactive | boolean | true; pointer tilt on the frame, still on touch/reduced-motion |
scheme | "dark" | "light" | dark |
accent | string (hex) | Sets --vb-accent for the whole block |
className / style | string / CSSProperties | Applied to the section root |
children | ReactNode | Replaces the default content entirely |