Overview

An editorial HTML template for a film and video production company that makes commercials, music videos and documentary: white paper, ink, giant Inter capitals with an italic serif word, hairline rules and one tungsten accent. Kinora ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: a shoot estimate (shoot days, crew size, camera package, edit and grade, extras, a production fee and a contingency), a six-step brief with the estimate beside it, a production board that shows where every film is today, the work by type, the showreel by timecode, the crew, the kit list, a client review room and a currency switch.

What’s included

• 3 home pages, each with its own scroll moment: The Cut (the reel’s clips snap onto the tracks of an edit timeline under a playhead), the frame that reshapes from 1.33 to 1.85 to 2.39, and a dolly push through the layered pieces of a set
• A white theme by default and a dark theme on one switch, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker; a currency switch (dollars, euros, pounds) that repaints every price
• WebGL: Film Grain (35 mm grain at 24 frames, a gate weave, light leaks at the band edges) and a film reel in an ASCII shader in the footer
• The shoot estimate and the day-rate units from the same engine; Start A Project in six steps with a reference
• A production board of four films on a 21-day cycle, worked out from the visitor’s date, and the office open-now line
• Work with type tabs and search, three project layouts, the showreel chapters, the Client Review Room with notes pinned to the frame
• The crew with day rates, the kit list by package, services, how we work, journal, FAQ with search, contact with a map and the PHP form, account pages, coming soon with a countdown, 404
• A Slate Clap preloader, Letterbox Open photo reveals, a running timecode on hover, Swiper sliders and Fancybox
• Fully responsive from 390 px to wide screens

Getting Started

Thank you for choosing Kinora. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open kinora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the estimate, the brief, the board and the review room all work straight from the files.

2. Deploy to a server

Upload the contents of the kinora/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The rates, the units, the films, the crew, the kit and the productions live in one place — see Estimate & Production Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and kinora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

kinora/
├── *.html                              the 30 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (34 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      13 files
        ├── blog/                        9 files
        ├── bts/                         4 files
        ├── crew/                        6 files
        ├── faces/                       7 files
        ├── flags/                       6 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── set/                         4 files
        └── work/                        28 files

To publish the site, upload the contents of kinora/ to your web root. Stills keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --kn-tungsten-rgb) — change both together.

Paper is the ground and the bone band alternates with it; ink is the headings, the full-width rules and the pill buttons; night is the footer and the timeline. Tungsten is the one accent: the viewfinder corner of each label, the running timecode, the estimate’s figures and the hover of every button. Tally, edit and delivered are the production board’s signals. --kn-bg, --kn-band, --kn-surface, --kn-heading and --kn-text are the semantic names the components use — the dark theme swaps those.

Fonts

Two Google Fonts are loaded in the head of each page: Inter (headings in large capitals, body, navigation, buttons, and every figure with its tabular digits) and Noto Serif Display italic (the accent word in a title, the slide counts, the step numbers). Swap them by editing the Google Fonts link and the --kn-ff-body / --kn-ff-serif variables. An accent word is simply an <em> inside a title.

Logo

The logo is “Kinora” in Inter with the o in the italic serif, in tungsten. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink, for white bars
• logo-light.png — white, over photographs, on the black bar, in the dark theme, the slate and the footer
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height.

Dark & Light Mode

Kinora opens white. Every header (and the mobile menu) has a theme switch that turns the dark skin on. The choice is saved in the browser under the key kinora-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css.
• Bands that stay black — sections with the class is-night (The Cut, the chapters, the footer) are black in both themes.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Estimate & Production Logic

The figures on every page come from one data block, JS block 09 Kinora Data near the top of main.js (var KINORA). Edit it once and the estimate, the day rates, the brief, the board, the work and the crew follow. Prices are in US dollars (the currency switch converts them); times are minutes after midnight (540 = 9:00); weekdays run 0 = Sunday to 6 = Saturday.

The estimate

Crew size × shoot days × the crew day rate, plus the camera package by the shoot day, plus edit days (suggested from the type’s edit ratio until the visitor sets them) and grade days at the grade’s rate, plus the extras; then the production fee and the contingency on the whole.

The day-rate units

The camera packages

The production board

Each film runs through the cycle from its own offset, so the visitor’s date says where it is today; a shoot day is “rolling” between call and wrap. Replace the stages in block 10 with your own schedule to show real productions; every live line on the site reads from it.

Saved estimates, sent briefs and review notes are kept in the browser (localStorage) and listed on the account page. The brief and the review room confirm on screen — connect them to your own systems to take real briefs. Any review code of four characters or more opens the demo room.

WebGL & Motion

Small WebGL shaders draw the moving layers: Film Grain — grain that changes every frame at 24 frames a second, a gate weave that moves the band’s photograph by a pixel, light leaks blooming at the band edges — over photo bands (grain) and as the ground of plain bands (grain-ground), and the reel in the footer, a film reel turning, drawn as ASCII characters. Each is one canvas:

<canvas class="kn-gl" data-gl="grain" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Kinora is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys kinora-lang and kinora-dir) and reloads; the script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

Prices, timecodes, the edit timeline, the board’s strips and the review scrubber keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 34 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Slate Clap preloader, the header, the Letterbox reveals, the theme and direction switch and the Film Grain WebGL layers.
• 09–10 — Kinora Data, Production Board & Office Clock. Kinora Data holds every figure; the production board works out where each film is today from the visitor’s own date and whether the office is open.
• 11–19 — Custom Select, Currency, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, the currency switch, sliders, accordions, filters, search, forms, choice cards.
• 20–23 — The Cut: Edit Timeline, Aspect Frame, Dolly Push, Timecode Hover. The three home pages’ scroll moments and the timecode hover.
• 24–34 — Shoot Estimate, Brief Wizard, Crew Slices, Client Review Room, Contact Form, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the shoot estimate, the brief wizard, the crew slices, the review room, contact, accounts, the journal, demo forms, the countdown, FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own stills using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the set pieces and the language flags are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, brief, review, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Inter, Noto Serif Display

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embed and the video popups.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.