Split-Panel Hero
One line in, one self-contained index.html out: a two-panel hero — the statement, call to action and chips on the left, a glass showcase panel of drawn cards on the right, over a ground built in CSS.
We made two examples: a dark violet split hero for Vibary and a pale, green-washed daylight one for a freelancer fintech. Both share the slim bar with its accent button, the headline, supporting line, call to action and chips on the left, the frosted panel of three stepped cards on the right, and the same entrance animation.
The headline, the chips and the three panel cards come from what you type in the fields. The screenshot shows the desktop layout; on a phone the right panel moves below the text and its cards stack in one column. You always get the two panels, the glass showcase and one staggered entrance across both sides. To change the right panel, swap its cards; the left side keeps its shape.
Generated for this library
Input
Brief a split hero for Vibary — say it left, show it right
Nav VIBARY · Skills, Motion · Open the studio
Headline Design at the speed / of a sentence.
Support Describe a screen, get the file. Open it, ship it.
Chips Vibe Coding · Skills · Motion · Palettes
Cards Skills · a finished screen from a sentence /
Motion · scrub, then copy /
Palettes · already passing contrast
Palette --ground #0a0a0b · --panel #131316 · --ink #f2f2f3 ·
--muted #a3a3ad · --accent #7c7cf0
Returned 1 file · index.html · two-panel hero, no page scroll
bar wordmark, a link or two, one accent button
words headline, support line, a light CTA, a row of chips
show a frosted panel holding the three named cards, each a
glyph, a label and its one line
entrance left rises in turn while the panel's cards settle in —
one breath, not a race; reduced motion drops it
fold on a phone the show side drops under the wordsYou fill in 7 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The wordmark + nav
- 3The headline (two to three short lines)
- 4The support line
- 5The chips
- 6The panel cards
- 7The palette (one :root block)
Split-Panel Hero
What this makes
One line in, one self-contained index.html out: a two-panel hero — the statement, call to action and chips on the left, a glass showcase panel of drawn cards on the right, over a ground built in CSS.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the seven slot lines — the headline and chips carry the left; the panel cards fill the right.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser — the split holds on desktop and folds to one column on a phone.
- Restage the right panel any time by swapping its cards; the left keeps its shape.
What you swap
- The brief (one line)
- a split hero for Vibary — say it left, show it right
- The wordmark + nav
- VIBARY · left: Skills, Motion · right button: Open the studio
- The headline (two to three short lines)
- Design at the speed / of a sentence.
- The support line
- Describe a screen, get the file. Open it, ship it.
- The chips
- Vibe Coding · Skills · Motion · Palettes
- The panel cards
- Skills · a finished screen from a sentence / Motion · scrub, then copy / Palettes · already passing contrast
- The palette (one :root block)
- --ground #0a0a0b · --panel #131316 · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0
Before it runs
- Something worth showing — the right panel wants two or three drawn cards, not one lonely tile.
- A headline short enough to share a screen with the panel; the split gives the words half the width.
- A palette of five values — the ground, the glass panel and the button are drawn from them.
When to reach for it
When the first screen should say it and show it at once — a product with a face, a platform with a surface worth glimpsing. The two-panel build is fixed; the words and the panel's cards are yours.
What changes
- A single index.html with no build step and no outside request: one full-viewport hero split into a word side and a show side.
- The left panel carries the statement, one line, a call to action and a row of chips.
- The right panel is a glass showcase — a stack of drawn cards standing in for the product's own surface, all frosted from the same material.
- On a phone the show side folds under the words so nothing is lost, and the whole thing still fills one screen.
- One entrance: the words rise in turn on the left while the panel's cards settle in on the right; with reduced motion the travel is dropped.
Pairs with
- One-File Landing PageOne brief in, one self-contained index.html out: a whole landing page in a single file — a scroll-aware nav, a hero, a highlighted statement, a feature grid, a closing call and a footer, every section rising as it comes into view.
- Staggered Entrance HeroOne line in, one self-contained index.html out: a full-viewport hero that arrives in a single staggered breath — a scroll-aware bar, a mobile sheet, a headline over a ground drawn entirely in CSS.
- 404 Error PageOne line in, one self-contained index.html out: a full-viewport 404 screen — a giant code numeral over a drawn ground, one line of apology, and a single way back home.