Glass and glow
Frosted glass that blurs and bends what is behind it, and neon light that adds up to white, from the pixi-silk/glass and pixi-silk/glow entry points.
Updated pixi-silk 1.0.1View as Markdown
pixi-silk/glass draws panes of frosted glass over your scene. pixi-silk/glow stacks blurred
passes of one shape into neon light. Both are separate entry points, not part of the root import.
import { Text } from 'pixi.js';
import { Glass } from 'pixi-silk/glass';
const card = new Glass({ width: 300, height: 190, radius: 34, blur: 18, refraction: 16, dispersion: 0.4 });
card.content.addChild(new Text({ text: 'Frosted', style: { fill: 0xffffff } }));
card.set({ lightAngle: -Math.PI / 4, grain: 0.05 });
app.stage.addChild(card); // after the scene it frostsThe pane reads whatever is drawn behind it, blurs it and bends it along the curved rim. Labels and
icons go in card.content, which draws on top of the glass and stays sharp. set() changes
options later.
Glass options#
| Option | Default | What it does |
|---|---|---|
width, height | 240, 160 | Pane size. The top-left corner is at (0, 0). |
radius | 28 | Corner radius |
smoothing | 0.6 | Squircle corners, 0 (circular) to 1 |
blur | 18 | Backdrop blur radius |
refraction | 14 | How far the rim bends the backdrop. Negative bends inwards. |
dispersion | 0.35 | Colour split at the rim, 0 to 1 |
bevel | 22 | Width of the curved rim |
frost | 0.06 | Milky whitening, 0 to 1 |
saturation | 1.2 | Colour boost of what shows through |
tint, tintAmount | white, 0.04 | Coloured glass |
opacity | 1 | Overall opacity |
lightAngle, light | top left, 0.8 | Where the sheen comes from, in radians, and how bright it is |
grain | 0.035 | Film grain |
shadow | 0.3 | Soft shadow under the pane. 0 turns it off. |
Where glass stops#
The pane needs the canvas behind it. On WebGL, Glass turns on the renderer’s back buffer the
first time it draws, so the first frame shows a plain pane. Pass useBackBuffer: true to
createSilkApp to have glass from the first frame. WebGPU reads the backdrop without a back
buffer. On any other renderer the pane draws a plain frosted fill.
Add the pane after the scene it frosts, since it only sees what is already drawn. You can rotate and scale it. Under an uneven scale, the corners stay round with the radius of the smaller scale. The light stays fixed on screen. Skew is not supported, and the pane keeps its unskewed shape.
Make neon with Glow#
import { bolt, Glow, neon } from 'pixi-silk/glow';
const spark = new Glow({
draw: (g) => bolt(g, -50, -70, 100, 140),
layers: neon(0xffd60a, { size: 100 }),
});Glow draws one shape several times, once per layer, each with its own fill, stroke, blend and
offset. neon() returns the five-layer recipe for a shape about size wide. Two blooms go behind
it. The core has a gradient, coloured drop glows and a pale inner shadow. A white copy added on top
burns the middle out, and a blurred white outline finishes it.
neon() option | Default | What it does |
|---|---|---|
size | 100 | Rough size of the shape. Every blur scales with it. |
intensity | 1 | Strength of the bloom, 0 to about 2 |
core | a radial gradient | Paint of the solid core |
surface | 'dark' | On 'light' surfaces the passes paint normally, since added light would vanish on white |
bolt() and drop() add ready outlines. Any path works in draw, because a fill treats a path
as one shape.
Light that adds up#
Light does not cover what is under it, it adds to it. Set blendMode = 'add' on a graphics, or
blend: 'add' on one fill, and overlapping glows burn towards white. Figma calls this Plus
lighter. With a blur on the fill, a soft light is one ellipse.
The border of this button is an open path. Its head leaves a gap with a star of light in it.
Each icon is a large shape clipped by its tile. Its blur grows from the lit edge to the far side, and an inner shadow pushed away from the light leaves a bright rim.
Aurora rises light in three colours from the bottom of a box and drifts slowly. ray(), fan()
and spectrum() build beams and prisms. The Showcase has the full scenes made
with them.