Origo — Desde un Solo Punto | Tema WordPress Cinematográfico para Agencias IA y Tecnología

Un tema WordPress de origen único, impulsado por WebGL, para estudios de IA, empresas tecnológicas, equipos de software y plataformas, y marcas creativas-tech ambiciosas. Un vuelo continuo a través de un campo de luz vivo — desde un solo punto, hacia el exterior a través de cada dimensión, de vuelta a la fuente.

Por qué Origo es diferente

La mayoría de los temas tecnológicos son una cuadrícula de tarjetas con un héroe de archivo. Origo es una experiencia. Todo el sitio está construido sobre una idea — todo comienza en un solo punto de luz — y esa idea se representa en vivo: un campo de profundidad volumétrico persistente se ejecuta en WebGL detrás de cada página, el sitio se abre con una ignición cinematográfica El Primer Punto, y cada sección se resuelve desde la oscuridad con un movimiento de desplazamiento personalizado y reversible. No es un reskin de una plantilla; es un mundo coherente, digno de premio, que le dice a su visitante, instantáneamente y sin palabras, que su estudio construye el futuro desde primeros principios.

Si quiere un sitio web que se sienta más como una película de lanzamiento de producto que como un folleto, Origo está construido para usted.

Aspectos Destacados

  • 🌌 Campo de profundidad WebGL en vivo — un verdadero universo de partículas Three.js con bokeh de profundidad de campo, bloom, aberración cromática y grano de película, renderizado detrás de todo el sitio (no es un video, no es una imagen de fondo).
  • ✨ Introducción cinematográfica El Primer Punto — un solo punto se enciende en el vacío, el campo crece hacia afuera, la marca se resuelve y la cámara fluye sin problemas hacia el héroe sin corte brusco.
  • 🎛️ Motor dinámico de un interruptor — cambie un color en la Configuración del Tema y al instante vuelve a diseñar cada regla CSS y cada shader WebGL, porque la escena 3D lee las mismas variables CSS que sus estilos.
  • 🟠 Paleta First Light — una identidad característica ámbar-cálido → índigo-frío, totalmente editable.
  • 🧩 Elementor + ACF Pro — widgets personalizados, orientados al contenido; contenido ilimitado y totalmente editable.
  • 🔎 SEO integrado — datos estructurados JSON-LD automáticos, etiquetas meta, Open Graph y Twitter Cards. No se necesita plugin SEO.
  • ⚡ Orientado al rendimiento y accesible — un solo bucle de animación compartido, pausa fuera de pantalla y soporte completo de (prefers-reduced-motion).
  • 📱 Totalmente responsive — la experiencia cinematográfica se adapta limpiamente desde ultrawide hasta móvil.
  • 🖼️ Sistema de logotipo inteligente — marca animada integrada por defecto; suba su propio SVG o PNG para anular en todo el sitio (cargas SVG habilitadas y saneadas).

El Concepto (el escenario)

Origo trata a su visitante como un viajero. El viaje es un vuelo ininterrumpido:

  1. El Primer Punto — el sitio se enciende desde un único origen luminoso.
  2. Llegada — una invitación asimétrica suspendida en un meridiano vertical de luz.
  3. Cómo Empieza Todo — su historia contada como emergencia: el orden formándose desde una fuente a lo largo de un enrejado horizontal de luz.
  4. Las Dimensiones — sus capacidades, cada una en su propia longitud de onda, refractándose desde el origen.
  5. Los Arquitectos — su equipo, retratos resolviéndose desde la luz.
  6. Lo que la Luz Ha Tocado — testimonios como registros de luz.
  7. Lo que el Origen Ha Medido — sus métricas, en cifras de conteo claras.
  8. Abrir el Canal — un haz se extiende; la invitación a comenzar.
  9. Retorno a la Fuente — un pie de página de despedida tranquilo. El punto permanece.

Cada estación es estructuralmente original y se anima al desplazarse — y se invierte con gracia cuando se desplaza hacia arriba.

El Campo de Profundidad Vivo (el motor)

