{} / showcase

Showcase

What you can make with GSS.

Studies, and real uses for designers, creative coders and developers. Every scene on this page is live: drag it, hover it, open it in the playground. And every use case is embedded with <gss-scene>, the same tag you can put on your own site.

01Studies

Eight longer scenes, one at a time: motion paths, carved geometry, gradients, two Zdog models rebuilt, a camera cut open, the film that announces 0.0.5. Each one opens in the playground.

STUDY 01 / MOTION PATHS

Glass Circuit.

A miniature railway in motion. A locomotive, two coaches, a tiny station.

  • offset-path
  • offset-rotate
  • glass
  • animation-delay
open in the playground →
preparing the study… follow the train · drag to orbit

02For designers

Your logo, your icons, your tokens: the things you already draw in 2D, in 3D, written like a stylesheet.

Your SVG logo, in 3D

Paste the d attribute of your logo into path(): the same drawing becomes a tube you can light, turn and animate. No modelling tool, no export.

#brace-left {
  d: path("M12.5 4.5C9.5 4.5 9 6 9 8.5v4…");
  view-box: 0 0 32 32;
  stroke-width: 2.4;
}

open in playground ↗usespathdprism@keyframes

A 3D icon set, themed like a design system

One stylesheet for the whole set. Change --accent or --finish and every icon follows, like tokens in a design system.

scene {
  --accent: #ff5a36;
  --finish: jelly(0.55);
}

.icon {
  color: var(--accent);
  material: var(--finish);
}

open in playground ↗usesvar()material:hover

03For creative coders

Rules instead of loops, and a readable way into the shader: every scene becomes GLSL you can read, and export.

Generative loops, without a loop

* 36 makes 36 objects; sibling-index() gives each its own angle, height and hue. The rule is the algorithm.

.bead {
  --i: sibling-index();
  translate: calc(-1 * cos(var(--i) * 30deg) * var(--r))
             calc(var(--i) * 0.09)
             calc(sin(var(--i) * 30deg) * var(--r));
  color: hsl(calc(var(--i) * 10) 85% 60%);
}

open in playground ↗usessibling-index()calc()sin(), cos()hsl()

Sketch in GSS, publish on Shadertoy

The playground turns any scene into a shader Shadertoy runs as is. Start in CSS, then keep going in GLSL: the GLSL tab shows every line GSS wrote.

#ring {
  material: gold;
  animation: tumble 7s linear;
}

@keyframes tumble {
  to { rotate-x: 1turn; rotate-z: -0.5turn; }
}

open in playground ↗usesmaterialanimation@keyframes

04For developers

A 3D scene is a stylesheet: small enough to ship, simple enough for an LLM to write.

An interactive hero, without Three.js

Compile the scene at build time with the Vite plugin: the page ships a 10 kB runtime and one shader. :hover works out of the box.

import { mount } from "gss-lang/runtime";
import hero from "./hero.gss"; // compiled by gss-lang/vite

mount(document.querySelector("canvas"), hero);

open in playground ↗uses:hoversibling-index()capsule

3D that an LLM writes well

Every LLM already knows CSS by heart, so it writes GSS without any training; the compiler writes the GLSL. This scene came from a one-line prompt.

<script type="module" src="https://www.gss-lang.dev/embed.js"></script>

<gss-scene>
  <script type="text/gss">
    /* what the model wrote */
  </script>
</gss-scene>

open in playground ↗usesgroupconecylinder

05On your site

Three ways to put a scene on a page, from a tag you paste to a build step that keeps the compiler out of the page.

A tagCDN · v0.0.5 · no build step
<script type="module" src="https://cdn.jsdelivr.net/npm/gss-lang@0.0.5/lib/embed.js"></script>

<gss-scene src="logo.gss"></gss-scene>
<gss-scene controls="none">
  <script type="text/gss"> @scene { sphere; } </script>
</gss-scene>
A functionnpm install gss-lang@0.0.5
import { mount } from "gss-lang";

const scene = mount(canvas, "@scene { sphere; }");
scene.update(otherSource);
scene.destroy();
A build stepgss-lang@0.0.5 · compiled with Vite
// vite.config.ts
import gss from "gss-lang/vite";
export default { plugins: [gss()] };

// main.ts: the compiler stays out of the page
import { mount } from "gss-lang/runtime";
import logo from "./logo.gss";
mount(canvas, logo);

noteA scene paints its whole canvas, and a transparent object shows the scene behind it, not the page: give the scene the background of your page. A browser keeps about 16 WebGL contexts; a scene only starts when it comes into view, and sleeps when it leaves it.

06Inspiration

Scenes to start from. Each one opens in the playground, where you can change it and share it with a link.