Origo — Vanuit Een Enkel Punt | Cinematisch AI-Agentschap & Technologie WordPress Thema

Een WebGL-aangedreven WordPress-thema met één enkele oorsprong voor AI-studio’s, technologiebedrijven, software- en platformteams en ambitieuze creatieve-tech merken. Een ononderbroken vlucht door een levend lichtveld — vanuit één punt, naar buiten door elke dimensie, terug naar de bron.

Waarom Origo anders is

De meeste tech-thema’s zijn een raster van kaarten met een standaard held. Origo is een ervaring. De hele site is gebouwd op één idee — alles begint bij een enkel lichtpunt — en dat idee wordt live weergegeven: een persistent, volumetrisch diepteveld draait in WebGL achter elke pagina, de site opent met een cinematische Het Eerste Punt-ontsteking, en elke sectie ontvouwt zich uit duisternis met een op maat gemaakte, omkeerbare scroll-beweging. Het is geen reskin van een sjabloon; het is een samenhangende, prijswaardige wereld die uw bezoeker onmiddellijk en zonder woorden vertelt dat uw studio de toekomst bouwt vanuit eerste principes.

Als u een website wilt die aanvoelt als een productlanceringfilm in plaats van een brochure, dan is Origo voor u gebouwd.

Belangrijkste Kenmerken

  • 🌌 Live WebGL-diepteveld — een echt Three.js-deeltjesuniversum met diepteveld-bokeh, bloom, chromatische aberratie en filmkorrel, weergegeven achter de hele site (geen video, geen achtergrondafbeelding).
  • ✨ Het Eerste Punt cinematische intro — één enkel punt ontsteekt in de leegte, het veld groeit naar buiten, het merk ontvouwt zich en de camera vloeit naadloos over in de held zonder harde snede.
  • 🎛️ Een-schakelaar dynamische engine — verander één kleur in Thema-instellingen en het herskint onmiddellijk elke CSS-regel en elke WebGL-shader, omdat de 3D-scène dezelfde CSS-variabelen leest als uw stijlen.
  • 🟠 First Light-palet — een kenmerkende warm-amber → koud-indigo identiteit, volledig bewerkbaar.
  • 🧩 Elementor + ACF Pro — op maat gemaakte, inhoudsgestuurde widgets; onbeperkte, volledig bewerkbare inhoud.
  • 🔎 Ingebouwde SEO — automatische JSON-LD gestructureerde gegevens, meta-tags, Open Graph en Twitter Cards. Geen SEO-plugin nodig.
  • ⚡ Prestatiegericht en toegankelijk — één gedeelde animatielus, pauze buiten beeld en volledige (prefers-reduced-motion)-ondersteuning.
  • 📱 Volledig responsief — de cinematische ervaring past zich netjes aan van ultrawide tot mobiel.
  • 🖼️ Slim logo-systeem — standaard ingebouwd geanimeerd merkbeeld; upload uw eigen SVG of PNG om het sitebreed te overschrijven (SVG-uploads ingeschakeld en gesaneerd).

Het Concept (het scenario)

Origo beschouwt uw bezoeker als een reiziger. De reis is een ononderbroken vlucht:

  1. Het Eerste Punt — de site ontsteekt vanuit een enkele lichtende oorsprong.
  2. Aankomst — een asymmetrische uitnodiging opgehangen aan een verticale meridiaan van licht.
  3. Hoe Alles Begint — uw verhaal verteld als opkomst: orde die zich vormt vanuit één bron langs een horizontaal traliewerk van licht.
  4. De Dimensies — uw capaciteiten, elk op zijn eigen golflengte, brekend vanuit de oorsprong.
  5. De Architecten — uw team, portretten die ontvouwen uit licht.
  6. Wat het Licht Heeft Geraakt — getuigenissen als lichtregistraties.
  7. Wat de Oorsprong Heeft Gemeten — uw statistieken, in heldere optelnummers.
  8. Open het Kanaal — een straal reikt uit; de uitnodiging om te beginnen.
  9. Terugkeer naar de Bron — een rustige afscheidsvoettekst. Het punt blijft.

Elk station is structureel origineel en animeert bij scrollen — en keert sierlijk terug wanneer u omhoog scrolt.

Het Levende Diepteveld (de engine)

