Shape / SDF Effects

Several components — such as Glass, Neon, and Emboss — are driven by a shape. These effects accept a shape prop that describes which shape to use and how it should be configured. They use what is called an "SDF" (or "signed distance field") texture to render the shape. An SDF is a mathematical representation of a shape that determines the distance from any pixel to the shape's boundary.

The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.

Shapes come in two flavours: flat 2D profiles (circles, stars, rounded rectangles, …) and true 3D primitives (spheres, cubes, toruses, …) that are raymarched into the field, so effects like Glass and Crystal refract through real volume and curvature. You can also extrude your own SVG into a solid 3D slab.

Configuration

The shape prop accepts a configuration object. The only required key is type, which selects one of the built-in shapes, like circleSDF or sphere3D. Everything else is shape-specific and optional (sensible defaults apply).

<!-- Circle (default) -->
<Glass :shape='{ type: "circleSDF", radius: 0.35 }' />

<!-- Six-pointed star -->
<Neon :shape='{ type: "starSDF", radius: 0.35, sides: 6, innerRatio: 0.45 }' />

<!-- Rounded rectangle -->
<Emboss :shape='{ type: "roundedRectSDF", width: 0.4, height: 0.25, rounding: 0.06 }' />

// Circle (default)
<Glass shape={JSON.stringify({ type: "circleSDF", radius: 0.35 })} />

// Six-pointed star
<Neon shape={JSON.stringify({ type: "starSDF", radius: 0.35, sides: 6, innerRatio: 0.45 })} />

// Rounded rectangle
<Emboss shape={JSON.stringify({ type: "roundedRectSDF", width: 0.4, height: 0.25, rounding: 0.06 })} />

// Circle (default)
<Glass shape={JSON.stringify({ type: "circleSDF", radius: 0.35 })} />

// Six-pointed star
<Neon shape={JSON.stringify({ type: "starSDF", radius: 0.35, sides: 6, innerRatio: 0.45 })} />

// Rounded rectangle
<Emboss shape={JSON.stringify({ type: "roundedRectSDF", width: 0.4, height: 0.25, rounding: 0.06 })} />

// Circle (default)
<Glass shape={JSON.stringify({ type: "circleSDF", radius: 0.35 })} />

// Six-pointed star
<Neon shape={JSON.stringify({ type: "starSDF", radius: 0.35, sides: 6, innerRatio: 0.45 })} />

// Rounded rectangle
<Emboss shape={JSON.stringify({ type: "roundedRectSDF", width: 0.4, height: 0.25, rounding: 0.06 })} />

// Circle (default)
const shader = await createShader(canvas, {
  components: [
    { type: 'Glass', props: { shape: { type: 'circleSDF', radius: 0.35 } } }
  ]
})

// Six-pointed star
const shader = await createShader(canvas, {
  components: [
    { type: 'Neon', props: { shape: { type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 } } }
  ]
})

// Rounded rectangle
const shader = await createShader(canvas, {
  components: [
    { type: 'Emboss', props: { shape: { type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 } } }
  ]
})

2D shapes

These are flat profiles defined directly in the field. All sizes are in UV space (roughly 0–0.5 from the centre to an edge), and rotations are in degrees.

Circle — circleSDF

A perfect circle. The default shape for all shape effects.

{ "type": "circleSDF", "radius": 0.35 }

Ellipse — ellipseSDF

A stretched circle with independent horizontal and vertical radii.

{ "type": "ellipseSDF", "width": 0.4, "height": 0.25, "rotation": 0 }

Polygon — polygonSDF

A regular N-sided polygon (triangle, square, hexagon, etc.).

{ "type": "polygonSDF", "radius": 0.3, "sides": 6, "rounding": 0.05, "rotation": 0 }

Star — starSDF

An N-pointed star with configurable inner/outer radius ratio.

