GSS 0.0.6

Added

• Docs: a second element() example — a <canvas> and its one-line WebGL shader inside the element, captured frame after frame on the face of the cube. The docs now say a canvas inside the element is captured with it.
• outline: a line around the silhouette of an object, like CSS: outline: 0.03 solid #111; for a drawn look, or an outline that appears on :hover. Its width and outline-offset are in the units of the scene, so the line gets thinner far away, like the object. Every style of CSS: solid, dashed, dotted, double, groove, ridge, inset and outset. Its color is the object's own by default, and width, color and offset can be animated.
• In the playground and in Try it, @media reads the size of the render, like the result of CodePen: make the render narrower to see a max-width query apply. On a page, it still reads the window, like CSS.
• display: none leaves an object, or a whole group, out of the scene, and turns a light off; with @media, a phone can draw fewer objects. It still counts for :nth-child().
• visibility: hidden hides an object: not drawn, no shadow, and the mouse goes through it. Like CSS, a group passes it to its objects, and it can change on :hover and in @keyframes, for a blinking light or an object shown by hovering another.
• cursor: pointer, grab, grabbing and the other cursors of CSS: the mouse pointer over an object, also in :hover and :active rules (cube:active { cursor: grabbing; }).
• animation-range, animation-range-start and animation-range-end: the part of a scroll timeline the animation plays on, like CSS: animation-range: entry plays while the scene comes into view, entry 50% exit 50% from half in to half out, and 25% 75% on the middle of the scroll.
• filter: vignette() and chromatic-aberration() on the scene: darker corners, and red and blue that split towards the edges, like a lens.
• material: iridescent(): a thin film, like a soap bubble or the back of a CD, whose colors turn with the angle you see it at. emissive and iridescent also work as keywords, like jelly and glass.
• checker() and stripes(): a checkerboard and bands of two colors, wherever a gradient goes (color, a material, background, floor). Like noise(), they are cut in the object's own space, with no seam, and can be animated: stripes(4 at 0 -0.25 0, …) in a @keyframes makes the bands scroll.
• Three shapes: pyramid, on a square base and sized by size like a cube; octahedron, eight triangles, sized by radius; and tube, a hollow cylinder, with an outer radius, a height and the thickness of its wall.
• material: emissive(): a surface that gives its own light, a lamp, a screen or a neon, from a strength of 0 to 4. With bloom() in the scene's filter, it glows.
• material: copper, silver, brass and aluminum: four more metals, ready to use like gold and chrome.
• @paint and texture: paint(name) (WebGL2 only, for now): a texture drawn by a fragment shader, the way CSS paint() draws an image from code. The block of @paint rings { … } is GLSL, written as it is for the web: out vec4 color; or gl_FragColor, with time, resolution and mouse filled by GSS (u_time, u_resolution, u_mouse too). It is drawn into a 512 × 512 texture, again at every frame when it reads time, once otherwise, and the object shows it like an image. An error in its GLSL names the @paint and its line. Its GLSL is not translated for WebGPU: a scene with paint() is drawn with WebGL2, which <gss-scene>, mountAsync() and the playground pick by themselves; on WebGPU, the object keeps its color. The playground, the docs and the VS Code extension color the block as GLSL, and the formatter keeps it as written.
• scene { shape-rendering: geometricPrecision; } smooths the silhouettes of the objects: a pixel that the edge of an object only partly covers blends the object with what is behind it. It takes about 15 % more work from the graphics card for now, so it is off by default: auto draws the sharp edges of before, unchanged.
• VS Code / Cursor extension: HTML snippets for both documented <gss-scene> forms, a scene loaded from a .gss file and an inline <script type="text/gss"> scene.
• Docs: every page says the version that added it, beside its title: since v0.0.3.
• Docs: the contents mark the pages of the latest version with new in v0.0.5, and their group with a dot, so a folded group says it holds something new.
• GSS is open source on GitHub: github.com/LukyVj/GSS. The site links to it from its top bars and footers, the docs at the top of Installation, and the package and the VS Code extension declare it, so npm and the extension registries link to the code and the issues.
• Computers without a graphics card: the processor would draw a scene so slowly that the page could freeze, so the scene waits for a click. <gss-scene> shows its poster and a button, "Draw it anyway"; the site does the same on the home page, in the playground and in Try it, where the code still shows. softwareRendering(), from gss-lang and gss-lang/runtime, tells a page that uses mount().
• <gss-scene poster="cover.jpg">: an image shown until the scene draws, like the poster of a <video>.
• A scene too heavy for the computer stops instead of freezing the page: after a second or two of frozen frames at its lowest density, it stops drawing, <gss-scene> and the site show "Draw it anyway", and mount() fires a gss-too-heavy event on the canvas, where scene.play() draws it anyway.
• mount(canvas, scene, { adaptDpr: false }): the dpr as written, never lowered and never stopped, for a capture or a benchmark.
• Showcase: an eighth study, the GSS 0.0.5 announcement. A 30-second film written as one stylesheet: "css" types itself and turns into "gss.", the braces close the rule, then eight features take the stage one after the other. It opens in the playground, in the "Studies" group.
• An animation in a :hover or :active rule starts with the state and plays to its end, like a button that fires: the pointer can leave, the button can go up, the animation goes on, once unless it says how many times; the state stays on until it ends, or for good with forwards, and the next press plays it again. cube:active { animation: topple 0.8s forwards; }.
• Showcase: "Le Chonk", a pixel 4 in the inspiration grid. A prism from a staircase contour, pixelated tiles from a texture; a click tips it over to the left, then on its back, with an animation started by :active.
• Showcase: the Utah teapot joins the inspiration grid. A lathe body and lid, a cone spout and a path handle melted into the body; hover lifts the lid, a click sends the teapot over a speed bump, with linear() transitions that overshoot and settle.
• Showcase: the Product Hunt mark in 3D joins the inspiration grid. An orange coin with the P of the flat logo pushed out of it, its d pasted into path(); no sun, two lights sweep the stage and the coin floats over its own shadows.
• Showcase: a room lit by one shaft of sun, after Maxime Heckel's global illumination study, closes the inspiration grid. The sun comes in low through a window out of view and lands on the wall behind an orange ball; a warm light makes the ball glow on the floor, a cool one stands for the sky.
• GSS is on X: @GSS_lang, for news, scenes, questions and ideas. The site links to it from its top bars and footers, with a contact line in every footer (X for questions, GitHub for issues), the docs say so at the top of Installation, and a link shared on X attributes the card to the account. In the playground, once the share link is copied, the status bar offers to post it on X, with the account mentioned.
• Docs search: once a word is typed, the right column shows the page of the selected result, by the pointer or the arrows: its sentence, its syntax and an example (the one the result lands on), with a link to open it. With an empty box, the four drawings come back.
• Docs search: the columns on each side of the results can be widened or narrowed, by dragging the line between them or with the arrow keys, and the search keeps the widths for next time. Each column arranges itself for its width: the contents show the icon of each group once there is room, and a wide right column puts each drawing beside its text.
• Docs search: "Try it" on the example of a preview. The search slides to the left and the example opens live beside it, code and render, to edit without leaving the results; "Close" brings the search back. On a screen too narrow for both, it opens the example in the playground, in a new tab.
• Docs: "Editor support", at the end of Installation. The GSS extension for VS Code (highlighting, formatting, the .gss file icon) is on the Visual Studio Marketplace, and on Open VSX for Cursor, VSCodium and Windsurf: search for GSS in the Extensions view, or run code --install-extension lukyvj.gss-language.
• Docs: "Editor support" opens on a square button that holds the marks of VS Code and Cursor like letters in a pocket; on hover they come out, one after the other. It leads to the extension, with a line on what it does and where Cursor installs it.

Changed

• A smaller package: a page that compiles GSS downloads 87 kB gzipped instead of 130, <gss-scene> from jsDelivr 89 instead of 113, and a scene compiled at build time 12 instead of 16. The compiler no longer carries the documentation, lib/ is minified, and gss-lang/embed shares its files with gss-lang instead of holding its own copy: the npm package goes from 263 to 114 kB.
• A scene drawn with WebGL2 no longer freezes the page while it compiles. On Windows, the graphics driver can take seconds to prepare a large scene; the page now goes on in the meantime, the scene before it stays on screen, and <gss-scene> keep...