One-File Landing Page
One 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.
We made two examples: a near-black launch page with a violet accent for Vibary, and a cream, terracotta and serif page for Kestrel Roasters, a small-batch coffee roaster. Both have the same bar, hero, lit statement, four-card grid, closing call and footer, in the same order, each rising on the same gentle easing.
Everything comes from the fields: the hero, the statement (starred words light up in the accent colour), the four features, the closing call and the footer. The screenshot shows the whole page already revealed. In the file each section rises the first time it scrolls into view, and the bar stays clear until the page moves. The section order and the mobile menu always hold, and with reduced motion the whole page simply appears without animation.
Generated for this library
Input
Brief the launch page for Vibary — AI design, in the browser
Nav VIBARY · How it works, Skills, Pricing · Open the studio
Hero Design at the speed of a sentence. · Describe a
screen, get the file. Open it, ship it. · Open the studio
Statement One library where a *sentence* becomes a *screen*
you can ship.
Features Skills · a finished screen from a sentence /
Motion · patterns you scrub and copy /
Palettes · schemes that already pass /
Vibe Coding · describe it once, ship the file
Call Design your next screen. · Open the studio
Footer VIBARY · vibary.ai · Skills, Motion, Palettes · © vibary.ai
Palette --ground #0a0a0b · --panel #131316 · --ink #f2f2f3 ·
--muted #a3a3ad · --accent #7c7cf0
Returned 1 file · index.html · a whole scrolling landing page
bar clear at rest, frosts once the page moves; a mobile sheet
hero full-viewport headline, support line, one light CTA
statement one large sentence, the starred words lit in the accent
features a four-card grid: glyph, title, one line each
call a closing line and one accent button, centred
footer wordmark, site, a column of links, the © line
reveal every section rises the first time it scrolls into viewYou fill in 8 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The wordmark + nav
- 3The hero
- 4The statement (a few words lit)
- 5The features (three or four)
- 6The closing call
- 7The footer
- 8The palette (one :root block)
One-File Landing Page
What this makes
One 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.
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.
- Fill the eight slots — the hero and statement set the voice; the features carry the middle; the call and footer close it.
- Paste it into any coding agent or model in one message. It returns one index.html — the whole page.
- Save the file and open it in a browser, then scroll to watch each section rise as it arrives.
- Grow the page later by adding a section in the same pattern, or restyle the whole thing by editing the five tokens.
What you swap
- The brief (one line)
- the launch page for Vibary — AI design, in the browser
- The wordmark + nav
- VIBARY · How it works, Skills, Pricing · button: Open the studio
- The hero
- Design at the speed of a sentence. · Describe a screen, get the file. Open it, ship it. · Open the studio
- The statement (a few words lit)
- One library where a *sentence* becomes a *screen* you can ship.
- The features (three or four)
- Skills · a finished screen from a sentence / Motion · patterns you scrub and copy / Palettes · schemes that already pass / Vibe Coding · describe it once, ship the file
- The closing call
- Design your next screen. · Open the studio
- The footer
- VIBARY · vibary.ai · Skills, Motion, Palettes · © vibary.ai
- The palette (one :root block)
- --ground #0a0a0b · --panel #131316 · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0
Before it runs
- A product worth a page — a hero line, a statement, a few features and a call; the page has room for each and needs all of them.
- Features that stand alone: three or four, each a title and a line, not a feature and three sub-bullets.
- A palette of five values — the ground, the panels, the accent and the footer are all drawn from them.
When to reach for it
When you need the whole page, not one screen — the complete landing to launch a product, a tool, a studio. The section order and the reveals are fixed; the words, the features and the palette are yours.
What changes
- A single index.html holding a complete landing page — nav, hero, statement, features, call and footer — with no build step and no outside request.
- A scroll-aware bar that starts clear and frosts once the page moves, with a mobile sheet.
- A full-viewport hero over a ground drawn in CSS, then a large statement with a few words lit in the accent.
- A feature grid and a closing call, each section rising into place the first time it scrolls into view.
- A real footer to close it, and reduced motion that drops every reveal while keeping the whole page.
Pairs with
- 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.
- 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.