{ "type": "starSDF", "radius": 0.35, "sides": 5, "innerRatio": 0.382, "rotation": 0 }

Flower — flowerSDF

An N-petalled flower with smooth concave valleys between petals.

{ "type": "flowerSDF", "radius": 0.35, "sides": 6, "innerRatio": 0.5, "rotation": 0 }

Ring — ringSDF

A hollow ring / annulus. The effect applies to the ring material itself, not the interior hole.

{ "type": "ringSDF", "radius": 0.3, "thickness": 0.08 }

Cross — crossSDF

A plus-sign cross with configurable arm length, thickness, and corner rounding.

{ "type": "crossSDF", "size": 0.25, "thickness": 0.08, "rounding": 0.02, "rotation": 0 }

Rounded Rectangle — roundedRectSDF

A rectangle with uniformly rounded corners.

{ "type": "roundedRectSDF", "width": 0.35, "height": 0.25, "rounding": 0.05, "rotation": 0 }

Vesica — vesicaSDF

A lens / eye shape formed by the intersection of two overlapping circles.

{ "type": "vesicaSDF", "radius": 0.35, "spread": 0.5, "rotation": 0 }

Crescent — crescentSDF

A crescent / moon shape formed by subtracting a smaller offset circle from a larger one.

{ "type": "crescentSDF", "radius": 0.35, "innerRatio": 0.75, "offset": 0.15, "rotation": 0 }

Trapezoid — trapezoidSDF

A quadrilateral with parallel top and bottom edges of different widths.

{ "type": "trapezoidSDF", "bottomWidth": 0.35, "topWidth": 0.2, "height": 0.25, "rotation": 0 }

3D shapes

3D shapes are true volumetric primitives — they are raymarched into the field rather than drawn as a flat silhouette. Effects that support volume (Glass, Neon, Emboss, ThinFilm, and Crystal) use this to refract, shade, and crease according to the real surface, giving you a physically based 3D object lit inside your design. (SmokeFill treats every shape as a flat fill.)

Every 3D shape is positioned with three independent rotations — rotX, rotY, and rotZ — given in degrees. All sizes are in UV space.

Rotation order: 3D rotations don't commute — the order they're combined in changes the result. Shaders applies them as a fixed Euler sequence: Y first, then X, then Z. Because the sequence is fixed, the order you list the props in the config has no effect — only the angle values matter. If a combination of angles doesn't land the way you expect, adjust the values rather than trying to reorder them. As a rough mental model, rotY is a turntable spin (left/right), rotX tips the shape toward or away from you, and rotZ rolls it in the screen plane.

Tip: The size and rotation sub-props of a 3D shape can each be a dynamic prop instead of a number. Set a rotation to an auto-animate config looping from -180 to 180 for a continuous spin, with no animation code:

{ "type": "torus3D", "radius": 0.3, "tube": 0.12,
  "rotY": { "type": "auto-animate", "mode": "loop", "outputMin": -180, "outputMax": 180, "speed": 0.5 } }

Sphere — sphere3D

A perfect sphere.

{ "type": "sphere3D", "radius": 0.35, "rotX": 0, "rotY": 0, "rotZ": 0 }

Cube — cube3D

A box with independent dimensions and rounded edges.

{ "type": "cube3D", "sizeX": 0.27, "sizeY": 0.27, "sizeZ": 0.27, "rounding": 0.02, "rotX": 25, "rotY": 35, "rotZ": 0 }

Torus — torus3D

A doughnut ring.

{ "type": "torus3D", "radius": 0.3, "tube": 0.12, "rotX": 55, "rotY": 0, "rotZ": 0 }

Octahedron — octahedron3D

An eight-faced diamond/bipyramid.

{ "type": "octahedron3D", "radius": 0.42, "rotX": 10, "rotY": 25, "rotZ": 0 }

Cylinder — cylinder3D

A capped cylinder with rounded edges.

