Origo — Depuis un Seul Point | Thème WordPress Cinématique pour Agence IA et Technologie

Un thème WordPress propulsé par WebGL, à origine unique, pour les studios d’IA, les entreprises technologiques, les équipes de logiciels et de plateformes, et les marques créatives-tech ambitieuses. Un vol continu à travers un champ de lumière vivant — depuis un seul point, vers l’extérieur à travers chaque dimension, retour vers la source.

Pourquoi Origo est différent

La plupart des thèmes tech sont une grille de cartes avec un héros stock. Origo est une expérience. Tout le site est construit sur une idée — tout commence à partir d’un seul point de lumière — et cette idée est rendue en direct : un champ de profondeur volumétrique persistant fonctionne en WebGL derrière chaque page, le site s’ouvre avec une ignition cinématique Le Premier Point, et chaque section émerge de l’obscurité avec un mouvement de défilement personnalisé et réversible. Ce n’est pas un reskin d’un modèle ; c’est un monde cohérent, digne d’un prix, qui dit à votre visiteur, instantanément et sans mots, que votre studio construit l’avenir à partir des premiers principes.

Si vous voulez un site Web qui ressemble davantage à un film de lancement de produit qu’à une brochure, Origo est fait pour vous.

Points Clés

  • 🌌 Champ de profondeur WebGL en direct — un véritable univers de particules Three.js avec bokeh de profondeur de champ, bloom, aberration chromatique et grain cinéma, rendu derrière l’ensemble du site (pas une vidéo, pas une image d’arrière-plan).
  • ✨ Introduction cinématique Le Premier Point — un seul point s’enflamme dans le vide, le champ s’étend vers l’extérieur, la marque se résout, et la caméra s’écoule de manière transparente dans le héros sans coupure franche.
  • 🎛️ Moteur dynamique à un interrupteur — changez une couleur dans les paramètres du thème et il recolore instantanément chaque règle CSS et chaque shader WebGL, car la scène 3D lit les mêmes variables CSS que vos styles.
  • 🟠 Palette First Light — une identité signature ambre-chaud → indigo-froid, entièrement modifiable.
  • 🧩 Elementor + ACF Pro — des widgets personnalisés, orientés contenu ; un contenu illimité, entièrement modifiable.
  • 🔎 SEO intégré — données structurées JSON-LD automatiques, balises meta, Open Graph et Twitter Cards. Aucun plugin SEO requis.
  • ⚡ Optimisé pour la performance et accessible — une seule boucle d’animation partagée, pause hors écran et support complet de (prefers-reduced-motion).
  • 📱 Entièrement responsive — l’expérience cinématique s’adapte proprement de l’ultralarge au mobile.
  • 🖼️ Système de logo intelligent — marque animée intégrée par défaut ; téléchargez votre propre SVG ou PNG pour remplacer à l’échelle du site (téléchargements SVG activés et nettoyés).

Le Concept (le scénario)

Origo considère votre visiteur comme un voyageur. Le voyage est un vol ininterrompu :

  1. Le Premier Point — le site s’enflamme à partir d’une seule origine lumineuse.
  2. Arrivée — une invitation asymétrique suspendue à un méridien vertical de lumière.
  3. Comment Tout Commence — votre histoire racontée comme une émergence : l’ordre se formant à partir d’une source le long d’un treillis horizontal de lumière.
  4. Les Dimensions — vos capacités, chacune sur sa propre longueur d’onde, se réfractant hors de l’origine.
  5. Les Architectes — votre équipe, des portraits émergeant de la lumière.
  6. Ce que la Lumière a Touché — les témoignages comme enregistrements de lumière.
  7. Ce que l’Origine a Mesuré — vos métriques, en chiffres comptés clairs.
  8. Ouvrir le Canal — un faisceau s’étend ; l’invitation à commencer.
  9. Retour à la Source — un pied de page d’adieu calme. Le point demeure.

Chaque station est structurellement originale et s’anime au défilement — et s’inverse gracieusement lorsque vous revenez en arrière.

Le Champ de Profondeur Vivant (le moteur)

