Origo — Von Einem Punkt Aus | Kinematisches KI-Agentur & Technologie WordPress Theme

Ein WebGL-betriebenes, von einem einzigen Ursprung ausgehendes WordPress-Theme für KI-Studios, Technologieunternehmen, Software- und Plattformteams sowie ambitionierte Kreativ-Tech-Marken. Ein kontinuierlicher Flug durch ein lebendiges Lichtfeld — von einem Punkt aus, nach außen durch jede Dimension, zurück zur Quelle.

Warum Origo anders ist

Die meisten Tech-Themes sind ein Raster aus Karten mit einem Stock-Helden. Origo ist ein Erlebnis. Die gesamte Site basiert auf einer Idee — alles beginnt an einem einzigen Lichtpunkt — und diese Idee wird live umgesetzt: Ein persistentes, volumetrisches Tiefenfeld läuft in WebGL hinter jeder Seite, die Site öffnet sich mit einer filmischen Der Erste Punkt-Zündung, und jeder Abschnitt löst sich mit maßgeschneiderten, reversiblen Scroll-Bewegungen aus der Dunkelheit. Es ist kein Reskin einer Vorlage; es ist eine kohärente, preiswürdige Welt, die Ihrem Besucher sofort und ohne Worte sagt, dass Ihr Studio die Zukunft aus ersten Prinzipien heraus baut.

Wenn Sie eine Website wollen, die sich eher wie ein Produktlaunch-Film anfühlt als wie eine Broschüre, dann ist Origo für Sie gemacht.

Wichtige Highlights

  • 🌌 Live-WebGL-Tiefenfeld — ein echtes Three.js-Partikeluniversum mit Tiefenschärfe-Bokeh, Bloom, chromatischer Aberration und Filmkorn, hinter der gesamten Site gerendert (kein Video, kein Hintergrundbild).
  • ✨ Der Erste Punkt filmische Einleitung — ein einzelner Punkt entzündet sich im Nichts, das Feld wächst nach außen, die Marke formt sich, und die Kamera fließt nahtlos in den Helden ohne harten Schnitt.
  • 🎛️ Ein-Schalter-Dynamik-Engine — ändern Sie eine Farbe in den Theme-Einstellungen und es reskinnt sofort jede CSS-Regel und jeden WebGL-Shader, weil die 3D-Szene dieselben CSS-Variablen liest wie Ihre Styles.
  • 🟠 First Light-Palette — eine markante warm-bernsteinfarben → kalt-indigofarbene Identität, vollständig editierbar.
  • 🧩 Elementor + ACF Pro — maßgeschneiderte, inhaltsgesteuerte Widgets; unbegrenzte, vollständig editierbare Inhalte.
  • 🔎 Integriertes SEO — automatische JSON-LD-Strukturdaten, Meta-Tags, Open Graph und Twitter Cards. Kein SEO-Plugin erforderlich.
  • ⚡ Performance-orientiert und barrierefrei — eine einzige gemeinsame Animationsschleife, Bildschirm-Pausierung und volle (prefers-reduced-motion)-Unterstützung.
  • 📱 Vollständig responsiv — das filmische Erlebnis passt sich sauber von Ultrawide bis zu Mobilgeräten an.
  • 🖼️ Intelligentes Logo-System — standardmäßig integrierte animierte Markenzeichen; laden Sie Ihr eigenes SVG oder PNG hoch, um es seitenweit zu überschreiben (SVG-Uploads aktiviert und bereinigt).

Das Konzept (das Szenario)

Origo betrachtet Ihren Besucher als Reisenden. Die Reise ist ein ununterbrochener Flug:

  1. Der Erste Punkt — die Site entzündet sich an einem einzigen leuchtenden Ursprung.
  2. Ankunft — eine asymmetrische Einladung, aufgehängt an einem vertikalen Lichtmeridian.
  3. Wie Alles Beginnt — Ihre Geschichte wird als Emergenz erzählt: Ordnung, die sich aus einer Quelle entlang eines horizontalen Lichtgitters bildet.
  4. Die Dimensionen — Ihre Fähigkeiten, jede auf ihrer eigenen Wellenlänge, aus dem Ursprung brechend.
  5. Die Architekten — Ihr Team, Porträts, die sich aus Licht auflösen.
  6. Was das Licht Berührt Hat — Testimonials als Aufzeichnungen des Lichts.
  7. Was der Ursprung Gemessen Hat — Ihre Metriken in klaren Zählzahlen.
  8. Öffne den Kanal — ein Strahl greift aus; die Einladung zu beginnen.
  9. Rückkehr zur Quelle — ein ruhiger Abschieds-Footer. Der Punkt bleibt.

Jede Station ist strukturell originell und animiert beim Scrollen — und kehrt sich beim Zurückscrollen anmutig um.

Das Lebendige Tiefenfeld (die Engine)

