Glass

SDF-shaped glass lens layerEffect — magnifies and refracts a source view inside a circle or rounded-rect with frosted blur, a Fresnel rim, chromatic aberration, a directional highlight and tint, all driven by an analytic signed-distance field

Free

Free with a ShipSwift account.

Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.

Works with

+70

What it does

A refractive glass sheet laid over any content. SWGlass wraps a piece of background content and applies a Metal layerEffect that bends, frosts, tints and lights that background inside an analytic SDF region — a circle or a rounded rectangle. Outside the shape the background passes through, or is cut away when cutout is on.

The look is driven entirely by the shape's signed-distance field and its gradient: the rim refracts hardest while the centre stays calm, a single in-shader golden-angle disk frosts the content, the same taps split chromatically for dispersion, and tint, a directional edge light, a 3D specular glint and a Fresnel rim are layered on top before being cross-faded into the background by an edge mask. The light angle is converted to a (cos, sin) direction on the CPU so the shader avoids per-pixel trig, and Colors are resolved to RGB triples on the Swift side.

This is a sibling of glass-orb (which renders a sphere with its own gradient fill); SWGlass instead glasses over arbitrary content with a flat sheet and a far larger control surface.

Requires iOS 18+ / macOS 15+ (SwiftUI ShaderLibrary, Metal stitchable).

What you get

✓783 lines of source code, ready to paste
✓File Layout
✓Source Code
✓Usage
✓Parameters
✓Integration Checklist
✓Notes / Gotchas

animationmetalshaderglassrefractionlensSDFlayerEffectSwiftUI

Usage

// Glass a circle over your own content.
SWGlass { MyHeroImage() }

// Rounded-rectangle glass card, isolated on transparency (only the glass remains).
SWGlass(shape: .roundedRect, cutout: true) { MyHeroImage() }

// Frosted, magnifying, slightly tinted lens.
SWGlass(blur: 6, innerZoom: 1.3, tintColor: .cyan, tintIntensity: 0.25) {
    MyHeroImage()
}

// Demo — built-in sample background + gear toolbar item + live-tuning sheet.
// Requires an enclosing NavigationStack.
NavigationStack {
    SWGlass(showsControls: true)
}

Parameters

Parameter	Type	Default	Range	Notes
`shape`	`SWGlassShape`	`.circle`	circle / roundedRect	The analytic SDF region the glass covers
`center`	`CGPoint`	`(0.5, 0.5)`	0…1	Shape centre in normalised view space
`scale`	`CGFloat`	`1`	0.5…2	Shape scale — >1 shrinks the glass, <1 grows it
`cornerRadius`	`CGFloat`	`0.12`	0…0.34	Corner radius for the rounded-rectangle shape
`cutout`	`Bool`	`false`	—	When `true`, the exterior is transparent and only the glass remains
`refraction`	`CGFloat`	`1`	0…3	Master strength of the refractive bend
`edgeSoftness`	`CGFloat`	`0.1`	0.01…0.5	Width of the soft edge fill band
`blur`	`CGFloat`	`0`	0…20	Frosted-glass disk radius (0 = sharp)
`thickness`	`CGFloat`	`0.2`	0.02…1	Apparent glass thickness; widens the refractive band
`aberration`	`CGFloat`	`0.5`	0…2	Chromatic split strength along the refraction vector
`innerZoom`	`CGFloat`	`1`	0.5…2	Magnifies the refracted content (>1 zooms in)
`lightAngle`	`CGFloat`	`300`	0…360	Light direction in degrees (0 = +x, counter-clockwise)
`highlight`	`CGFloat`	`0.05`	0…1	Master strength of edge light + specular glint
`highlightColor`	`Color`	`.white`	—	Highlight / specular color
`highlightSoftness`	`CGFloat`	`0.5`	0…1	Specular tightness (higher = broader glint)
`fresnel`	`CGFloat`	`0.1`	0…1	Strength of the Fresnel rim
`fresnelSoftness`	`CGFloat`	`0.1`	0.01…1	Width of the Fresnel rim band
`fresnelColor`	`Color`	`.white`	—	Fresnel rim color
`tintColor`	`Color`	`.white`	—	The color the glass tints the refracted content toward
`tintIntensity`	`CGFloat`	`0`	0…1	How strongly the tint is mixed in (0 = none)
`tintPreserveLuminosity`	`Bool`	`true`	—	When `true`, the tint keeps the original luminance (hue/chroma only)
`showsControls`	`Bool`	`false`	—	Demo-only gear ToolbarItem; requires an enclosing `NavigationStack`

Integration Checklist

Copy SWGlass.swift and SWGlass.metal into your Xcode target; the .metal file is compiled into the default ShaderLibrary automatically.
Confirm the deployment target is iOS 18+ / macOS 15+.
Pass the content you want glassed in the trailing closure, or use the convenience initialiser (no closure) for the built-in sample background.
The maxSampleOffset budget is computed for you from blur + refraction + the aberration split — heavier frost / refraction automatically reserves a larger tile budget.
Use cutout: true when you want the glass isolated on transparency (e.g. a glass badge over your own layout) rather than composited over the supplied background.

Notes / Gotchas

Everything is driven by the SDF and its gradient. The surface normal is a finite-difference gradient of the signed-distance field; thickness near the edge drives a squared refraction falloff so the rim bends hardest and the centre stays calm.
The shape enum travels as a float. SwiftUI's Shader.Argument has no integer case, so SWGlassShape.rawValue is sent as a .float and compared with > 0.5 in the shader. Keep the enum raw values 0 / 1.
One golden-angle disk does both frost and dispersion. The same tap set is reused at three chromatically-shifted centres, so the heavy taps only run when blur or aberration is non-zero (the sharp single-tap path is taken otherwise).
Light angle is precomputed on the CPU. The Swift side converts lightAngle to a (cos, sin) direction so the shader avoids per-pixel trig; Colors are likewise resolved to RGB triples on the Swift side.
The argument order in the .layerEffect call must match the Metal swGlass signature exactly: boundingRect, shape, center, scale, cornerRadius, cutout, refraction, edgeSoftness, blur, thickness, aberration, innerZoom, lightDir, highlight, highlightColor, highlightSoftness, fresnel, fresnelSoftness, fresnelColor, tintColor, tintIntensity, tintPreserveLuminosity.