Le cœur d’Origo est une seule scène Three.js (r144) WebGL persistante que toutes les pages partagent :

  • Tunnel infini dans le shader — champ d’étoiles/particules infini et permanent via le tuilage z GLSL (mod).
  • Bokeh de profondeur de champ par point — les particules floues s’épanouissent en disques doux ; la bande de mise au point dérive avec le défilement, de sorte que le champ se lit comme des strates conçues, pas comme un économiseur d’écran.
  • Post-traitement personnalisé — bloom + aberration chromatique + grain cinéma + vignette + ton, tous réglés pour un look premium et cinématique.
  • Caméra réactive au défilement — le champ se déplace vers l’intérieur lorsque vous descendez dans la page.
  • Couleur à partir des variables CSS — toute la scène est recoloriée instantanément lorsque vous changez votre palette.
  • La performance d’abord — limitée par DPR, mise en pause lorsque l’onglet est caché, un seul ticker (requestAnimationFrame) partagé pour le champ, le curseur d’ouverture et toutes les scènes de section ; un overlay (?ogfps=1) pour le diagnostic.
  • Rétrograder gracieusement — si WebGL n’est pas disponible ou si un mouvement réduit est demandé, le champ devient un arrière-plan calme et immobile et le contenu reste parfaitement lisible.

Un curseur d’ouverture/objectif personnalisé complète le monde, réagissant et se réfractant lorsque vous bougez (et automatiquement désactivé sur le toucher et pour les mouvements réduits).

Animation de Qualité Supérieure

Construit sur GSAP + ScrollTrigger et coopérant avec le défilement fluide de Lenis, Origo propose des animations signature par section qui sont toutes réversibles (elles se jouent à la descente et s’inversent à la remontée) :

  • Révélations de titres mot par mot qui se résolvent du flou et de la lumière
  • Balayages de longueur d’onde par clip-path, blocs s’envolant de la profondeur, lignes de lumière dessinées avec des étincelles voyageuses
  • Portraits qui se résolvent du flou à la netteté avec un bloom auréole
  • Un focus-pull sur les images lorsqu’elles entrent dans la zone d’affichage

Il semble vivant sans jamais sembler chargé — calme, expansif, précis.

Les Six Dimensions (vos services)

Origo présente vos services comme des Dimensions qui se déploient à partir de l’origine unique, avec des pages de détail dédiées et entièrement construites :

Structure · Intelligence · Perception · Profondeur · Échelle · Protection

Chaque dimension a sa propre page (avec des slugs propres et personnalisables comme (/structure/), (/intelligence/)…), ses propres images cinématographiques, du contenu professionnel, des marques mises en évidence et une barre latérale correspondante — le tout modifiable. Une grille Dimensions Roster dédiée et un widget Séquence (processus) numéroté complètent la couche de services.

Transmissions (le blog)

Le journal renaît en tant que Transmissions — un flux de signaux provenant de l’origine :

  • Un flux de cartes premium (archive, catégorie, tag, recherche) avec des vignettes encadrées et des anneaux de focus
  • Une vue de lecture dépêche propre pour les articles uniques avec relais social et réponses
  • Une scène d’état 404 — Le Point Informe renaissante
  • Contrôle total sur les titres, dates, catégories, tags, extraits, vues, commentaires et barre latérale via les paramètres du thème

Le Moteur Dynamique — changez une fois, tout est relooké

Origo est piloté par une seule source de vérité :

Paramètres du thème → propriétés CSS personnalisées (:root) → chaque règle CSS ET chaque shader WebGL

Changez une couleur d’accent et elle met instantanément à jour les boutons, les dégradés, les bordures et le champ de profondeur, le noyau d’origine, le curseur et la lumière de l’en-tête de page — car rien n’est codé en dur. C’est ce qui rend Origo véritablement personnalisable, pas seulement configurable.

Palette First Light et typographie

  • Origine (accent ambre), Origine Chaud (ambre plus profond / CTA), Lumière (blanc cassé chaud), Vide / Couches Proches (arrière-plans profonds), Profondeur Froide (indigo de la distance), Texte Chaud.
  • Polices : Clash Display (affichage) + General Sans (corps) via Fontshare, avec Space Mono pour les étiquettes techniques — toutes modifiables (famille, taille, poids).

