GPU-DRIVEN ENERGETIC RUNTIME

Keep the web.
Give it a GPU runtime.

Quetzalcoatl Core keeps HTML and CSS at the foundation while Rust/WASM resolves a shared energetic runtime and WebGL2 materializes its visual response through the GPU.

Not preset animations.
Runtime-resolved behavior.

Experience the Rocio Effect$npm install quetzalcoatl-core
OPEN SOURCE · APACHE 2.0HTML / CSS · RUST / WASM · WEBGL2
WHY QUETZALCÓATL CORE

The web keeps getting richer.
Its rendering model shouldn't get heavier with it.

THE PROBLEM

Modern interfaces keep becoming more visual, interactive and computationally demanding.

The usual response is to add more JavaScript, more animation logic and more layers that coordinate visual behavior element by element.

A DIFFERENT APPROACH

Keep the web.
Use the GPU.

HTML

Structure, semantics and content.

CSS

The visual source of truth.

RUST / WASM

Runtime state, energy and relationships.

WEBGL2

GPU materialization of the visual response.

ONE VISUAL SOURCE OF TRUTH

Your CSS describes how it looks.
Quetzalcóatl Core resolves how it responds.

THE CORE

From the DOM
to a resolved world.

Quetzalcóatl Core keeps the web as its foundation, maps interface elements into runtime entities, resolves their behavior in Rust/WASM and materializes the visual result through WebGL2.

INTERACTIONPointer · Geometry · State
RAY
A
SEMANTIC PLANE

DOM

HTMLCSSSemanticsNative events

The DOM defines the plane.

B
RUNTIME MODEL

Universe

NahualesEnergyRelationshipsRust / WASM

The Universe defines the space.

C
RESOLVED RESPONSE

Field

AttractionRepulsionResonanceOscillation

Nahuales respond through their relationships.

D
GPU MANIFESTATION

Crystal

WebGL2SurfacesGeometryDisplacement

The Crystal reveals the result.

DOMUNIVERSERESPONSECRYSTAL
Explore the Architecture Spec
CORE PRINCIPLE

The DOM defines the plane.
The Universe defines the space.
Rays perturb the field.
Nahuales respond through their relationships.
The Crystal reveals the result.

THE ROCIO EFFECT

Move through the field.
Everything responds.

This is not a preset animation.The field changes. Nahuales respond.
MOVE YOUR POINTER THROUGH THE FIELD
INTENSITY0.90
subtlefull
04 / ARCHITECTURE

From markup
to manifestation.

Quetzalcoatl Core keeps the web as its semantic plane, builds a runtime world from it, resolves that world in Rust/WASM and materializes the result through the GPU.

RUNTIME PIPELINESTRUCTURE → WORLD → RESPONSE
01SEMANTIC PLANE
DOMStructure · CSS · Geometry
02DISCOVERY
DOM MAPPEREligibility · Styles · Bounds
03RUNTIME ENTITY
NAHUALIdentity · Energy · State
04RELATIONAL SPACE
UNIVERSEHierarchy · Links · Shared field
08MATERIALIZATION
WEBGL2GPU · Surfaces · Viewport
07PROJECTION
CRYSTALGeometry · State · Displacement
06RESOLUTION
RUST / WASMEnergy · Coupling · Motion
05PERTURBATION
RAYSPointer · Geometry · Interaction
OUTPUTGPU-DRIVEN MANIFESTATION

JavaScript communicates intent and state.
Rust resolves the model.
The GPU materializes the result.

PLANEDOM
ENTITYNAHUAL
WORLDUNIVERSE
RESOLUTIONWASM
PROJECTIONCRYSTAL
05 / QUICK START

Enter the
Universe.

Quetzalcoatl Core works with Vanilla JavaScript, React and Next.js. Keep the web you already have and add the runtime layer on top.

INSTALL
$npm install quetzalcoatl-core
WORKS WITH
VANILLA JSREACTNEXT.JS
01
WRAP YOUR APPREACT / NEXT.JS
import {
    Quetzalcoatl
} from "quetzalcoatl-core/react";

export default function App() {
    return (
        <Quetzalcoatl>
            <main>
                <Interface />
            </main>
        </Quetzalcoatl>
    );
}
02
MANIFEST ROCIODECLARATIVE
export function Card() {
    return (
        <article rocio>
            <h2>
                Runtime resolved
            </h2>
        </article>
    );
}
NORMALRuntime participation<div />
ROCIOVisible manifestation<div rocio />
NOQCBrowser-native boundary<div noqc />