Overview

A clean, white HTML template for a photo studio complex that hires its rooms by the hour and its kit by the day: two white cycloramas, a daylight loft, a black box and a tabletop bay, a gear room of bodies, lenses, lights, modifiers and grip, and a crew on call. Cyclora ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: live availability from the visitor’s own clock, a day planner that refuses booked hours, the cheapest mix of hours, half days and days with overtime and a Sunday surcharge, gear by the day with a weekend rule and a weekly cap, a hire bag with a damage waiver, a coupon, VAT and a refundable deposit, crew by the half or full day, a six-step booking and a currency switch.

What’s included

• 3 home pages, each with its own scroll moment: The Cyc Turns (Studio One’s white cove turns to face you and the lights roll in from the wall into the set-up), Key, Fill, Rim (a lighting plan from above beside the portrait it lights, the three lights switching on in turn) and 24 To 200 mm (one camera, one scene, the lens zooming with the scroll)
• 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 (pounds, dollars, euros) that repaints every price
• WebGL: the Seamless Sweep, a paper backdrop slowly changing colour, as the ground of the plain bands, and a camera lens in the footer drawn in an RGB chromatic split; three.js studio scenes for two of the scroll moments
• Live availability: free now and until when, in use and free from when, the top bar’s count of free studios and a day board of every studio hour by hour
• Studios with filters, two studio pages with a day planner, a rates page with an estimate, and a six-step booking
• The gear room: categories, day-rate filter, search, sort, prices for the hire days, ready kits, the hire bag, checkout with an order number, saved kit
• Crew with day rates, services, how hire works, Made Here with tabs and a lightbox, two shoot stories with their kit lists
• Journal, FAQ with search, contact with a map and the PHP form, account pages, coming soon with a countdown, 404
• Strobe Pop preloader, Aperture photo reveals through a six-blade iris, the flash-pop hover, Swiper sliders and Fancybox
• Fully responsive from 390 px to wide screens

Getting Started

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

1. Open locally

Unzip the downloaded package and open cyclora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the live availability, the planner, the estimate, the booking, the gear room and the bag all work straight from the files.

2. Deploy to a server

Upload the contents of the cyclora/ 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 studios, their rates and hours, the gear, the crew, the papers and the hire rules live in one place — see Studio & Hire 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 cyclora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

cyclora/
├── *.html                              the 32 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 (33 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
    │       └── three.min.js            the two studio scenes (Home 01 and Home 03 only)
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      15 files
        ├── blog/                        4 files
        ├── crew/                        6 files
        ├── faces/                       5 files
        ├── flags/                       6 files
        ├── gear/                        25 files
        ├── icons/                       34 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── process/                     5 files
        ├── studios/                     13 files
        └── work/                        28 files

To publish the site, upload the contents of cyclora/ to your web root. Photos 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 --cy-blue-rgb) — change both together.

White is the ground and the pale band alternates with it; ink is the headings, the square buttons, the top bar and the footer. Studio blue is the one accent: links, the current page, the short rule under every title and the hover of every button. Mint, honey and coral are the availability signals (free, little time left, booked); with lilac and teal they are also the paper colours on the rail and the colours the Seamless Sweep drifts through. --cy-bg, --cy-band, --cy-surface, --cy-heading and --cy-text are the semantic names the components use — the dark theme swaps those (see Dark & Light Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Poppins (headings in tracked capitals, body, navigation and buttons) and IBM Plex Mono (eyebrows, specs, rates, slot times and the readouts). Swap them by editing the Google Fonts link and the --cy-ff-body / --cy-ff-mono variables.

Logo

The logo is CYCLORA in tracked Poppins capitals with its O drawn as a six-blade aperture. 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 and the footer
• mark-light.png — the aperture alone, white (the account and error pages)
• 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

Cyclora opens white. Every header (and the mobile menu) has a theme switch that turns the dark pages on. The choice is saved in the browser under the key cyclora-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 rates band, the lighting diagram, the estimate, the crew rates, the footer) are black in both themes.
• Icons and plans — each line icon and floor plan ships in an ink and a white version; the right one shows by theme and ground.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Studio & Hire Logic

The figures on every page come from one data block, JS block 09 Cyclora Data near the top of main.js (var CYCLORA). Edit it once and the rates, the planner, the estimate, the booking, the gear room and the bag follow. Prices are in pounds (the currency switch converts them); times are minutes after midnight (420 = 7:00); weekdays run 0 = Sunday to 6 = Saturday.

The studios

The cheapest way to book

For any number of hours the planner, the estimate and the booking compare the hourly rate, a half day plus extra hours, and the full day (with overtime past ten hours), and charge the cheapest. Sundays add the surcharge; VAT goes on top.

Live availability

Each studio’s bookings for a day come from a seeded pattern (the studio and the date) plus the visitor’s own bookings, saved in the browser when they book. Replace dayBlocks() in block 10 with a call to your own calendar to show real bookings; everything else reads from it.

Gear by the day

A Friday pick-up with a Monday return counts as one day.

The hire bag, the saved kit, the coupon and the visitor’s bookings are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag so the bag and checkout have something to show; to start empty, edit readBag() in block 27. Checkout and the booking confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL & 3D

Two small WebGL shaders draw the moving layers: the Seamless Sweep — a paper backdrop curving from the wall into the floor, its colour slowly drifting between three paper colours under a soft vignette, as the ground of the plain bands — and the lens in the footer, drawn three times, once per colour channel, at a slightly different scale: an RGB chromatic split that breathes while the iris inside opens and closes. Each is one canvas:

<canvas class="cy-gl" data-gl="sweep" 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.
• Studio scenes — Home 01 and Home 03 build Studio One’s cove, the lights and a still life with three.js from shapes (no textures), and draw only when the scroll moves 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)

Cyclora 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 cyclora-lang and cyclora-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, times, the day board and the lighting plan keep reading left to right inside their rows.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 33 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 Strobe Pop preloader, the header, the Aperture reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Cyclora Data, Studio Clock & Availability. Cyclora Data holds every figure; the studio clock works out live availability from the visitor’s own time: free now and until when, in use and free from when, the top bar’s count and the day board.
• 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.
• 20–22 — The Cyc Turns, Lighting Diagram, Focal Length. The three home pages’ scroll moments.
• 23–33 — Day Planner & Estimate, Booking Wizard, Studio Filters, Contact Form, Hire Bag & Gear Room, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the day planner and the estimate, the booking wizard, the studio filters, contact, the hire bag and gear room, 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 photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the line icons, the gear packshots, the floor plans 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, booking, checkout, 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
• three.js
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Poppins, IBM Plex Mono

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.