Système de Logo Intelligent (SVG & Image)

Un modèle de logo propre et commercialisable que vos clients comprendront instantanément :

  • Vide par défaut → le site affiche la marque Origo animée et conçue, de sorte que le site et les paramètres du thème sont toujours en accord.
  • Télécharger pour remplacer → déposez votre propre logo et il s’affiche comme un bloc complet à l’échelle du site, à une taille naturelle.
  • SVG pris en charge — les téléchargements SVG sont activés (et nettoyés) pour les administrateurs ; PNG/JPG fonctionnent aussi. Pas de chemins de fichiers, pas de code.
  • Favicon → fourni prêt et facilement remplaçable.

SEO Intégré (aucun plugin nécessaire)

Origo produit un SEO propre et automatique à partir de vos paramètres de thème :

  • Données structurées JSON-LD — Schéma Organization / ProfessionalService, WebSite et BlogPosting
  • Meta titre, description et mots-clés selon le panneau SEO
  • Balises Open Graph & Twitter Card avec une image de partage par défaut
  • Balises sémantiques, rapides, accessibles avec des titres appropriés et des images à chargement différé

Associez-le à votre plugin SEO préféré si vous le souhaitez — ou fonctionnez léger avec la sortie intégrée.

Construction de Pages — Elementor + ACF Pro

  • Elementor : widgets Origo personnalisés et orientés contenu (héros Arrivée, Comment Tout Commence, Les Dimensions, Les Principes, Détail du Service, La Séquence, Les Architectes, Métriques, Témoignages, FAQ, Ouvrir le Canal, Prise de Projet, Galerie, Marques et plus).
  • ACF Pro : chaque page est une mise en page modifiable et ongletée avec un contenu illimité et répétable — aucun développeur requis.
  • Ensemble d’icônes Origo personnalisé : une bibliothèque d’icônes SVG intégrée (Structure, Intelligence, Perception, Profondeur, Échelle, Protection, Réseau, Ouverture, Couches, Téléphone, Mail, Support, Emplacement, Calendrier, Flèche, Étincelle d’origine) qui se trace avec votre couleur d’accent, disponible en haut de chaque sélecteur d’icônes.
  • Contact Form 7 : tous les formulaires de popup, contact, canal et prise de projet (réservation) — automatiquement stylisés selon la palette Origo.

En-tête, Menu, Pied de Page et États

  • L’en-tête Horizon — une ligne de lumière portant la marque, une bande floue collante et une seule ouverture qui ouvre le menu superposé immersif LE CHAMP COMPLET.
  • Double menu — menus de bureau (Haut) et mobiles séparés ; la superposition immersive défile proprement à n’importe quelle taille.
  • Pied de page Retour à la Source — un adieu calme, une carte de nœuds globale, un répertoire de liens modifiable, une colonne de contact et des relevés de télémétrie en direct.
  • États 404, recherche et liste renaissants — chaque écran conforme à la marque.

Ce qui est inclus

  • Le thème Origo complet (origo.zip)
  • Importation de démo en un clic + importation des paramètres de thème (options.json) + fichier de widgets
  • Cette documentation complète (installation, importation de démo, paramètres du thème, palette, système de logo, héros/ignition, SEO, blog, pied de page, formulaires, menus)
  • Invitations de bundles de plugins requis (Elementor, ACF Pro, Contact Form 7, One Click Demo Import)
  • Mises à jour à vie et support convivial

Parfait pour

Agences IA et startups IA · studios de machine-learning et de data-science · entreprises SaaS et logiciels · services technologiques et IT · cloud, DevOps et ingénierie de plateformes · entreprises de cybersécurité · web3 / fintech / deep-tech · studios de produits numériques · laboratoires d’innovation · agences créatives-tech et de design · startups en levée de fonds ou en lancement · portfolios pour ingénieurs, fondateurs et studios.

Exigences

  • WordPress 6.0+
  • PHP 8.0+ (8.1+ recommandé)
  • MySQL 5.7+ / MariaDB 10.3+
  • Minimum 256 Mo de mémoire (512 Mo recommandé)
  • Un navigateur moderne compatible WebGL pour une expérience complète (sinon, rétrogradation gracieuse)