El corazón de Origo es una única escena Three.js (r144) WebGL persistente que todas las páginas comparten:

  • Túnel infinito en el shader — campo de estrellas/partículas infinito y permanente mediante mosaico z GLSL (mod).
  • Bokeh de profundidad de campo por punto — las partículas desenfocadas florecen en discos suaves; la banda de enfoque se desplaza con el desplazamiento, por lo que el campo se lee como estratos diseñados, no como un salvapantallas.
  • Post-procesamiento personalizado — bloom + aberración cromática + grano de película + viñeta + tono, todo ajustado para un look premium y cinematográfico.
  • Cámara reactiva al desplazamiento — el campo viaja hacia adentro a medida que se desplaza hacia abajo en la página.
  • Color desde variables CSS — toda la escena se rediseña al instante cuando cambia su paleta.
  • Primero el rendimiento — limitado por DPR, pausado cuando la pestaña está oculta, un solo ticker (requestAnimationFrame) compartido para el campo, el cursor de apertura y todas las escenas de sección; una superposición (?ogfps=1) para diagnósticos.
  • Retroceso elegante — si WebGL no está disponible o se solicita movimiento reducido, el campo se convierte en un fondo quieto y tranquilo y el contenido permanece perfectamente legible.

Un cursor de apertura/lente personalizado completa el mundo, reaccionando y refractándose a medida que se mueve (y se desactiva automáticamente en táctil y para movimiento reducido).

Movimiento de Nivel Premiun

Construido sobre GSAP + ScrollTrigger y cooperando con el desplazamiento suave de Lenis, Origo incluye animaciones signature por sección que son todas reversibles (se reproducen al bajar y se invierten al subir):

  • Revelaciones de títulos palabra por palabra que se resuelven desde el desenfoque y la luz
  • Barridos de longitud de onda por clip-path, bloques que vuelan desde la profundidad, líneas de luz dibujadas con chispas viajeras
  • Retratos que se resuelven desde el desenfoque al enfoque con un bloom de halo
  • Un focus-pull en las imágenes a medida que entran en el viewport

Se siente vivo sin sentirse nunca ocupado — tranquilo, expansivo, exacto.

Las Seis Dimensiones (sus servicios)

Origo presenta sus servicios como Dimensiones que se despliegan desde el único origen, con páginas de detalle dedicadas y completamente construidas:

Estructura · Inteligencia · Percepción · Profundidad · Escala · Protección

Cada dimensión tiene su propia página (con slugs limpios y personalizables como (/structure/), (/intelligence/)…), sus propias imágenes cinematográficas, texto profesional, marcas destacadas y una barra lateral correspondiente — todo editable. Una cuadrícula Dimensions Roster dedicada y un widget Secuencia (proceso) numerado completan la capa de servicios.

Transmisiones (el blog)

El diario renace como Transmisiones — un flujo de señales desde el origen:

  • Un flujo de tarjetas premium (archivo, categoría, etiqueta, búsqueda) con miniaturas enmarcadas y anillos de enfoque
  • Una vista de lectura de despacho limpia para publicaciones individuales con relevo social y respuestas
  • Una escena de estado 404 — El Punto Sin Forma renacida
  • Control total sobre títulos, fechas, categorías, etiquetas, extractos, vistas, comentarios y barra lateral a través de la Configuración del Tema

El Motor Dinámico — cambie una vez, rediseñe todo

Origo está impulsado por una única fuente de verdad:

Configuración del Tema → propiedades personalizadas CSS (:root) → cada regla CSS Y cada shader WebGL

Cambie un color de acento y actualiza instantáneamente botones, degradados, bordes y el campo de profundidad, el núcleo de origen, el cursor y la luz del encabezado de la página — porque nada está codificado. Esto es lo que hace que Origo sea genuinamente personalizable, no solo configurable.

Paleta First Light y tipografía

  • Origen (acento ámbar), Origen Caliente (ámbar más profundo / CTA), Luz (blanco roto cálido), Vacío / Capas Cercanas (fondos profundos), Profundidad Fría (índigo de la distancia), Texto Cálido.
  • Fuentes: Clash Display (display) + General Sans (cuerpo) a través de Fontshare, con Space Mono para etiquetas técnicas — todas editables (familia, tamaño, peso).

Sistema de Logotipo Inteligente (SVG e Imagen)

