GSS - GPU Style Sheets

Selectors, the cascade and @keyframes, compiled into a single raymarching shader.

Visit website

FreeCodeLanguageDesign1 impressionslaunches Jun 111 comment

>log in to comment

Lucas Bonomi[maker]· 29d ago
I built GSS to let developers write 3D scenes using familiar CSS syntax—selectors, cascade, and @keyframes—then compile everything into a single ray‑marching shader. It works without Three.js or meshes, and you can use it via npm, a Vite plugin, or a CDN. I'd love your feedback on the API and docs.

Selectors, the cascade and @keyframes, compiled into a single raymarching shader. The 3D language designers and AIs already speak. Selectors, the cascade and @keyframes, compiled into a single raymarching shader. No Three.js. No meshes. Just CSS you already know. Style a thousand objects with one selector. The cascade decides, like on a web page. The compiler writes the GLSL: the whole scene becomes one fragment shader, raymarched on the GPU. Every model knows CSS by heart. It writes the style sheet; the compiler writes the shader.

Code Language Design

More Code tools →74 free dev tools →

GSS compiles CSS-like selectors, cascade and @keyframes into a single GPU raymarching shader.

for: Web developers and graphics programmers who want CSS styling for 3D GPU scenes.
pricing: open source
license: Apache-2.0

LukyVj/GSS 125 6TypeScriptupdated 11 days ago

v0.0.6GSS 0.0.6a month ago

works withnpmTypeScriptVite

Key features

8 features of GSS - GPU Style Sheets

CSS-style selectors — Style thousands of objects with a single selector using familiar CSS syntax.
Cascade handling — The cascade resolves conflicts just like on a web page.
Single fragment shader output — The compiler emits one GLSL fragment shader that ray-marches the whole scene.
Keyframe animations — Define @keyframes in GSS to animate properties over time.
NPM package with TypeScript types — Install via npm and integrate GSS directly into Node/TS projects.
Vite plugin — Import .gss files in Vite builds and ship the compiled runtime automatically.
CDN embed — Load the library from a CDN and use <gss-scene> tags in plain HTML.
Live playground — Interactive playground to experiment with GSS code and see the shader instantly.

Use cases

Apply consistent styling to large 3D scenes without writing manual GLSL.
Create CSS-driven animations for GPU-rendered objects.
Prototype 3D visualizations quickly using familiar web styling syntax.
Integrate shader generation into a Vite-based web app with zero build steps.

GSS - GPU Style Sheets vs alternatives

all alternatives →

	GSS - GPU Style Sheets	Bun	Deno	Gitea	Penpot
Best for	CSS-based GPU shader generation	Fast JavaScript runtime	Secure JS/TS runtime	Self-hosted Git hosting	Open-source UI design
Pricing	Open source	Free	Free	Free	Free
DevHunt upvotes	1	0	0	0	0
Launched	Jun 2030	—	—	—	—

GSS - GPU Style Sheets vs Bun: Bun is a JavaScript runtime, not a CSS-to-shader compiler.
GSS - GPU Style Sheets vs Deno: Deno provides a secure runtime for JS/TS, unrelated to GPU shader generation.
GSS - GPU Style Sheets vs Gitea: Gitea is a self-hosted Git service, not a graphics styling tool.
GSS - GPU Style Sheets vs Penpot: Penpot is a design/prototyping platform, not a code-level shader language.