Split Media Hero
A free editorial split media hero section for Next.js and React.
Creative collaboration, considered
Give bold ideas room to become undeniable
Shape the launch story beside the work itself. Northline keeps artboards, assets and decisive feedback in one focused canvas.
Northline / Field Notes
Shared canvas
Make room for the unfinished.
A journal for ideas that become better through shared attention.
Customise
Code
<HeroSplitMedia
eyebrow="Creative collaboration, considered"
title="Give bold ideas room to become undeniable"
subtitle="Shape the launch story beside the work itself."
cta={{ label: "Start a canvas", href: "/start" }}
secondaryCta={{ label: "See how teams work", href: "/workflow" }}
media={<ProductCanvas />}
/>Split Media Hero is a free hero section for Next.js and React that places focused launch copy beside a substantial media composition. It uses Tailwind container queries for an asymmetric layout that follows the hero's own width, so it holds in a narrow column or preview as well as full width, and Motion for an opposing entrance, played once as the section scrolls into view, plus an optional smoothed, non-pinned media parallax on wider screens.
Copy remains first in the document at every breakpoint, both calls to action are real anchors, the consumer supplies the accessible image, poster or interface composition, and reduced motion plus no JavaScript preserve the complete final layout without movement.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/hero-split-mediaUsage
import { HeroSplitMedia } from "@/components/hero-split-media";
function ProductCanvas() {
return (
<div
role="img"
aria-label="Campaign artboard with resolved design comments"
className="aspect-[6/7] bg-surface p-6"
>
<div className="h-full rounded-xl border border-border bg-background p-8">
<p className="text-sm font-semibold text-foreground">Launch canvas</p>
<p className="mt-2 text-sm text-muted-foreground">Three comments resolved</p>
</div>
</div>
);
}
export default function Page() {
return (
<HeroSplitMedia
eyebrow="Creative collaboration"
title="Give bold ideas room to become undeniable"
subtitle="Shape the launch story beside the work itself."
cta={{ label: "Start a canvas", href: "/start" }}
secondaryCta={{ label: "See how teams work", href: "/workflow" }}
media={<ProductCanvas />}
mediaPosition="right"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | undefined | Optional context rendered above the headline. |
| title | string | required | Hero headline rendered as the section's single h1. |
| subtitle | string | undefined | Optional supporting copy rendered below the headline. |
| cta | { label: string; href: string } | required | Primary call to action rendered as a real anchor. |
| secondaryCta | { label: string; href: string } | undefined | Optional secondary call to action rendered as a real anchor. |
| media | ReactNode | required | Consumer-supplied image, poster, illustration or composed UI with its own accessible semantics and intrinsic sizing. |
| mediaPosition | "left" | "right" | "right" | Media column once the hero is 768px wide or more. Copy remains first in the DOM and in the stacked reading order. |
| revealDistance | number | 32 | Opposing entrance travel in pixels, with non-finite values falling back to 32 and finite values clamped from 0 to 64. |
| parallax | number | 24 | Total media parallax travel in pixels, with non-finite values falling back to 24 and finite values clamped from 0 to 48. Zero disables it. |
| frameRadius | number | 24 | Media-frame corner radius in pixels, with non-finite values falling back to 24 and finite values clamped from 12 to 32. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Split Media Hero exposes Tier 3 variables for its surface, frame border, accent, muted copy and focus indicator. Override them on an ancestor to retheme the section, or use mediaPosition, revealDistance, parallax and frameRadius to tune the real composition and movement.
<HeroSplitMedia
title="Give bold ideas room to become undeniable"
cta={{ label: "Start a canvas", href: "/start" }}
media={<ProductCanvas />}
mediaPosition="left"
revealDistance={48}
parallax={16}
frameRadius={18}
/>
:root {
--hero-split-surface: var(--surface);
--hero-split-border: var(--border);
--hero-split-accent: var(--primary);
--hero-split-muted: var(--muted);
--hero-split-focus: var(--ring);
}Frequently asked questions
- Is Split Media Hero free for commercial use?
- Yes. Split Media Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Split Media Hero handle accessibility and reduced motion?
- The section keeps copy first in reading and Tab order, renders one heading and uses real anchors with visible focus indicators. You provide the media semantics, while reduced motion removes entrance movement, scale and scroll parallax so all content appears immediately.
- How do I customise the split hero effect?
- Set mediaPosition to mirror the composition, then adjust revealDistance, parallax and frameRadius to tune the real geometry. Tier 3 custom properties retheme the section without changing its component source.