{}gss
GPU Style Sheets

Style sheets
for the GPU.

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);
}
Live

Edit it. It compiles as you type.

open in the playground →
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 gss-lang@0.0.5
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/gss-lang@0.0.5/lib/embed.js"></script>
CDN setup →