Das Herz von Origo ist eine einzige, persistente Three.js (r144) WebGL-Szene, die alle Seiten teilen:

  • In-Shader-unendlicher Tunnel — endloses, objekt-permanentes Stern-/Partikelfeld via GLSL (mod)-Z-Tiling.
  • Punkt-für-Punkt-Bokeh-Tiefenschärfe — unscharfe Partikel blühen zu weichen Scheiben auf; das Fokusband driftet mit dem Scrollen, sodass das Feld als gestaltete Schichten und nicht als Bildschirmschoner wahrgenommen wird.
  • Maßgeschneiderte Nachbearbeitung — Bloom + chromatische Aberration + Filmkorn + Vignette + Ton, alle für einen erstklassigen, filmischen Look eingestellt.
  • Scroll-reaktive Kamera — das Feld wandert nach innen, während Sie die Seite hinunter scrollen.
  • Farbe aus CSS-Variablen — die gesamte Szene wird im selben Moment neu eingefärbt, in dem Sie Ihre Palette ändern.
  • Performance zuerst — DPR-begrenzt, pausiert, wenn der Tab ausgeblendet ist, ein gemeinsamer (requestAnimationFrame)-Ticker für das Feld, den Blenden-Cursor und alle Abschnitts-Szenen; ein (?ogfps=1)-Overlay für Diagnosen.
  • Anmutiges Fallback — wenn WebGL nicht verfügbar ist oder reduzierte Bewegung gewünscht wird, wird das Feld zu einem ruhigen, statischen Hintergrund und der Inhalt bleibt perfekt lesbar.

Ein benutzerdefinierter Blenden/Objektiv-Cursor vervollständigt die Welt, reagiert und bricht, während Sie sich bewegen (und wird auf Touch und für reduzierte Bewegung automatisch deaktiviert).

Preisgekrönte Bewegung

Basierend auf GSAP + ScrollTrigger und in Zusammenarbeit mit Lenis Smooth Scroll liefert Origo abschnittsspezifische Signature-Animationen, die alle reversibel sind (sie laufen beim Runterrollen und kehren sich beim Hochrollen um):

  • Wort-für-Wort-Überschriften-Enthüllungen, die sich aus Unschärfe und Licht lösen
  • Clip-Path-Wellenlängen-Wischungen, aus der Tiefe hereinfliegende Blöcke, gezeichnete Lichtlinien mit reisenden Funken
  • Porträts, die sich aus Unschärfe zu Schärfe mit Heiligenschein-Bloom lösen
  • Ein Fokus-Pull auf Bildern, wenn sie in den Viewport gelangen

Es fühlt sich lebendig an, ohne jemals hektisch zu wirken — ruhig, weitläufig, exakt.

Die Sechs Dimensionen (Ihre Dienstleistungen)

Origo präsentiert Ihre Dienstleistungen als Dimensionen, die sich aus dem einzigen Ursprung entfalten, mit eigenen, voll ausgebauten Detailseiten:

Struktur · Intelligenz · Wahrnehmung · Tiefe · Maßstab · Schutz

Jede Dimension hat ihre eigene Seite (mit sauberen, markenfähigen Slugs wie (/structure/), (/intelligence/)…), ihre eigenen filmischen Bilder, professionellen Texte, hervorgehobenen Markierungen und eine passende Seitenleiste — alles editierbar. Ein eigenes Dimensionen-Roster-Raster und ein nummeriertes Sequence-Widget (Prozess) vervollständigen die Dienstleistungsebene.

Transmissionen (der Blog)

Das Journal wird als Transmissionen neu geboren — ein Strom von Signalen vom Ursprung:

  • Ein Premium-Karten-Stream (Archiv, Kategorie, Tag, Suche) mit gerahmten Vorschaubildern und Fokusringen
  • Eine saubere Einzelbeitrags-Depeschen-Leseansicht mit sozialem Relais und Antworten
  • Eine wiedergeborene 404 — Der Ungeformte Punkt-Zustandsszene
  • Vollständige Kontrolle über Titel, Daten, Kategorien, Tags, Auszüge, Aufrufe, Kommentare und Seitenleiste über Theme-Einstellungen

Die Dynamische Engine — einmal ändern, alles reskinnt

Origo wird von einer einzigen Quelle der Wahrheit angetrieben:

Theme-Einstellungen → CSS-Custom-Properties (:root) → jede CSS-Regel UND jeder WebGL-Shader

Ändern Sie eine Akzentfarbe und sie aktualisiert sofort Schaltflächen, Farbverläufe, Rahmen und das Tiefenfeld, den Ursprungskern, den Cursor und das Seitenkopflicht — denn nichts ist fest codiert. Das macht Origo wirklich anpassbar, nicht nur konfigurierbar.

First Light-Palette & Typografie

  • Ursprung (bernsteinfarbener Akzent), Ursprung Heiß (tieferes Bernstein / CTA), Licht (warmes Off-White), Leere / Nahe Schichten (tiefe Hintergründe), Kalte Tiefe (Indigo der Ferne), Warmer Text.
  • Schriften: Clash Display (Display) + General Sans (Fließtext) über Fontshare, mit Space Mono für technische Labels — alle editierbar (Familie, Größe, Gewicht).

