LaunchVault documentation

Launch ten distinct pages from one clean static package.

LaunchVault is a collection of ten complete HTML launch-page demos. It uses semantic HTML, modular CSS, vanilla JavaScript and original local SVG assets. No build process is required.

2. Folder structure

launchvault/
├── index.html
├── demos/
│   ├── minimal-editorial/
│   ├── ai-saas/
│   └── ... eight more demos
├── assets/
│   ├── css/
│   ├── js/
│   ├── svg/
│   └── favicons/
├── documentation/
└── marketing/

The root index.html is the live-preview selector. Each demo has its own folder and loads shared components plus a demo-specific stylesheet and configuration file.

3. How to select a demo

1. Open the root index.html.
2. Choose the visual direction closest to your project.
3. Copy the selected demo folder together with the complete assets folder.
4. Keep the same folder relationship unless you update relative paths.

For the simplest deployment, upload the complete package and set your chosen demo folder as the published directory, or copy that demo's index.html to the root and change each ../../assets/ path to assets/.

4. How to change text

Open the selected demo's index.html in a plain-text or code editor. Search for the visible preview wording and replace it. Basic brand values are also grouped inside the matching configuration file in assets/js/demos/.

// CUSTOMIZE: Brand name
brandName: 'Your Brand',
// CUSTOMIZE: Main headline
headline: 'Your launch message',
// CUSTOMIZE: Contact email
contactEmail: 'hello@example.com'

Keep heading levels in logical order: one page h1, followed by section h2 headings and nested h3 headings.

5. How to change colors

The quickest option is the demo configuration file:

primaryColor: '#5c62ff', // CUSTOMIZE: Primary color
secondaryColor: '#77e0c1' // CUSTOMIZE: Secondary color

For full control, edit the variables at the top of the demo stylesheet in assets/css/demos/. Check text and focus-state contrast after changing colors.

6. How to change typography

LaunchVault uses system stacks so the package has no font-license or network dependency. Change --lv-font-sans and --lv-font-serif in assets/css/base.css, or override font-family in a demo stylesheet.

When adding a web font, verify its commercial redistribution terms. Self-host only files your license allows you to distribute.

7. How to change the launch date

Open the relevant file in assets/js/demos/ and edit:

// CUSTOMIZE: Launch date
launchDate: '2027-06-01T12:00:00'

The browser interprets the value in the visitor's local timezone unless you add an explicit timezone offset, for example 2027-06-01T12:00:00+02:00. Set enableCountdown: false to hide the component. Set evergreenDays to a positive number to create a local browser-based evergreen target.

8. How to change social links

Search the demo HTML for social-link. Replace each href="#" with a complete URL and update the visible label. Remove networks you do not use. Add a clear accessible label when an icon has no visible text.

9. How to connect a form

Forms prevent real submission by default and show a demonstration success message. They include required fields, email validation, consent, honeypot field, loading state and duplicate-submission protection.

For a Formspree-compatible endpoint, open the selected demo configuration file and replace the empty formEndpoint value. You may alternatively add a data-endpoint attribute directly to an individual form. The included script sends validated form data with fetch() and displays success or error feedback.

Mailchimp usually requires an embedded form action or a server-side integration because browser cross-origin rules vary by account setup. Replace the demo form with Mailchimp's generated accessible form markup, or route the form through your own endpoint, while preserving the existing labels, consent text and status message.

10. How to use Netlify Forms

1. Deploy the site to Netlify.
2. Add name="launch-waitlist", method="POST" and data-netlify="true" to the form.
3. Add a hidden input: <input type="hidden" name="form-name" value="launch-waitlist">.
4. Remove or modify the JavaScript that calls event.preventDefault().
5. Redeploy and submit a test entry.

<form name="launch-waitlist" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="launch-waitlist">
  ...
</form>

11. How to use Formspree

