ORBZO — Hand-Illustrated Game & Studio HTML Template

Overview

ORBZO is a package of four hand-illustrated HTML template sites that share one design system — the same tokens, header, footer, component vocabulary, motion layer and assistant widget — dressed for four different creative subjects. The art identity is a lavender and indigo night sky, an orange spacesuit and a cream skull-faced astronaut, drawn by hand in a 2D cartoon style; the type pairing is Lilita One over Patrick Hand, and the interface motif is film and comics: perforated marquees, dashed rules and contact-sheet numbering.

The suite runs on semantic HTML5, CSS custom properties and vanilla JavaScript, with no build step and no CDN requests at runtime: fonts, libraries and images are all bundled in the package. Every demo ships as a complete site — 52 pages in total — plus a collection hub that presents the four presets in a full-screen vertical slider.

Suitable For

• Indie game studios and developer portfolios — Preset 01 (Orbzo Game Studio)
• Single-game showcases, store pages and press kits — Preset 02 (Orbzo Game)
• Illustrators, visual artists and freelance creatives — Preset 03 (Orbzo Portfolio)
• Animation studios, motion designers and film collectives — Preset 04 (Orbzo Motion)
• Studio sites, game launch pages, project case studies, journals, commission and contact funnels, convention and press microsites.

Key Features

• Collection hub: a full-viewport vertical Swiper where slide 01 introduces the package and slides 02–05 present each preset with its own square preview sheet, navigable by wheel, swipe, arrow keys or the numbered rail, with a readable fallback if Swiper cannot load.
• Dual theme and direction: light and dark modes plus a live LTR/RTL toggle, all booted before first paint, persisted per visitor across the whole collection, and switched by accessible controls built at runtime — no page carries any switch markup.
• Motion layer: GSAP + ScrollTrigger + Lenis with a per-template reveal plan and a seventeen-effect entrance vocabulary; every page is authored visible, so with scripting off or reduced motion set, nothing is hidden and nothing moves unexpectedly.
• WebGL backdrop: a hand-painted cartoon Moon and Sun drawn with Three.js, gated behind a small boot script so the 655 KB library is only fetched on devices that can render it; the whole scene mirrors live when the direction switch flips.
• Orbzo Assistant: a floating astronaut guide whose gaze follows the pointer through an eight-direction sprite atlas, answering questions from a hand-written local knowledge base per demo; no request leaves the page, with an optional seam to your own endpoint.
• Mobile menu modal: on phones the hamburger opens a small dialog whose links sit in an icon grid built from the page's own navigation list; without JavaScript the Bootstrap dropdown remains as the fallback.
• Social links in every footer point to the platforms themselves (Instagram, YouTube, Discord, X, Vimeo, LinkedIn, Behance, ArtStation, Mastodon, TikTok) with target="_blank" and rel="noopener noreferrer" — swap the URLs for your own profile addresses in one find-and-replace pass.
• Filter engine with layout transitions: work and journal grids filter by category while cards glide to their new places, with a result readout, journal search, counters, process tabs, a Swiper games shelf, a lightbox, media dialogs and demo forms that validate and announce outcomes in a live region — no alert() dialogs anywhere.
• Contact-sheet design system: flush dense CSS-grid work mosaics that take portrait art on tall tiles, a perforated film-strip marquee with CSS-counter shot numbers, and number chips pinned light-on-dark so they stay legible in both colour modes.
• RTL-safe codebase: logical properties throughout, a live direction toggle beside the theme switch, the WebGL moon/sun scene and its sparkles mirroring with the layout, and a verified dir="rtl" render pass.
• Documentation: a sixteen-section manual shipped as a single HTML file styled in the template's own design language, plus captured accessibility reports for all four demos.

Included Demos and Pages

52 demo pages, plus the hub and a starter skeleton — 54 HTML files in total.

Each preset keeps its own stylesheet, reveal plan and assistant knowledge base while all four depend on the shared Orbzo/assets/ folder.

Technologies

• HTML5 — semantic structure, with data-* attributes wiring the markup to the scripts.
• CSS3 — main.css carries the design tokens and site chrome in 15 sections; responsive.css holds the breakpoint layers; theme-modes.css carries the dark palette and the mode switch; components.css holds the shared page components; selector.css is the hub's own sheet; each preset adds a pages.css for its specific components.
• Bootstrap 5.3.3 — collapse, modal and grid utilities; the visual identity is authored CSS, not default Bootstrap styling.
• Bootstrap Icons 1.11.3 — icon set used across navigation, buttons, lists and the menu grid.
• Swiper 11.2.10 — the hub's full-viewport slider and the studio games shelf only.
• GSAP 3.15.0 + ScrollTrigger — entrance reveals and scroll-triggered timelines.
• Lenis 1.3.27 — smooth scrolling, with native scroll kept under reduced motion.
• Three.js r160 — the cartoon moon-and-sun WebGL backdrop (ES module, gated).
• Vanilla JavaScript — the shared behavior engine (main.js), reveal.js, ui-kit.js (loader curtain + back-to-top), theme-init.js / theme-modes.js, selector.js, moon-boot.js / moon-hologram.js and orbzo-assistant.js, plus per-demo template.js and assistant-data.js.
• Lilita One and Patrick Hand — self-hosted WOFF/WOFF2 subsets under the SIL Open Font License; no Google Fonts request at runtime.

