App landing page template: a free HTML page for a mobile app or SaaS product with a free plan or a sign-up. A phone drawn in HTML fills with a call as you scroll, across ten sections in warm paper, navy and espresso with one green accent. The motion runs on CSS with no JavaScript libraries, in one file of about 35 KB gzipped that Claude Code, Cursor or Codex reads whole.
Live demo · Use this template · Download ZIP · Template page on 8b.com
Scroll animation
Download the four files into your project folder (curl.exe in Windows PowerShell):
curl -LO https://raw.githubusercontent.com/8bsite/app-landing-page-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/app-landing-page-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/app-landing-page-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/app-landing-page-template/main/CREDITS.mdThen fill in the angle brackets and give your agent this prompt:
Read AGENTS.md, then edit index.html. Rework it into a landing page for <my app or SaaS product: what it does, who it is for, prices, where people sign up or download, the features, real reviews, support contacts>. Replace first the brand name, headline, features, the phone's call, reviews and clinician quote. Keep the section ids, the classes AGENTS.md lists, the phone step numbers and the section order; set each length number to its line's character count. Motion is CSS scroll-driven animation plus the inline kit: keep the gate script and the data-8b attributes; add no library. Never invent ratings, reviews, prices, store links or contacts; ask me.
Vibe coding this app landing page template for Claude Code, Cursor or Codex goes in a clear order. First the brand name, the headline and the five demo features change; then the phone's call is rewritten to show your own product. Keep the section ids, the data-step numbers that tie each feature to a phone element and the data-ctl controls. Three --len attributes size the two sample lines and the footer wordmark; set each to its line's character count. The rating, the eight reviews, the clinician quote and the free-plan and privacy claims are invented, so the agent has to ask for real ones and may not make up a number, a review or an endorsement.
No agent? Click Use this template, edit index.html on GitHub and turn on Settings > Pages.
- Navigation: top bar: logo, section links, Get Linea free button; phone menu overlay.
- First screen: first screen: headline over a full-bleed photo, lead, proof line, button; caption chips ride curved lines across the photo. The mouse wheel scrolls smoothly page-wide and several section headings rise line by line out of a mask. Leaving the hero, the photo zooms while copy and caption chips lift at different speeds.
- Nothing lost between a voice and a word.: two-panel stage: speech on one side, readable captions on the other (demo: They speak / You read). The stage holds in place while three spoken lines drawn as bars slide into the You read panel and become caption bubbles, and the waveform ripples.
- Calls that feel easy again.: feature list beside a sticky phone whose screen builds one step per feature. Each feature brightens as it reaches mid-screen and the sticky phone adds that step's messages; on exit the phone shrinks and tilts.
- Captions, set your way.: a wall-sized sample sentence over a list of eight settings with drawn controls. The sample card grows out of the phone screen; then, tied to scroll, its sentence thickens and the card flips from light to dark.
- Captions for the room, too.: horizontal track of five places with photos and caption pairs, two curved lines run through all of them. The stage holds while five places slide sideways as you scroll, two curved lines draw along, and each card's caption pair rises in.
- Recommended by clinicians. Loved by the people who use it.: expert quote with portrait beside two columns of short reviews. Review columns rise at two different speeds, or cards slide in from alternate sides on phones, while the portrait zooms out.
- Three steps, then just talk.: three numbered step cards that stack on top of each other. The three step cards stick and stack as you scroll; each new card shrinks and dims the one beneath.
- Questions, answered plainly.: questions and answers (native <details>).
- Your next call can be the easy one.: closing call to action over a photo that opens from a small window to the full band. The photo opens from a small window to the full band, and green bars over the heading clear word by word.
- Talk to a person, any way you like.: support hours, a photo, three ways to reach the team and a contact form (placeholders).
- Footer: tagline, link columns, giant wordmark, copyright with the Design: 8B credit and a legal note. Tied to scroll, the giant wordmark rises into place while the logo's two strokes draw themselves.
Host Grotesk: the only family: large, tightly tracked semibold headings and regular body text (Google Fonts). Each section after the hero is a sheet with large rounded upper corners laid over the last, in paper, navy and espresso. Captions are chat bubbles with a tiny waveform: paper for the other voice, green for yours. The phone is built in HTML, not a screenshot, and the main call-to-action buttons are green pills while the form's send button is espresso.
Does this website app template include the app itself?
No. It is only the website for an app: one MIT licensed HTML file that you host anywhere. The phone on the page is drawn in HTML and CSS, so it shows a captioned call but runs nothing. Your real app lives in an app store or behind your own sign-up page, and you point the buttons there. In v0, one button loads these files.
Can I use it as a SaaS landing page template?
Yes. For a SaaS website template the question is whether your features can be shown one at a time on a screen. If so, replace the captioning demo with your own: the call on the phone, the eight settings rows and the five in-person places. AGENTS.md has the steps for removing a section you do not need.
Where do the Get the app buttons lead?
Only within the page. The nav, menu, hero, calls and footer calls to action jump to the closing call to action, and the button inside it scrolls back up to the hero. There are no store badges or sign-up links yet, so point each one at your store or sign-up URL.
This is the light build: the same look and scroll behaviour, with no animation library and no script from a CDN. It downloads about 35 KB of code gzipped in one file, where the GSAP version needs about 80 KB and four more requests. Use it when visitors should watch an app work before a download or free sign-up; a gadget with a pre-order button fits the product launch template better. The catch is the demo story: the speech stage, the Room mode places and the clinician quote belong to a captioning app, so a product without conversation must rework or delete them.
- Replace what is marked
data-8b-placeholder(social preview image, favicon, phone, email, form) and the invented demo facts; AGENTS.md lists them. - The form sends nothing yet: connect it to Formspree or Netlify Forms, or remove it.
No JavaScript libraries: CSS scroll-driven animations and a small inline motion script with its own smooth wheel scrolling, 135 KB, no build step. Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units). Without scroll-driven animations (Firefox today) the scroll motion and the smooth wheel are off and each section shows its finished layout, while any load-in or looping animation still plays; with "reduce motion" on, the page is complete and nothing moves on its own (hover effects stay).
A GSAP build of the same page is index.gsap.html: GSAP 3.13.0, ScrollTrigger, SplitText, Lenis 1.3.27 from jsDelivr, 135 KB; its scroll motion also plays in Firefox. Use one of the two files.
MIT, see LICENSE. Photos, fonts and libraries keep their own licences: CREDITS.md. More free templates: 8b.com/templates · github.com/8bsite.