Staggered Entrance Hero
One 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.
We made two examples: a dark launch hero for Vibary, and a warm cream daylight one for a coffee roaster, with a serif headline. Both have the same see-through bar with the centred wordmark, the same five left-aligned parts and the same single-breath entrance.
The VIBARY wordmark, the two-line headline, the 'Made with' row and the five-value palette all come from the slots you fill in. In the screenshot the bar is see-through, and it frosts once the page scrolls; the CSS background drifts, so its wash of colour lands slightly differently each time. The full-screen fit with no page scroll, the bar folding into a mobile sheet and the staggered entrance always stay.
Generated for this library
Input
Brief a calm launch hero for Vibary — AI design, in the browser
Wordmark VIBARY · Skills / Motion / Vibe Coding · Open the studio
Eyebrow New — skills that ship a finished screen
Headline Design at the speed / of a sentence.
Support Describe a screen, get the file. Open it, ship it.
Proof Made with · Vibe Coding · Skills · Motion · Palettes
Palette --ground #0a0a0b · --ink #f2f2f3 · --muted #a3a3ad ·
--accent #7c7cf0 · --panel #131316
Returned 1 file · index.html · full-viewport · no page scroll
bar see-through at rest, frosts to a blurred panel once the
window is nudged; VIBARY centred, three links left, one
pill right; on a phone it folds into a full-screen sheet
hero eyebrow pill, two-line headline, one support line, one
light call to action, then a "Made with" proof row
ground layered accent gradients on near-black, drifting slowly
entrance bar drops in, then pill → headline → support → CTA →
proof rise in turn — one breath down the screen
file self-contained: system-stack type or one font link,
every other asset drawn in CSS or inline SVGYou fill in 7 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The wordmark + nav
- 3The eyebrow pill
- 4The headline (two to four short lines)
- 5The support line
- 6The proof row
- 7The palette (one :root block)
Staggered Entrance Hero
What this makes
One 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.
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 brief sets the mood; the wordmark, headline and proof row carry the identity.
- 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 — no install, no server. It is the whole first screen.
- Make the next hero by swapping the brief and palette and keeping the construction — the shelf stays, the screen changes.
What you swap
- The brief (one line)
- a calm launch hero for Vibary — AI design, in the browser
- The wordmark + nav
- VIBARY · left: Skills, Motion, Vibe Coding · right button: Open the studio
- The eyebrow pill
- New — skills that ship a finished screen
- The headline (two to four short lines)
- Design at the speed / of a sentence.
- The support line
- Describe a screen, get the file. Open it, ship it.
- The proof row
- label: Made with · marks: Vibe Coding, Skills, Motion, Palettes
- The palette (one :root block)
- --ground #0a0a0b · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0 · --panel #131316
Before it runs
- A brief you can say in one line — the hero is one screen, and one screen holds one idea, not a paragraph.
- A headline of two to four short lines; a sentence that wraps four times is a paragraph wearing a headline's clothes.
- A palette of five values you are willing to commit to — the ground is drawn from them, so a half-chosen palette reads as a half-drawn page.
When to reach for it
When you want the whole first screen — bar, headline, call to action, entrance — as one file you can open with a double-click and paste anywhere. The construction is fixed; the subject, the words and the palette are yours.
What changes
- A single index.html with no build step and no outside request: one full-viewport hero that fills the window without page scroll.
- A top bar that starts see-through and settles to a frosted panel once the window is nudged, with a centred wordmark and one call to action.
- On a phone the bar collapses to a single control that opens a full-screen sheet, and the page underneath is held still while the sheet is open.
- The ground is drawn in CSS — a soft moving wash, never a hosted image or video — so the file stands alone.
- One entrance: the bar drops in, then the eyebrow, headline, one support line and a quiet proof row rise in turn, each a beat behind the last; with reduced motion the travel is dropped and everything stays.
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.
- Split-Panel HeroOne 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.
- 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.