Het hart van Origo is een enkele, persistente Three.js (r144) WebGL-scène die alle pagina’s delen:

  • In-shader oneindige tunnel — eindeloos, object-permanent sterren-/deeltjesveld via GLSL (mod) z-tegelzetting.
  • Per-punt bokeh diepteveld — onscherpe deeltjes bloeien tot zachte schijven; de focusband drijft met scrollen, zodat het veld leest als ontworpen lagen, niet als een schermbeveiliging.
  • Op maat gemaakte nabewerking — bloom + chromatische aberratie + filmkorrel + vignet + toon, allemaal ingesteld voor een premium, cinematische look.
  • Scroll-reactieve camera — het veld reist naar binnen terwijl u naar beneden scrolt.
  • Kleur van CSS-variabelen — de hele scène herskint op het moment dat u uw palet wijzigt.
  • Prestatie eerst — DPR-gelimiteerd, gepauzeerd wanneer het tabblad verborgen is, één gedeelde (requestAnimationFrame)-ticker voor het veld, de diafragmacursor en alle sectiescènes; een (?ogfps=1)-overlay voor diagnostiek.
  • Elegante fallback — als WebGL niet beschikbaar is of verminderde beweging wordt aangevraagd, wordt het veld een stille, kalme achtergrond en blijft de inhoud perfect leesbaar.

Een aangepaste diafragma/lens-cursor voltooit de wereld, reageert en breekt terwijl u beweegt (en wordt automatisch uitgeschakeld op touch en voor verminderde beweging).

Prijsniveau Beweging

Gebouwd op GSAP + ScrollTrigger en samenwerkend met de soepele scroll van Lenis, levert Origo per-sectie kenmerkende animaties die allemaal omkeerbaar zijn (ze spelen bij het naar beneden scrollen en keren om bij het naar boven scrollen):

  • Woord-voor-woord koponthullingen die ontvouwen uit vervaging en licht
  • Clip-pad golflengte-veegbewegingen, uit de diepte invliegende blokken, getekende lijnen van licht met reizende vonken
  • Portretten die ontvouwen van vervaging naar scherpte met een halo-bloom
  • Een focus-pull op beelden wanneer ze de viewport binnenkomen

Het voelt levend zonder ooit druk te aanvoelen — kalm, ruim, exact.

De Zes Dimensies (uw diensten)

Origo presenteert uw diensten als Dimensies die zich ontvouwen vanuit de enkele oorsprong, met eigen, volledig uitgewerkte detailpagina’s:

Structuur · Intelligentie · Perceptie · Diepte · Schaal · Bescherming

Elke dimensie heeft zijn eigen pagina (met schone, merkvriendelijke slugs zoals (/structure/), (/intelligence/)…), eigen cinematische beelden, professionele tekst, gemarkeerde kenmerken en een bijpassende zijbalk — allemaal bewerkbaar. Een speciaal Dimensions Roster-raster en een genummerde Sequence-widget (proces) voltooien de dienstenlaag.

Transmissies (de blog)

Het dagboek wordt herboren als Transmissies — een stroom van signalen vanuit de oorsprong:

  • Een premium kaarten-stroom (archief, categorie, tag, zoekopdracht) met omlijste miniaturen en focusringen
  • Een schone enkele-post dispatch leesweergave met sociaal relais en reacties
  • Een herboren 404 — Het Ongevormde Punt statusscène
  • Volledige controle over titels, datums, categorieën, tags, uittreksels, weergaven, reacties en zijbalk via Thema-instellingen

De Dynamische Engine — een keer wijzigen, alles herskinnen

Origo wordt aangestuurd door één enkele bron van waarheid:

Thema-instellingen → CSS custom properties (:root) → elke CSS-regel EN elke WebGL-shader

Verander één accentkleur en het werkt onmiddellijk knoppen, verloopkleuren, randen en het diepteveld, de oorsprongskern, de cursor en het paginakoplicht bij — omdat niets hardgecodeerd is. Dit is wat Origo echt aanpasbaar maakt, niet alleen configureerbaar.

First Light-palet en typografie

  • Oorsprong (amber accent), Oorsprong Heet (dieper amber / CTA), Licht (warm off-wit), Leegte / Nabije Lagen (diepe achtergronden), Koude Diepte (indigo van afstand), Warme Tekst.
  • Lettertypen: Clash Display (display) + General Sans (body) via Fontshare, met Space Mono voor technische labels — allemaal bewerkbaar (familie, grootte, gewicht).

Slim Logo-systeem (SVG & Afbeelding)