1. Create a form in your Formspree account.
2. Copy the endpoint supplied by Formspree.
3. Open assets/js/demos/[demo-name]-config.js.
4. Paste the endpoint into formEndpoint.
5. Test validation, successful delivery, spam handling and the error state on the published site.

formEndpoint: 'https://formspree.io/f/your-id'

You can override the configuration for one form by adding data-endpoint="https://formspree.io/f/your-id" to that form element.

12. How to replace SVG artwork

Original artwork is stored in assets/svg/. Replace a file with another SVG using the same filename, or update the src or CSS background-image path. Remove metadata and unused editor data, preserve the viewBox, and hide decorative SVGs from assistive technology.

13. How to add a background video

The Cinematic demo works without video. To add one, place an optimized MP4/WebM file inside a new assets/video/ folder and insert a muted, looping video behind the content.

<video class="cinema-bg-video" muted loop playsinline poster="../../assets/svg/cinematic.svg">
  <source src="../../assets/video/background.webm" type="video/webm">
  <source src="../../assets/video/background.mp4" type="video/mp4">
</video>

Do not autoplay sound. Keep the SVG fallback and disable video for reduced-motion users when appropriate.

14. How to disable animations

Set enableLoader and enableCursorEffect to false in the demo configuration. Remove data-reveal attributes for permanent visibility, or override animation and transition properties in the demo stylesheet.

15. How to test reduced motion

Enable “Reduce motion” in your operating system accessibility settings or use browser developer tools to emulate prefers-reduced-motion: reduce. Confirm that all content is visible, loaders finish immediately, parallax is disabled and no important information depends on motion.

16. How to upload to ordinary hosting

1. Choose your demo.
2. Keep its HTML and required assets together.
3. Upload files using your hosting file manager, SFTP or FTP.
4. Ensure the published page is named index.html.
5. Open the public URL and test every relative path.

No PHP, database or server runtime is required for the template itself.

17. How to deploy to Netlify

1. Create a new site in Netlify.
2. Drag the complete folder into the manual deploy area, or connect a repository.
3. Set the publish directory to the package root or your chosen demo folder.
4. Configure a custom domain if needed.
5. Enable Netlify Forms only after following the form instructions above.

18. How to deploy to GitHub Pages

1. Create a repository and add the package files.
2. Commit and push to the default branch.
3. Open repository Settings → Pages.
4. Publish from the branch root, or from a docs folder if you reorganize the project.
5. Wait for the generated Pages URL and test paths carefully. GitHub Pages paths are case-sensitive.

19. Browser support

Progressive enhancement keeps core content and forms visible when optional effects are unsupported.

20. Accessibility information

The templates include semantic landmarks, skip links, heading structure, labels, keyboard-operable navigation, visible focus states, live form feedback, accessible countdown text, modal close controls, accordion state and reduced-motion support.

Accessibility remains a content and maintenance responsibility. After customization, recheck contrast, link purpose, heading order, alternative text, form instructions and keyboard flow.

21. Asset credits

All bundled SVG artwork, code and preview copy are original to LaunchVault. No paid plugins, stock photography, paid fonts or external JavaScript libraries are included. See credits.txt and license-information.txt.

22. Common troubleshooting

Styles are missing

Check the relative path. Demo pages use ../../assets/ because they are two folders below the package root.

The countdown shows zero

Confirm the launch-date string is valid and in the future. Add a timezone offset when the exact zone matters.

The form does not send email

This is expected by default. Connect a form service or backend and modify the demo submission script.

The menu does not open

Confirm accessibility.js is loaded and the button's aria-controls matches the navigation ID.

Animations feel heavy

Disable cursor effects, reduce large decorative areas, and test reduced-motion mode. Avoid adding high-resolution video without optimization.

23. What is and is not included

24. Version history

Version 1.0.0

Initial release with ten demos, responsive layouts, countdown component, form validation, accessibility features, local documentation and marketplace preview page.