Split Screen Hero
A copy-left, product-right split with a floating stacked dashboard card.
- Category
- Heroes
- Added
- 2026-09-01
- Deps
- 1
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Ship dashboards your team will actually open.
Turn raw event data into live, shareable dashboards in minutes. No SQL required.
Props
"use client";
// Full-size shippable hero. The registry preview above is a scaled-down
// stand-in for this component at normal type scale.
import { motion } from "framer-motion";
function ProductStack({ showSecondaryCard }: { showSecondaryCard: boolean }) {
return (
<div className="relative isolate flex items-center justify-center">
{showSecondaryCard && (
<motion.div
initial={{ opacity: 0, x: 16, y: 16 }}
animate={{ opacity: 1, x: 0, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
className="absolute z-0 h-56 w-80 -translate-x-4 translate-y-8 rotate-[7deg] rounded-2xl border border-white/10 bg-white/5"
/>
)}
<motion.div
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
This hero commits to a single structural bet: an even split between argument and artifact, each given its own half of the frame rather than stacked on top of one another. It suits products whose interface is the sales pitch — dashboards, editors, anything with a screen worth showing — and undersells products that are more about outcome than surface, where a screenshot reads as filler. The non-obvious detail is the `relative isolate` on the right-hand column: the background card sits at a lower stacking order using a negative-feeling offset purely through DOM order and z-0/z-10, and without `isolate` a `position: relative` alone won't reliably keep that layering local to the column on all browsers once other positioned siblings exist. The caveat: at narrow widths the grid collapses to one column and the product panel drops below the fold-equivalent scroll point, so treat the mobile stacking order as a deliberate decision, not an afterthought.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Product Shot Hero
heroesA dominant framed app-window screenshot mock with the headline as a caption above it.
SaaS Landing Page
templatesA full marketing landing page: nav, hero, logo band, feature grid, and footer.
Bento Preview Hero
heroesCopy beside an asymmetric bento grid of small feature-glimpse tiles.