Intelligentes Logo-System (SVG & Bild)

Ein sauberes, verkaufbares Logo-Modell, das Ihre Kunden sofort verstehen:

  • Standardmäßig leer → die Site zeigt das handgefertigte, animierte Origo-Markenzeichen, sodass Site und Theme-Einstellungen immer übereinstimmen.
  • Zum Überschreiben hochladen → fügen Sie Ihr eigenes Logo ein und es wird als vollständiges Lockup seitenweit in natürlicher Größe gerendert.
  • SVG-unterstützt → SVG-Uploads sind für Administratoren aktiviert (und bereinigt); PNG/JPG funktionieren ebenfalls. Keine Dateipfade, kein Code.
  • Favicon → wird fertig mitgeliefert und kann leicht ersetzt werden.

Integriertes SEO (kein Plugin nötig)

Origo gibt sauberes, automatisches SEO aus Ihren Theme-Einstellungen aus:

  • JSON-LD-Strukturdaten — Organization / ProfessionalService-, WebSite- und BlogPosting-Schema
  • Meta-Titel, -Beschreibung & -Schlüsselwörter gemäß SEO-Panel
  • Open Graph- & Twitter Card-Tags mit einem Standard-Share-Bild
  • Semantisches, schnelles, barrierefreies Markup mit korrekten Überschriften und Lazy-Load-Bildern

Kombinieren Sie es mit Ihrem bevorzugten SEO-Plugin, wenn Sie möchten — oder nutzen Sie es schlank mit der integrierten Ausgabe.

Seitenaufbau — Elementor + ACF Pro

  • Elementor: maßgeschneiderte, inhaltsgesteuerte Origo-Widgets (Ankunftsheld, Wie Alles Beginnt, Die Dimensionen, Die Prinzipien, Service-Detail, Die Sequenz, Die Architekten, Metriken, Testimonials, FAQ, Öffne den Kanal, Projektaufnahme, Galerie, Marken und mehr).
  • ACF Pro: jede Seite ist ein editierbares, tabbed Layout mit unbegrenztem, wiederholbarem Inhalt — kein Entwickler erforderlich.
  • Benutzerdefiniertes Origo-Icon-Set: eine integrierte SVG-Linien-Icon-Bibliothek (Struktur, Intelligenz, Wahrnehmung, Tiefe, Maßstab, Schutz, Netzwerk, Blende, Ebenen, Telefon, Mail, Support, Standort, Kalender, Pfeil, Ursprungsfunke), die mit Ihrer Akzentfarbe gezeichnet wird und am oberen Rand jedes Icon-Pickers verfügbar ist.
  • Contact Form 7: alle Popup-, Kontakt-, Kanal- und Projektaufnahme- (Buchungs-) Formulare — automatisch im Origo-Palettenstil.

Header, Menü, Footer & Zustände

  • Der Horizont-Header — eine Lichtlinie, die das Markenzeichen trägt, ein klebriges, unscharfes Band und eine einzige Blende, die das VOLLE FELD immersive Overlay-Menü öffnet.
  • Dual-Menü — separate Desktop- (Top) und Mobile-Menüs; das immersive Overlay scrollt bei jeder Größe sauber.
  • Rückkehr zur Quelle-Footer — ein ruhiger Abschied, eine globale Knotenkarte, editierbares Link-Verzeichnis, Kontaktspalte und Live-Telemetrieanzeigen.
  • Wiedergeborene 404-, Such- und Listenzustände — jeder Bildschirm markengerecht.

Was enthalten ist

  • Das komplette Origo WordPress-Theme (origo.zip)
  • One-Click-Demo-Import + (options.json) Theme-Einstellungen-Import + Widgets-Datei
  • Diese vollständige Dokumentation (Installation, Demo-Import, Theme-Einstellungen, Palette, Logo-System, Held/Zündung, SEO, Blog, Footer, Formulare, Menüs)
  • Benötigte Plugin-Bundle-Hinweise (Elementor, ACF Pro, Contact Form 7, One Click Demo Import)
  • Lebenslange Updates & freundlicher Support

Perfekt für

KI-Agenturen & KI-Startups · Machine-Learning- & Data-Science-Studios · SaaS- & Software-Unternehmen · Technologie- & IT-Dienstleistungen · Cloud-, DevOps- & Plattform-Engineering · Cybersicherheitsfirmen · Web3 / Fintech / Deep-Tech · Digitale Produktstudios · Innovationslabore · Kreativ-Tech- & Designagenturen · Startups, die finanzieren oder starten · Portfolios für Ingenieure, Gründer und Studios.

Anforderungen

  • WordPress 6.0+
  • PHP 8.0+ (8.1+ empfohlen)
  • MySQL 5.7+ / MariaDB 10.3+
  • Mindestens 256 MB Arbeitsspeicher (512 MB empfohlen)
  • Ein WebGL-fähiger moderner Browser für das volle Erlebnis (ansonsten anmutiges Fallback)