Customization

• Colours: edit the --orbzo-* tokens in the :root block of main.css §2 (the hub keeps a matching copy in selector.css §2); dark mode re-declares the same names under [data-theme="dark"] in theme-modes.css.
• Typography: faces are declared in main.css §1 and referenced through the display and body tokens; replace the files in assets/fonts keeping the OFL notices.
• New pages: copy Orbzo/_starter.html — it carries the exact head, script order, header, footer and dialog skeleton every page uses.
• Grids: cards pick a span (2, 3 or 4 of six columns); tall tiles take portrait art; filtering reads data-cat, so adding a filterable card is two attributes.
• Feature off-switches: dark mode, reveal animations, the loading curtain, the assistant, the hologram and the custom cursors each detach with one or two documented lines.
• Shipping one preset: copy the demo folder plus Orbzo/assets/ keeping the relative layout; the hub, Swiper and Three.js then drop away.
• Media: cards and buttons carry data-media poster hooks — point the dialog at your hosted film and it becomes a player.
• RTL by default: set defaultDir: 'rtl' in the CONFIG of assets/js/theme-init.js, or hard-code <html lang="ar" dir="rtl"> in the pages; visitors can also flip direction live with the toggle beside the theme switch.

Package Contents

• Orbzo/ — everything deployable (about 7.6 MB): the hub index.html, _starter.html, LICENSE-NOTICE.txt, four preset folders with 54 HTML files, assets/css (6 stylesheets), assets/js (9 scripts), assets/vendor (Bootstrap 5.3.3, Bootstrap Icons 1.11.3, GSAP 3.15.0 + ScrollTrigger, Lenis 1.3.27, Swiper 11.2.10, Three.js r160 — each with its license file), assets/fonts (2 self-hosted OFL families with license texts), assets/images (46 blank placeholder canvasses, each printed with its pixel size and file name: WebP illustrations, PNG cursors and assistant sprite, SVG logos, and the hub's 1254×1254 preview sheets).
• docs/ — documentation.html: the sixteen-section manual in a single self-contained HTML file, plus docs/audit/ (accessibility probe reports for all four demos).

Important Notes

• Static template only: finished HTML, CSS and JavaScript source files. No build step, no package manager and no server-side code to install.
• No backend and no CMS. Editing content means editing HTML files; the assistant's answers live in a hand-written JavaScript knowledge base per demo.
• Forms validate but do not send out of the box: they run in a documented demo mode with live-region feedback. Point the contact or newsletter endpoint at your own service (Formspree, a newsletter API or your own route) to receive real submissions; that service is not included.
• No e-commerce. Store, "Get the Game" and "Request a Quote" buttons are markup and links into the demo pages — no cart, payment provider or download delivery.
• No video or audio files ship. Media dialogs show labelled poster frames by design; the seam to wire a hosted film is documented.
• Social buttons link to each platform's own homepage out of the box (Instagram, YouTube, Discord, X, Vimeo, LinkedIn, Behance, ArtStation, Mastodon, TikTok); replace those hrefs with your own profile URLs before launch. Store pages, trailers, downloads and mail buttons intentionally keep the demo "coming soon" dialog.
• Imagery is blank. The 46 files in assets/images/ are flat paper-coloured canvasses with a dashed frame and their pixel size printed in the centre (for example 640 × 427) plus the file name — generated for this package, and sized exactly to the slots they fill (16:9 cards, 2:3 portrait frames, square hero plates, 1254×1254 hub previews). No third-party photography is bundled, so no stock licence is involved. Drop your own art in keeping the same filename, size and format. All names, games, projects, prices, testimonials and biographical text are fictional placeholder copy.
• Third-party licences: Bootstrap, Bootstrap Icons, Lenis, Swiper and Three.js are MIT; Lilita One and Patrick Hand are SIL Open Font License 1.1 with full texts included. GSAP and ScrollTrigger ship under the GreenSock standard licence — confirm the current terms for items distributed for resale before publishing.
• Chrome is covered by an automated screenshot harness and accessibility probes (all four demos report clean); Firefox, Safari and Edge have not had a documented cross-browser pass, so no cross-device guarantee is claimed.
• Accessibility is built in at code level (skip link, landmarks, focus-visible parity with hover, ARIA labelling, reduced-motion handling, complete content with scripting off, captured audit reports); a formal WCAG audit has not been performed, so no conformance level is claimed.
• No external services are required at runtime — no CDN, no web-font requests and no API calls unless you connect a form endpoint yourself.