{ "type": "cylinder3D", "radius": 0.22, "height": 0.26, "rounding": 0.02, "rotX": 60, "rotY": 0, "rotZ": 30 }

Capsule — capsule3D

A cylinder with hemispherical caps (a pill).

{ "type": "capsule3D", "radius": 0.16, "height": 0.2, "rotX": 0, "rotY": 0, "rotZ": 35 }

Cone — cone3D

A cone or truncated cone. Set topRadius above 0 to flatten the tip into a frustum.

{ "type": "cone3D", "radius": 0.3, "topRadius": 0.02, "height": 0.3, "rotX": 25, "rotY": 0, "rotZ": 15 }

Pyramid — pyramid3D

A square-based pyramid.

{ "type": "pyramid3D", "size": 0.3, "height": 0.45, "rotX": -10, "rotY": 30, "rotZ": 0 }

Prism — prism3D

A hexagonal prism.

{ "type": "prism3D", "radius": 0.28, "height": 0.14, "rotX": 25, "rotY": 30, "rotZ": 0 }

Ellipsoid — ellipsoid3D

A sphere with three independent radii.

{ "type": "ellipsoid3D", "radiusX": 0.38, "radiusY": 0.22, "radiusZ": 0.3, "rotX": 0, "rotY": 0, "rotZ": 20 }

Diamond — diamond3D

A faceted gemstone with a crown and pavilion — the showpiece shape for the Crystal effect.

{ "type": "diamond3D", "radius": 0.3, "height": 0.42, "rotX": 15, "rotY": 0, "rotZ": 0 }

Link — link3D

A rounded chain link.

{ "type": "link3D", "radius": 0.18, "length": 0.15, "tube": 0.08, "rotX": 20, "rotY": 30, "rotZ": 0 }

Custom shapes

For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.

To use an SVG shape, set shapeSdfUrl to the URL of an SDF .bin file. The easiest way to get one is the design editor — upload your SVG there, and the code export includes a ready-to-use hosted .bin URL. If you work with the Shaders MCP, your agent can also generate an SDF from any SVG in your project.

<Glass :shapeSdfUrl="myLogoUrl" />

<Glass shapeSdfUrl={myLogoUrl} />

<Glass shapeSdfUrl={myLogoUrl} />

<Glass shapeSdfUrl={myLogoUrl} />

const shader = await createShader(canvas, {
  components: [
    { type: 'Glass', props: { shapeSdfUrl: 'https://example.com/my-logo.bin' } }
  ]
})

Extruding a custom SVG into 3D

Custom SVGs aren't limited to flat profiles — they can be extruded into a solid 3D slab with rounded bevels, so volumetric effects (Glass, Neon, Emboss, ThinFilm, Crystal) wrap around your logo as a real object. Alongside shapeSdfUrl, set the shape config type to svgExtrude3D and tune the extrusion:

As with the analytic 3D shapes, these sub-props accept dynamic prop configs (e.g. an auto-animate rotation for a spinning logo).

<Glass
  :shapeSdfUrl="myLogoUrl"
  :shape='{ type: "svgExtrude3D", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'
/>

<Glass
  shapeSdfUrl={myLogoUrl}
  shape={JSON.stringify({ type: "svgExtrude3D", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 })}
/>

<Glass
  shapeSdfUrl={myLogoUrl}
  shape={JSON.stringify({ type: "svgExtrude3D", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 })}
/>

<Glass
  shapeSdfUrl={myLogoUrl}
  shape={JSON.stringify({ type: "svgExtrude3D", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 })}
/>

const shader = await createShader(canvas, {
  components: [
    {
      type: 'Glass',
      props: {
        shapeSdfUrl: 'https://example.com/my-logo.bin',
        shape: { type: 'svgExtrude3D', depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }
      }
    }
  ]
})

The easiest way to produce a working extruded logo (SDF .bin plus the matching shape config) is to set it up visually in the design editor and use the code export.