Kinetika Documentation

Getting started

Thank you for choosing Kinetika. This help file explains how to install, edit and publish the template. No build tools are required: every page is plain HTML, CSS and JavaScript.

Unzip the download. Open the template folder.
Open index.html in your browser, or use a local server (VS Code “Live Server”, or npx serve template).
Edit the HTML files in any code editor. Changes appear on refresh.
Upload the contents of template/ to your web host’s public folder (for example public_html).

Need help? Email build@m00nshots.dev or visit m00nshots.dev. Please include your purchase code.

Author	MOONSHOTS
Website	https://m00nshots.dev
Contact	build@m00nshots.dev
Copyright	© 2026 m00nshots

File structure

template/
├── index.html, home-2.html, home-3.html, home-4.html   ← home page demos
├── works.html, project.html, services.html, about.html, contact.html, 404.html
└── assets/
    ├── css/core.css      ← layout, grid, components (shared)
    ├── css/theme.css     ← Kinetika design tokens & unique sections
    ├── js/core.js        ← animations, menu, accordion, tabs, forms…
    ├── js/theme.js       ← template-specific scripts
    ├── images/           ← favicon + placeholder images
    └── vendor/           ← GSAP 3 & Tabler Icons (subset)
documentation/index.html  ← this file

Pages

File	Description
`index.html`	Creative Agency
`home-2.html`	Digital Studio
`home-3.html`	Freelancer Portfolio
`home-4.html`	Branding Studio
`works.html`	Works
`project.html`	Case Study
`services.html`	Services
`about.html`	About
`contact.html`	Contact
`404.html`	404 Error

To choose a different home page, rename the variant you want to index.html (or update the logo links, which point to index.html).

Colours & fonts

All colours, fonts and radii are CSS custom properties at the top of assets/css/theme.css. Change a value once and it updates everywhere. Dark-mode values live in the [data-theme="dark"] block just below.

Token	Default
`--bg`	`#f4f2ed`
`--bg-2`	`#eae7df`
`--surface`	`#fbfaf7`
`--surface-2`	`#e4e0d6`
`--text`	`#0d0d0d`
`--muted`	`#5f5c55`
`--line`	`rgba(13, 13, 13, .14)`
`--primary`	`#0d0d0d`
`--primary-2`	`#0d0d0d`
`--accent`	`#d4ff3a`
`--on-primary`	`#f4f2ed`
`--font-head`	`"Syne", sans-serif`
`--font-body`	`"DM Sans", sans-serif`
`--font-logo`	`"Unbounded", sans-serif`
`--logo-weight`	`800`
`--logo-size`	`1.3rem`
`--logo-tracking`	`-0.04em`
`--head-weight`	`700`
`--head-tracking`	`-0.04em`
`--radius-sm`	`0`
`--radius`	`4px`
`--radius-lg`	`6px`
`--radius-btn`	`999px`
`--gradient`	`linear-gradient(90deg, #0d0d0d, #0d0d0d)`
`--shadow`	`0 20px 40px -20px rgba(0,0,0,.25)`

Fonts

This template uses Google Fonts: Syne, DM Sans, Unbounded (logo). They are loaded by the <link> tag in the <head> of every page. To change fonts, pick new ones on fonts.google.com, replace that link and update --font-head, --font-body and --font-logo.

Logo & favicon

The logo is text plus an icon, so it stays sharp at every size:

<a class="logo" href="index.html"><span class="logo__mark"><i class="ti ti-asterisk"></i></span>Kinetika</a>

To use an image instead, replace the inner content with <img src="assets/images/logo.svg" alt="Your brand" height="36">. Replace assets/images/favicon.svg with your own icon.

Images

The download uses neutral placeholder images (assets/images/placeholder-WxH.svg) that show the recommended size. Replace each src with your own photo at the same aspect ratio. Images use loading="lazy" and explicit width and height to avoid layout shift.

Photos in the live preview are from Unsplash and are for preview only. They are not included in the download.

Animations

Animations use GSAP 3 and ScrollTrigger. Add attributes to any element:

Attribute	Effect
`data-anim`	Fade up on scroll
`data-anim="lines"`	Word-by-word headline reveal
`data-anim="stagger"`	Children animate one after another
`data-anim="zoom" \| "fade" \| "slide-left" \| "slide-right" \| "reveal"`	Alternative entrances
`data-delay=".3"`	Delay in seconds
`data-parallax="12"`	Scroll parallax (percentage)
`data-count="48"`	Animated number counter
`data-magnetic`	Magnetic hover for buttons
`data-float`	Gentle floating loop

Visitors who enable “reduce motion” in their OS settings see content without animation. Remove the js-anim class from <html> to disable animations globally.

Components

Header: sticky, shrinks and hides on scroll; mobile drawer below 1024 px.
Accordion: .accordion > .accordion__item. Add is-open to open one by default.
Tabs: wrap in [data-tabs]; each button’s aria-controls matches a panel id.
Pricing toggle: [data-billing] switches every [data-monthly] value to its data-yearly value.
Slider: .slider with scroll-snap and prev/next buttons.
Marquee: .marquee with two identical .marquee__track children.

Forms

Forms with data-demo validate in the browser and show a success message, but do not send data. To make one work, remove data-demo and set the action to your backend or a form service such as Formspree, Basin or Netlify Forms:

<form action="https://formspree.io/f/your-id" method="POST">…</form>

Dark mode

Each page sets its default theme on <html data-theme="light|dark">. The toggle button in the header switches themes and remembers the visitor’s choice in localStorage.

SEO

Every page has a unique <title>, meta description, Open Graph tags and one <h1>. Update them for your brand. Add a sitemap.xml and submit it to Google Search Console after launch.

Credits

GSAP 3	GreenSock standard “no charge” licence, free for commercial use	gsap.com
Tabler Icons	MIT licence	tabler.io/icons
Syne, DM Sans, Unbounded	SIL Open Font Licence	Google Fonts
Preview photos	Unsplash licence, preview only, not included	unsplash.com

Changelog

v1.0.0 · 27 September 2026 · Initial release.