parkingpage-comingsoon

parkingpage-comingsoon is a ready-to-customize coming soon page for product launches, waitlists, and early-access campaigns.

It ships with a glass-style content panel, animated WebGL background, draggable physics typography, and an optional waitlist form.

What It Is

• Coming soon page - A complete first screen for a launch or waitlist.
• Static deployment - Builds to plain files in dist/.
• Easy branding - Change copy, metadata, favicons, logos, and the mosaic word from one brand config plus brand assets.
• Waitlist ready - Connects to any hosted form endpoint through VITE_FORM_ENDPOINT.
• Accessible fallback - Keeps readable DOM content and supports reduced-motion users.

Note

The included Your Brand content is demo content. Replace it with your own brand, copy, assets, and form endpoint before publishing.

Quick Setup

1. Clone The Repo

git clone https://github.com/One-Simon/parkingpage-comingsoon.git
cd parkingpage-comingsoon

2. Install Dependencies

Use Node.js 24 LTS and npm.

npm ci

3. Start Local Development

npm run dev

Open the local URL printed by Vite, usually:

http://localhost:5173

4. Configure The Waitlist

Copy the example env file:

cp .env.example .env

Set your hosted form endpoint:

VITE_FORM_ENDPOINT=https://formspree.io/f/your-id

Tip

If VITE_FORM_ENDPOINT is empty, the page still runs, but the waitlist form is disabled. This is useful while you are still working on the visual design.

5. Build Before Deploying

npm run build

The production output is written to:

dist/

Customize

Most day-to-day brand changes are in these files:

File	What To Change
src/brand/siteConfig.ts	Brand name, browser title, meta description, mosaic word, visible copy, and asset paths
public/brand/favicon.png and public/brand/favicon.svg	Browser icon, card logo, and background glyph
src/style.css	Layout, spacing, colors, and responsive panel styling

Important

VITE_* environment variables are inlined at build time. After changing VITE_FORM_ENDPOINT, build and deploy again.

Deploy On Render

Create a Render static site or Blueprint from this repository.

Setting	Value
Repository	One-Simon/parkingpage-comingsoon or your fork
Branch	main
Runtime	Static
Build command	npm ci && npm run build
Publish directory	dist

Required environment variables:

Variable	Value
NODE_VERSION	24.16.0
VITE_FORM_ENDPOINT	Your waitlist form endpoint, or leave empty to disable the form

The included render.yaml mirrors these settings for Blueprint-based setup.

Tip

You can deploy the built dist/ folder anywhere that serves static files, including Netlify, Vercel, Cloudflare Pages, GitHub Pages, S3, or your own server.

Downstream Sync Contract

This repository is intended to be usable as an upstream template for branded downstream apps.

Upstream-owned files include shared app code, rendering, tests, package manifests, Vite config, and the generic default brand config shape.

Downstream branded repos should keep company-specific identity in:

• src/brand/siteConfig.ts
• public/brand/**
• deployment docs/config such as README.md, LICENSE, and render.yaml

Avoid editing shared implementation files for company names, copy, mosaic text, favicons, or logos. This keeps upstream sync PRs small and prevents recurring merge conflicts.

Useful Commands

Command	What It Does
npm run dev	Starts the local Vite dev server
npm run build	Runs TypeScript and creates the production build
npm run preview	Serves the production build locally
npm run lint	Runs ESLint with zero warnings allowed
npm run typecheck	Runs TypeScript without emitting files
npm run format	Checks formatting in src/
npm run format:fix	Applies formatting in src/

Content Model

The default page is intentionally simple:

1. src/brand/siteConfig.ts exports all brand metadata, visible panel copy, asset paths, and mosaic text.
2. src/overlay.ts renders the copy into the DOM.
3. src/forms/waitlist.ts binds the form to VITE_FORM_ENDPOINT.
4. src/simulation.ts starts the Pixi/Matter background.

Note

The animated canvas is decorative. The main copy and waitlist form are plain DOM content.

Troubleshooting

The Form Is Disabled

VITE_FORM_ENDPOINT is probably empty.

Set it locally in .env and in your host's environment variables, then rebuild/redeploy.

Changes To The Endpoint Do Not Show Up

Vite inlines VITE_* values at build time.

After changing VITE_FORM_ENDPOINT, run a new build or trigger a new deploy.

The Animated Background Is Missing

Run a production build locally:

npm run build
npm run preview

If the static panel works but animation does not, check browser console errors and CSP settings.

Tip

Reduced-motion settings intentionally disable the animated canvas and show a static fallback.

The Page Uses The Wrong Brand

Search for the old brand name and update these files first:

rg "Your Brand|YourOldBrand"

The usual places are src/brand/siteConfig.ts and public/brand/**.

Contributing

Issues and pull requests are welcome. Please read CONTRIBUTING.md before opening a PR.

License

MIT. See LICENSE.