Een schoon, verkoopbaar logo-model dat uw klanten onmiddellijk begrijpen:

  • Standaard leeg → de site toont het vervaardigde, geanimeerde Origo-merkbeeld, zodat de site en Thema-instellingen altijd overeenkomen.
  • Uploaden om te overschrijven → voeg uw eigen logo toe en het wordt sitebreed als een volledige lockup weergegeven, op natuurlijke grootte.
  • SVG-ondersteund → SVG-uploads zijn ingeschakeld (en gesaneerd) voor beheerders; PNG/JPG werken ook. Geen bestandspaden, geen code.
  • Favicon — wordt kant-en-klaar geleverd en is eenvoudig te vervangen.

Ingebouwde SEO (geen plugin nodig)

Origo levert schone, automatische SEO vanuit uw Thema-instellingen:

  • JSON-LD gestructureerde gegevens — Organization / ProfessionalService-, WebSite- en BlogPosting-schema
  • Meta-titel, -beschrijving en trefwoorden volgens het SEO-paneel
  • Open Graph en Twitter Card tags met een standaard deelafbeelding
  • Semantische, snelle, toegankelijke opmaak met juiste koppen en lui geladen beelden

Combineer het met uw favoriete SEO-plugin als u wilt — of draai licht met de ingebouwde uitvoer.

Pagina Bouwen — Elementor + ACF Pro

  • Elementor: op maat gemaakte, inhoudsgestuurde Origo-widgets (Aankomstheld, Hoe Alles Begint, De Dimensies, De Principes, Service Detail, De Volgorde, De Architecten, Statistieken, Getuigenissen, FAQ, Open het Kanaal, Projectaanmelding, Galerij, Merken en meer).
  • ACF Pro: elke pagina is een bewerkbare, getabde lay-out met onbeperkte, herhaalbare inhoud — geen ontwikkelaar nodig.
  • Aangepaste Origo-iconenset: een ingebouwde SVG-lijniconenbibliotheek (Structuur, Intelligentie, Perceptie, Diepte, Schaal, Bescherming, Netwerk, Diafragma, Lagen, Telefoon, Mail, Ondersteuning, Locatie, Agenda, Pijl, Oorsprongvonk) die met uw accentkleur meelijn, beschikbaar bovenaan elke iconenkiezer.
  • Contact Form 7: alle pop-up-, contact-, kanaal- en projectaanmeldings- (boekings-) formulieren — automatisch gestyled in het Origo-palet.

Koptekst, Menu, Voettekst en Statussen

  • De Horizon-koptekst — een lichtlijn die het merkbeeld draagt, een plakkerige, vervaagde band en een enkel diafragma dat het HET VOLLEDIGE VELD meeslepende overlay-menu opent.
  • Dubbel menu — aparte desktop- (Boven) en mobiele menu’s; de meeslepende overlay scrolt netjes bij elke grootte.
  • Terugkeer naar de Bron-voettekst — een rustig afscheid, een wereldwijde knooppuntkaart, een bewerkbare linkengids, een contactkolom en live-telemetrie-uitlezingen.
  • Herboren 404-, zoek- en lijststatussen — elk scherm in lijn met het merk.

Wat is inbegrepen

  • Het volledige Origo WordPress-thema (origo.zip)
  • One-click demo-import + (options.json) thema-instellingen-import + widgets-bestand
  • Deze volledige documentatie (installatie, demo-import, Thema-instellingen, palet, logo-systeem, held/ontsteking, SEO, blog, voettekst, formulieren, menu’s)
  • Vereiste plugin-bundel prompts (Elementor, ACF Pro, Contact Form 7, One Click Demo Import)
  • Levenslange updates en vriendelijke ondersteuning

Perfect voor

AI-agentschappen en AI-startups · machine-learning en data-science studio’s · SaaS en softwarebedrijven · technologie en IT-diensten · cloud, DevOps en platform engineering · cybersecurity-bedrijven · web3 / fintech / deep-tech · digitale productstudio’s · innovatielabs · creatieve-tech en ontwerpbureaus · startende of lancering startups · portfolio’s voor ingenieurs, oprichters en studio’s.

Vereisten

  • WordPress 6.0+
  • PHP 8.0+ (8.1+ aanbevolen)
  • MySQL 5.7+ / MariaDB 10.3+
  • 256 MB geheugen minimum (512 MB aanbevolen)
  • Een moderne browser met WebGL-mogelijkheden voor de volledige ervaring (anders elegante fallback)