Origo — From a Single Point | Cinematic AI Agency & Technology WordPress Theme

A WebGL‑powered, single‑origin WordPress theme for AI studios, technology companies, software & platform teams, and ambitious creative‑tech brands. One continuous flight through a living field of light — from a single point, outward through every dimension, back to the source.

Why Origo is different

Most tech themes are a grid of cards with a stock hero. Origo is an experience. The entire site is built on one idea — everything begins at a single point of light — and that idea is rendered live: a persistent, volumetric depth field runs in WebGL behind every page, the site opens with a cinematic The First Pointignition, and every section resolves out of darkness with bespoke, reversible scroll motion. It’s not a re‑skin of a template; it’s a coherent, award‑grade world that tells your visitor, instantly and without words, that your studio builds the future from first principles.

If you want a website that feels like a product launch film instead of a brochure, Origo is built for you.

Key Highlights

  • 🌌Live WebGL depth field— a real Three.js particle universe with depth‑of‑field bokeh, bloom, chromatic aberration and film grain, rendered behind the whole site (not a video, not a background image).
  • ✨ The First Point cinematic intro— a single point ignites in the void, the field grows outward, the brand resolves, and the camera flows seamlessly into the hero with no hard cut.
  • 🎛️One‑switch dynamic engine— change one colour in Theme Settings and it re‑skins every CSS ruleandevery WebGL shader at once, because the 3D scene reads the same CSS variables your styles do.
  • 🟠 First Light palette— a signature warm‑amber‑origin → cold‑indigo‑void identity, fully editable.
  • 🧩Elementor + ACF Pro— bespoke, content‑driven widgets; unlimited, fully editable content.
  • 🔎Built‑in SEO— automatic JSON‑LD structured data, meta tags, Open Graph & Twitter Cards. No SEO plugin required.
  • ⚡Performance‑minded & accessible — a single shared animation loop, off‑screen pausing, and full (prefers‑reduced‑motion) support.
  • 📱Fully responsive— the cinematic experience adapts cleanly from ultrawide to mobile.
  • 🖼️Smart logo system— built‑in animated brand mark by default; upload your ownSVG or PNGto override site‑wide (SVG uploads enabled & sanitized).

The Concept (the scenario)

Origo treats your visitor as a traveller. The journey is one unbroken flight:

  1. The First Point— the site ignites from a single luminous origin.
  2. Arrival— an asymmetric invitation hung on a vertical meridian of light.
  3. How Everything Begins— your story told asemergence: order forming from one source along a horizontal lattice of light.
  4. The Dimensions— your capabilities, each on its own wavelength, refracting out of the origin.
  5. The Architects— your team, portraits resolving out of light.
  6. What the Light Has Touched— testimonials as records of light.
  7. What the Origin Has Measured— your metrics, in clean count‑up numerals.
  8. Open the Channel— a beam reaches out; the invitation to begin.
  9. Return to the Source — a calm farewell footer.The point remains.

Every station is structurally original and animates on scroll — and reverses gracefully when you scroll back up.

The Living Depth Field (the engine)

The heart of Origo is a single, persistent Three.js (r144) WebGL scene that all pages share:

  • In‑shader infinite tunnel — endless, object‑permanent star/particle field via GLSL (mod) z‑tiling.
  • Per‑point bokeh depth‑of‑field— out‑of‑focus particles bloom into soft discs; the focus band drifts with scroll, so the field reads as designed strata, not a screensaver.
  • Bespoke post‑processing— bloom + chromatic aberration + film grain + vignette + tone, all dialled for a premium, cinematic look.
  • Scroll‑reactive camera— the field travels inward as you move down the page.
  • Colour from CSS variables— the entire scene re‑skins the instant you change your palette.
  • Performance first — DPR‑capped, paused when the tab is hidden, one shared (requestAnimationFrame) ticker for the field, the aperture cursor and all section scenes; an (?ogfps=1) overlay for diagnostics.
  • Graceful fallback— if WebGL is unavailable or reduced motion is requested, the field becomes a still, calm backdrop and content remains perfectly readable.

A custom aperture/lens cursor completes the world, reacting and refracting as you move (and automatically disabled on touch and for reduced motion).

Award‑Grade Motion

Built on GSAP + ScrollTrigger and cooperating with Lenis smooth scroll, Origo ships per‑section signature animations that are all reversible (they play on the way down and reverse on the way up):

  • Word‑by‑word heading reveals that resolve from blur and light
  • Clip‑path wavelength wipes, fly‑in‑from‑depth blocks, drawn lines of light with travelling sparks
  • Portraits that resolve from blur to focus with a halo bloom
  • A focus‑pull on imagery as it enters the viewport

It feels alive without ever feeling busy — calm, expansive, exact.

The Six Dimensions (your services)

Origo frames your services as Dimensions that unfold from the single origin, with dedicated, fully‑built detail pages:

Structure · Intelligence · Perception · Depth · Scale · Guard

Each dimension has its own page (with clean, brandable slugs like ( /structure/) , (/intelligence/) …), its own cinematic imagery, professional copy, highlighted marks, and a matching sidebar — all editable. A dedicated Dimensions Roster grid and a numbered Sequence (process) widget complete the services layer.

Transmissions (the blog)

The journal is reborn as Transmissions — a stream of signals from the origin:

  • A premium cardstream(archive, category, tag, search) with framed thumbnails and focus rings
  • A clean single‑postdispatchreading view with social relay and responses
  • A reborn404 — The Unformed Pointstate scene
  • Full control over titles, dates, categories, tags, excerpts, views, comments and sidebar via Theme Settings

The Dynamic Engine — change once, re‑skin everything

Origo is driven by a single source of truth:

Theme Settings → CSS custom properties (:root) → every CSS rule AND every WebGL shader

Change one accent and it instantly updates buttons, gradients, borders and the depth field, the origin core, the cursor and the page‑header light — because nothing is hard‑coded. This is what makes Origo genuinely customizable, not just configurable.

First Light palette & typography

  • Origin(amber accent),Origin Hot(deeper amber / CTA),Light(warm off‑white),Void / Near Strata(deep backgrounds),Cold Depth(indigo of distance),Warm Text.
  • Fonts:Clash Display(display) +General Sans(body) via Fontshare, withSpace Monofor technical labels — all editable (family, size, weight).

Smart Logo System (SVG & Image)

A clean, sellable logo model your clients will understand instantly:

  • Empty by default→ the site shows the crafted, animated Origo brand mark, so the site and Theme Settings always agree.
  • Upload to override→ drop in your own logo and it renders as a full lockup site‑wide, at a natural size.
  • SVG supported→ SVG uploads are enabled (and sanitized) for administrators; PNG/JPG work too. No file paths, no code.
  • Favicon→ ships ready and easily replaced.

Built‑in SEO (no plugin needed)

Origo outputs clean, automatic SEO from your Theme Settings:

  • JSON‑LD structured data— Organization / ProfessionalService, WebSite and BlogPosting schema
  • Meta title, description & keywordsper the SEO panel
  • Open Graph & Twitter Cardtags with a default share image
  • Semantic, fast, accessible markup with proper headings and lazy‑loaded imagery

Pair it with your favourite SEO plugin if you wish — or run lean with the built‑in output.

Page Building — Elementor + ACF Pro

  • Elementor: bespoke, content‑driven Origo widgets (Arrival hero, How Everything Begins, The Dimensions, The Principles, Service Detail, The Sequence, The Architects, Metrics, Testimonials, FAQ, Open the Channel, Project Intake, Gallery, Brands and more).
  • ACF Pro: every page is an editable, tabbed layout with unlimited, repeatable content — no developer required.
  • Custom Origo icon set: a built‑in SVG line‑icon library (Structure, Intelligence, Perception, Depth, Scale, Guard, Network, Aperture, Layers, Phone, Mail, Support, Location, Calendar, Arrow, Origin spark) that strokes with your accent colour, available at the top of every icon picker.
  • Contact Form 7: all popup, contact, channel and project‑intake (booking) forms — automatically styled to the Origo palette.

Header, Menu, Footer & States

  • The Horizon header— a line of light carrying the brand mark, a sticky blurred band, and a single aperture that opensTHE FULL FIELDimmersive overlay menu.
  • Dual menu— separate desktop (Top) and mobile menus; the immersive overlay scrolls cleanly at any size.
  • Return to the Source footer— a calm farewell, a global node‑map, editable link directory, contact column and live telemetry readouts.
  • Reborn 404, search, and listing states— every screen on‑brand.

What’s included

  • The completeOrigo WordPress theme (origo.zip)
  • One‑click demo import + (options.json) theme‑settings import + widgets file
  • Thisfull documentation(installation, demo import, Theme Settings, palette, logo system, hero/ignition, SEO, blog, footer, forms, menus)
  • Required plugin bundle prompts (Elementor, ACF Pro, Contact Form 7, One Click Demo Import)
  • Lifetime updates & friendly support

Perfect for

AI agencies & AI startups · machine‑learning & data‑science studios · SaaS & software companies · technology & IT services · cloud, DevOps & platform engineering · cybersecurity firms · web3 / fintech / deep‑tech · digital product studios · innovation labs · creative‑tech & design agencies · startups raising or launching · portfolios for engineers, founders and studios.

Requirements

  • WordPress 6.0+
  • PHP 8.0+ (8.1+ recommended)
  • MySQL 5.7+ / MariaDB 10.3+
  • 256MB memory minimum (512MB recommended)
  • A WebGL‑capable modern browser for the full experience (graceful fallback otherwise)