Un modelo de logotipo limpio y comercializable que sus clientes entenderán al instante:

  • Vacío por defecto → el sitio muestra la marca Origo animada y diseñada, por lo que el sitio y la Configuración del Tema siempre coinciden.
  • Subir para anular → cargue su propio logotipo y se renderiza como un bloque completo en todo el sitio, en un tamaño natural.
  • SVG compatible — las cargas SVG están habilitadas (y saneadas) para administradores; PNG/JPG también funcionan. Sin rutas de archivo, sin código.
  • Favicon — viene listo y se puede reemplazar fácilmente.

SEO Integrado (no se necesita plugin)

Origo genera SEO limpio y automático desde su Configuración del Tema:

  • Datos estructurados JSON-LD — Esquema Organization / ProfessionalService, WebSite y BlogPosting
  • Meta título, descripción y palabras clave según el panel SEO
  • Etiquetas Open Graph y Twitter Card con una imagen de uso compartido por defecto
  • Marcado semántico, rápido y accesible con encabezados adecuados e imágenes de carga diferida

Combínelo con su plugin SEO favorito si lo desea — o funcione de manera ligera con la salida integrada.

Construcción de Páginas — Elementor + ACF Pro

  • Elementor: widgets Origo personalizados y orientados al contenido (héroe Llegada, Cómo Empieza Todo, Las Dimensiones, Los Principios, Detalle del Servicio, La Secuencia, Los Arquitectos, Métricas, Testimonios, FAQ, Abrir el Canal, Captación de Proyectos, Galería, Marcas y más).
  • ACF Pro: cada página es un diseño editable con pestañas y contenido ilimitado y repetible — no se necesita desarrollador.
  • Conjunto de iconos Origo personalizado: una biblioteca de iconos de línea SVG integrada (Estructura, Inteligencia, Percepción, Profundidad, Escala, Protección, Red, Apertura, Capas, Teléfono, Correo, Soporte, Ubicación, Calendario, Flecha, Chispa de origen) que se traza con su color de acento, disponible en la parte superior de cada selector de iconos.
  • Contact Form 7: todos los formularios de popup, contacto, canal y captación de proyectos (reservas) — automáticamente estilizados con la paleta Origo.

Encabezado, Menú, Pie de Página y Estados

  • El encabezado Horizon — una línea de luz que lleva la marca, una banda borrosa adhesiva y una sola apertura que abre el menú superpuesto inmersivo EL CAMPO COMPLETO.
  • Menú dual — menús de escritorio (Superior) y móviles separados; la superposición inmersiva se desplaza limpiamente en cualquier tamaño.
  • Pie de página Retorno a la Fuente — una despedida tranquila, un mapa de nodos global, un directorio de enlaces editable, una columna de contacto y lecturas de telemetría en vivo.
  • Estados 404, búsqueda y listado renacidos — cada pantalla en línea con la marca.

Qué está incluido

  • El tema Origo completo (origo.zip)
  • Importación de demostración con un clic + importación de configuración del tema (options.json) + archivo de widgets
  • Esta documentación completa (instalación, importación de demostración, Configuración del Tema, paleta, sistema de logotipo, héroe/ignición, SEO, blog, pie de página, formularios, menús)
  • Indicaciones de paquetes de plugins requeridos (Elementor, ACF Pro, Contact Form 7, One Click Demo Import)
  • Actualizaciones de por vida y soporte amigable

Perfecto para

Agencias de IA y startups de IA · estudios de machine-learning y data-science · empresas SaaS y de software · servicios tecnológicos y IT · cloud, DevOps e ingeniería de plataformas · empresas de ciberseguridad · web3 / fintech / deep-tech · estudios de productos digitales · laboratorios de innovación · agencias creativas-tech y de diseño · startups en financiación o lanzamiento · portafolios para ingenieros, fundadores y estudios.

Requisitos

  • WordPress 6.0+
  • PHP 8.0+ (8.1+ recomendado)
  • MySQL 5.7+ / MariaDB 10.3+
  • 256 MB de memoria mínimo (512 MB recomendado)
  • Un navegador moderno compatible con WebGL para la experiencia completa (de lo contrario, retroceso elegante)