Split Screen Hero
A copy-left, product-right split with a floating stacked dashboard card.
DOM + CSS1 dep1 file · 3 KB TSX
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
// ---------------------------------------------------------------
}Details
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.
