Style sheetsfor the GPU.

GPU Style Sheets

Style sheets

Selectors, the cascade and `@keyframes`, compiled into a single raymarching shader. No Three.js. No meshes. Just CSS you already know.

open the playground → read the docs

d = 0.4 0.8 1.6

01

Rules, not loops

Style a thousand objects with one selector. The cascade decides, like on a web page.

@scene { cube.corner * 4; }
.corner { color: #ff5a36; }

02

One shader

The compiler writes the GLSL: the whole scene becomes one fragment shader, raymarched on the GPU.

// GSS → AST → cascade → GLSL
vec2 map(vec3 p) { … }

03

LLMs already speak it

Every model knows CSS by heart. It writes the style sheet; the compiler writes the shader.

#dot {
  material: jelly(0.6);
}

loading drag to orbit · scroll to zoom

12shapes 52properties 19selectors

1shader

Install · v0.0.5

npm package

Compile and render GSS in your application, with TypeScript types included.

npm install [email protected]

package setup →

Build time

Vite plugin

Included in gss-lang. Import .gss files and ship the runtime with the compiled scene.

import gss from "gss-lang/vite";

Vite setup →

No build step

CDN

Load the versioned browser module, then add a <gss-scene> to your page.

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/embed.js"></script>

CDN setup →