Multi-page structure
Home, About, Work, Pricing, Contact, and Template pages are plain HTML entries handled by Vite.
Use this template
A production-ready Vite template with multi-page HTML, reusable GSAP animation utilities, cinematic scroll effects, SEO files, and modular CSS.
Clone command
git clone https://github.com/CookieShualon/animated-landing-page.git
What is inside
Home, About, Work, Pricing, Contact, and Template pages are plain HTML entries handled by Vite.
Fade, scale, stagger, counters, looped accents, and cinematic scroll utilities live in one animation module.
Responsive sections, cards, forms, pricing, showcase graphics, and cinematic layers are styled from one CSS file.
The public folder includes robots.txt and sitemap.xml so production builds expose them at the site root.
Use .env values to control brand, colors, GitHub links, page toggles, contact details, and animation switches.
Env options
Set VITE_SITE_URL once to update canonical URLs, robots.txt, and sitemap.xml during builds.
Change the site name and home URL once, then every header updates automatically.
Edit labels, links, and page keys from one array instead of touching each HTML file.
Set accent colors with env variables and the CSS variables update at runtime.
Turn optional pages like Pricing, Contact, and Template on or off with simple booleans.
Point the Template page buttons to your GitHub URL and clone URL from environment variables.
Enable or disable counters, looping visual accents, and the cinematic scroll sequence.
Setup and env
npm install
npm run dev
npm run build
VITE_SITE_URL=https://your-domain.com
VITE_TEMPLATE_GITHUB_URL=https://github.com/you/repo
VITE_ENABLE_TEMPLATE_PAGE=true
VITE_ENABLE_CINEMATIC_SCROLL=true
Set these values in .env locally or in your Vercel project settings to rebrand the site, update the domain, hide optional pages, and tune motion.