Metal Shaders for SwiftUI · iOS 17+ · macOS 14+ · v1.0

Native shaders for SwiftUI.

38 Metal shaders with one settings API: 25 animated backgrounds, from liquid chrome and aurora to caustics and dot fields, and 13 effects for any view. Drag them, tap them, tilt them. They follow Reduce Motion and stop when they're off screen. One line of SwiftUI each.

iOS 17+ · macOS 14+Native SwiftUI for iOS 17+ / macOS 14+, a separate product line from our web effects. A Swift package for Xcode, not a script tag. Building a website? See our web effects.

See all 38 effects

$39 one-time when it launches · One-app license · Free v1.x updates

.parallelShader(.liquidChrome, preset: "copper")

38 native Metal shaders
One settings API, 3 presets each
Touch, hover, tap ripples, tilt
Reduce Motion · pauses offscreen

The API

One modifier. Every effect.

Each effect is a ParallelShader with typed parameters, a palette and three presets. One ShaderSettings value changes any of them, and .parallelShader() handles time, interaction, Reduce Motion and pausing.

SwiftUI

import ParallelShaders

// A background: fills whatever shape it's on.
Rectangle()
    .parallelShader(.liquidChrome, preset: "copper")
    .ignoresSafeArea()

// An effect on your own view.
Image("cover")
    .parallelShader(.halftone, settings: ShaderSettings(
        values: ["cell": 6, "angle": 30],
        palette: ShaderPalette("#f2ede4", "#1c1917", "#000000", "#000000"),
        reduceMotion: .still
    ))

Backgrounds fill any shape. Put one on a Rectangle(), a card, or a Text to fill its glyphs.
Effects transform your views. Distortion, layer and color effects run on images, text, shapes and controls; buttons under them keep working.
Settings in one place. Parameters by name with ranges and defaults, a four-color palette, speed, interaction, Reduce Motion behavior, frame-rate cap.
Code from the demo. Tune an effect in the demo app's inspector and copy the SwiftUI it writes.

All 38 effects, live

Drag or tap any preview, switch its presets, copy its SwiftUI. These previews are WebGL ports generated from the same shader source as the Metal code; in your app they run natively in SwiftUI.

Mesh Gradient

Background

Four colors drifting on soft, warped control points, with film grain. A calm hero background.

Parameters Warp · Blend sharpness · Motion · Zoom · Grain

Interaction The pointer pulls the nearest color toward it; taps ripple the field.

SwiftUI

Rectangle()
    .parallelShader(.meshGradient)
    .ignoresSafeArea()

Aura

Background

Two blurred light sources orbiting under heavy grain, like aura photography or a long-exposure lamp.

Parameters Glow size · Drift · Softness · Grain · Vignette

Interaction The main glow follows the pointer; taps flash a ring of light.

SwiftUI

Rectangle()
    .parallelShader(.aura)
    .ignoresSafeArea()

Aurora

Background

Curtains of polar light that ripple across a night sky, with vertical rays and a soft horizon glow.

Parameters Intensity · Scale · Waviness · Curtain height · Layers · Rays · Grain

Interaction The pointer parts the curtains; taps send a ripple through them; tilt shifts the sky.

SwiftUI

Rectangle()
    .parallelShader(.aurora)
    .ignoresSafeArea()

Liquid Chrome

Background

A slowly flowing mirror surface: a warped height field lit by a studio horizon, with sharp specular bands.

Parameters Flow · Detail · Relief · Horizon sharpness · Tint · Grain

Interaction Pressing dents the surface under the pointer; taps send a ring across the metal; tilt turns the studio light.

SwiftUI

Rectangle()
    .parallelShader(.liquidChrome)
    .ignoresSafeArea()

Ink Smoke

Background

Ink dropped in water: a twice domain-warped noise field that curls and blooms into three inks.

Parameters Warp · Scale · Ink density · Contrast · Grain

Interaction The pointer stirs the ink around it; taps push a wave through the water.

SwiftUI

Rectangle()
    .parallelShader(.inkSmoke)
    .ignoresSafeArea()

Caustics

Background

Sunlight focused through moving water: two drifting layers of bright, wobbly light webs over a depth gradient.

Parameters Scale · Sharpness · Wobble · Brightness · Dispersion · Depth gradient

Interaction The pointer makes a wake in the water; taps drop a ripple.

SwiftUI

Rectangle()
    .parallelShader(.caustics)
    .ignoresSafeArea()

Lava Lamp

Background

Wax blobs rising and sinking through a warm glass column, merging with smooth signed-distance unions.

Parameters Blobs · Blob size · Merge · Rise · Glow · Column width

Interaction The pointer gently heats and lifts the nearest wax; taps wobble the column.

SwiftUI

Rectangle()
    .parallelShader(.lavaLamp)
    .ignoresSafeArea()

Metaballs

Background

Gooey blobs on looping orbits that merge and split, colored by whichever ball is closest.

Parameters Balls · Ball size · Orbit · Gooeyness · Rim light

Interaction The pointer becomes an extra ball you can drag into the others; taps ripple the surface.

SwiftUI

Rectangle()
    .parallelShader(.metaballs)
    .ignoresSafeArea()

Cells

Background

Animated Voronoi cells with glowing borders and a per-cell color drawn from the palette.

Parameters Density · Border width · Inner glow · Jitter · Color mix

Interaction Cells near the pointer light up; taps ripple across the tiling.

SwiftUI

Rectangle()
    .parallelShader(.cells)
    .ignoresSafeArea()

Topography

Background

Contour lines of a slowly evolving landscape, with heavier index lines and soft elevation tints.

Parameters Levels · Line width · Scale · Evolve · Index lines · Elevation tint

Interaction The pointer raises a hill, so contour rings form around it; taps ripple the terrain.

SwiftUI

Rectangle()
    .parallelShader(.topography)
    .ignoresSafeArea()

Vortex

Background

Spiral arms twisting into a glowing eye, with optional noise to roughen the bands.

Parameters Arms · Twist · Softness · Eye size · Turbulence · Band balance

Interaction The eye drifts toward the pointer; taps send a ring outward through the arms.

SwiftUI

Rectangle()
    .parallelShader(.vortex)
    .ignoresSafeArea()

Kaleidoscope

Background

Mirrored wedges of flowing noise and line work, folding into a slowly turning mandala.

Parameters Mirrors · Zoom · Spin · Detail · Line work · Contrast

Interaction The pointer moves the pattern under the mirrors; taps pulse the center.

SwiftUI

Rectangle()
    .parallelShader(.kaleidoscope)
    .ignoresSafeArea()

Interference

Background

Circular waves from moving sources overlapping into moiré bands, like a ripple tank.

Parameters Sources · Wavelength · Sharpness · Separation · Decay

Interaction The pointer becomes a wave source; each tap adds a short-lived one.

SwiftUI

Rectangle()
    .parallelShader(.interference)
    .ignoresSafeArea()

Dot Horizon

Background

A 3D ground plane of dots rolling with waves toward the horizon, fading into fog.

Parameters Density · Dot size · Wave height · Wave scale · Horizon · Fog

Interaction The pointer raises a swell in the field; taps drop a ripple into it; tilt moves the horizon.

SwiftUI

Rectangle()
    .parallelShader(.dotHorizon)
    .ignoresSafeArea()

Dot Matrix

Background

A flat grid of crisp dots whose size and color follow a moving pattern: noise, rings, flow or cells.

Parameters Spacing (pt) · Dot size · Pattern · Pattern scale · Contrast · Minimum size

Interaction Dots swell under the pointer; taps send a ring of large dots outward.

SwiftUI

Rectangle()
    .parallelShader(.dotMatrix)
    .ignoresSafeArea()

Starfield

Background

Three parallax layers of twinkling stars drifting past, over an optional faint dust cloud.

Parameters Density · Star size · Twinkle · Drift · Direction · Dust

Interaction Stars near the pointer flare; taps send a shock ring; tilt adds parallax between layers.

SwiftUI

Rectangle()
    .parallelShader(.starfield)
    .ignoresSafeArea()

Light Rays

Background

God rays fanning out from a light source, flickering through haze, with floating dust in the beams.

Parameters Source X · Source Y · Ray count · Spread · Intensity · Falloff · Dust

Interaction The light source follows the pointer; taps flash the beams.

SwiftUI

Rectangle()
    .parallelShader(.lightRays)
    .ignoresSafeArea()

Clouds

Background

Soft cumulus drifting across a gradient sky, lit from a low sun with shaded undersides.

Parameters Coverage · Softness · Scale · Wind · Sun glow · Shading

Interaction The pointer clears a hole in the clouds; taps puff them outward.

SwiftUI

Rectangle()
    .parallelShader(.clouds)
    .ignoresSafeArea()

Embers

Background

Sparks rising from a hot glow, swaying and flickering as they cool from white to deep red.

Parameters Density · Rise · Spark size · Sway · Heat glow · Depth layers

Interaction The pointer blows the sparks aside; taps throw a burst of heat.

SwiftUI

Rectangle()
    .parallelShader(.embers)
    .ignoresSafeArea()

Marble

Background

Polished stone with turbulent veins that slowly flow, plus an optional gold seam.

Parameters Scale · Turbulence · Vein sharpness · Gold seam · Flow · Polish

Interaction The pointer drags the veins around; taps ripple the stone.

SwiftUI

Rectangle()
    .parallelShader(.marble)
    .ignoresSafeArea()

Silk

Background

Layered satin ribbons drifting in a breeze, with soft folds and a moving sheen.

Parameters Ribbons · Amplitude · Thickness · Sheen · Folds · Spread

Interaction The pointer lifts the ribbons beneath it; taps send a wave along them.

SwiftUI

Rectangle()
    .parallelShader(.silk)
    .ignoresSafeArea()

Plasma

Background

The demoscene classic, rebuilt: stacked sine fields mapped through a four-color cycle with optional banding.

Parameters Scale · Complexity · Bands · Color cycle · Glow

Interaction The pointer becomes a hot spot in the field; taps send a ring through it.

SwiftUI

Rectangle()
    .parallelShader(.plasma)
    .ignoresSafeArea()

Warp Tunnel

Background

An endless tunnel of glowing rings and rails rushing toward a vanishing point.

Parameters Rings · Rails · Line width · Twist · Glow · Center fog

Interaction The vanishing point follows the pointer and tilt; taps pulse the rings.

SwiftUI

Rectangle()
    .parallelShader(.warpTunnel)
    .ignoresSafeArea()

Grid Horizon

Background

A glowing perspective grid racing toward a striped sun and a ridge of mountains.

Parameters Grid density · Line width · Sun size · Mountains · Glow · Horizon

Interaction Steer the camera sideways with the pointer or tilt; taps ripple across the floor.

SwiftUI

Rectangle()
    .parallelShader(.gridHorizon)
    .ignoresSafeArea()

Glyph Rain

Background

Columns of blocky 5×7 glyphs streaming down a terminal, each trail led by a bright head.

Parameters Glyph size (pt) · Fall speed · Trail length · Glyph change · Columns lit · Scanlines

Interaction Glyphs under the pointer light up and scramble; taps flash a ring of glyphs.

SwiftUI

Rectangle()
    .parallelShader(.glyphRain)
    .ignoresSafeArea()

Water Ripple

Distortion

Rings of water spreading over any view: from each tap, from the pointer as it moves, and optionally on their own.

Parameters Amplitude (pt) · Wavelength (pt) · Wave speed (pt/s) · Damping · Ambient drops · Pointer wake

Interaction Taps drop a ripple where you touch; dragging leaves a wake; ambient drops keep it alive when idle.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.waterRipple)

Flag Wave

Distortion

Makes any view billow like cloth or a flag, optionally pinned at its leading edge.

Parameters Amplitude (pt) · Wavelength (pt) · Direction · Pin leading edge · Flutter

Interaction The pointer pushes a bulge through the cloth; taps snap a wave along it.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.flagWave)

Magnifier

Distortion

A round glass lens that magnifies whatever is under it, with a soft barrel-distorted rim.

Parameters Radius (pt) · Zoom · Rim distortion · Idle wander

Interaction The lens follows the pointer; idle, it wanders on its own. Taps briefly zoom in.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.magnifier)

Heat Haze

Distortion

Shimmering air rising off hot asphalt: a soft noise wobble that drifts upward, strongest at the bottom.

Parameters Amplitude (pt) · Scale (pt) · Rise · Bottom bias

Interaction The pointer is a heat source that adds its own shimmer; taps send a hot pulse.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.heatHaze)

Chromatic Split

Layer effect

Splits any view into red and cyan fringes like a cheap lens, with optional digital glitch slices.

Parameters Amount (pt) · Radial · Angle · Glitch · Slice height (pt)

Interaction The split radiates from the pointer and grows near it; taps trigger a glitch burst.

SwiftUI

Text("Metal")
    .font(.system(size: 96, weight: .heavy))
    .parallelShader(.chromaticSplit)

Mosaic

Layer effect

Turns any view into square tiles or round LED dots, with a lens that reveals the sharp original.

Parameters Tile size (pt) · Shape · Gap · Reveal radius (pt) · Breathe

Interaction The pointer opens a clear window through the mosaic; taps pulse the tile size.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.mosaic)

Halftone

Layer effect

Re-prints any view as halftone dots on a rotated screen: one ink on paper, or the view's own colors.

Parameters Screen (pt) · Screen angle · Contrast · Original colors · Softness

Interaction Dots grow under the pointer like a darker ink pass; taps send a ring through the screen.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.halftone)

Dither

Layer effect

Ordered 4×4 Bayer dithering into a 2–4 color palette, for a 1-bit screen or early-print look.

Parameters Pixel size (pt) · Colors · Contrast · Brightness · Keep hue

Interaction The pointer brightens the image under it; taps flash a ring through the pattern.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.dither)

Bloom

Layer effect

Soft bloom around the bright parts of any view, tinted and gently breathing, like neon in fog.

Parameters Radius (pt) · Intensity · Threshold · Tint · Breathe

Interaction The bloom intensifies near the pointer; taps flash it.

SwiftUI

Text("Metal")
    .font(.system(size: 96, weight: .heavy))
    .parallelShader(.bloom)

Chrome Fill

Layer effect

Turns the shape of any view (text, SF Symbols, icons) into beveled, flowing polished metal.

Parameters Bevel (pt) · Liquid flow · Reflection sharpness · Tint · Glint

Interaction The studio light follows the pointer; taps send a glint across the metal; tilt turns the light.

SwiftUI

Image(systemName: "star.fill")
    .font(.system(size: 160))
    .parallelShader(.chromeFill)

Shimmer

Color effect

A band of light that sweeps across text, icons or cards on a loop: the loading or premium highlight.

Parameters Band width (pt) · Angle · Interval (s) · Intensity · Dim outside band

Interaction While pressed or hovered the band follows the pointer; taps fire an extra sweep.

SwiftUI

Text("Metal")
    .font(.system(size: 96, weight: .heavy))
    .parallelShader(.shimmer)

Gradient Map

Color effect

Re-colors any view by brightness through a four-stop ramp: duotones, film looks, brand-colored photos.

Parameters Amount · Contrast · Offset · Drift · Grain

Interaction The pointer shifts the ramp under it; taps send a color wave across the view.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.gradientMap)

CRT

Color effect

A cathode-ray monitor over any view: scanlines, a phosphor mask, flicker, a rolling bar and vignette.

Parameters Scanlines · Line spacing (pt) · Phosphor mask · Flicker · Vignette · Phosphor tint

Interaction The pointer warms up the phosphors under it; taps glitch the screen for a moment.

SwiftUI

Image("photo")
    .resizable()
    .scaledToFill()
    .parallelShader(.crt)

What it does

38 shaders, four kinds. 25 animated backgrounds (liquid chrome, aurora, caustics, mesh gradients, dot fields, starfield, marble, lava lamp…) and 13 effects for any view: water ripples, a magnifier, flag wave, heat haze, chromatic split, mosaic, halftone, dither, bloom, chrome text, shimmer, gradient maps and CRT.
Native SwiftUI. Real [[ stitchable ]] Metal functions used through SwiftUI's own shader API (colorEffect, distortionEffect, layerEffect) and TimelineView. No UIKit wrappers, no SpriteKit, no web views, no dependencies.
One settings API. Every effect takes the same ShaderSettings: typed parameters (sliders, steppers, angles, toggles, choices) with ranges and defaults, a four-color palette, speed, interaction and motion options. Three presets each, and a one-line modifier: .parallelShader(.aurora, preset: "glacier").
Made to touch. Drag, hover (macOS and iPad pointer) and tap on every effect: chrome dents, ink stirs, cells light up, the magnifier follows your finger, taps send ripples. Optional device tilt on iPhone and iPad from one shared Core Motion feed.
Accessible and polite. Follows Reduce Motion (still frame by default, or slowed), pauses when a view scrolls away or the app goes to the background, resumes without a jump, and can cap the frame rate. Backgrounds stay out of VoiceOver.
Previews, demo, docs, and a skill. An Xcode #Preview for every effect, a demo app for iOS and macOS with a live parameter inspector that writes the SwiftUI code for you, DocC docs, and an agent skill (SKILL.md) that teaches your coding agent to write new shaders in the same style.

What's in the download

ParallelShaders Swift package (swift-tools 5.9): 38 .metal shaders, the ParallelShader catalog, ShaderSettings, the .parallelShader modifier and ShaderView
38 Xcode previews (#Preview), one per effect, with a preset picker
Demo app for iOS and macOS (Xcode project): live gallery, parameter inspector, palette, interaction and motion options, Copy Code, FPS meter
DocC documentation, README with every effect's parameters and presets, CHANGELOG
SKILL.md: an agent skill for writing new shaders in this package's conventions (signatures, settings plumbing, previews, testing)
The shader sources and build tools: add your own effects and regenerate the Metal, catalog and previews
Tests: catalog, parameters, presets, settings, code export, and a check that every function is in the compiled Metal library
LICENSE.md (one app) and third-party notices (none required: all code is our own)

One-app license (LICENSE.md in the download): one app or project, its iOS, iPadOS and macOS versions included. Every shader is our own code; no third-party notices are needed.

Requirements

Platforms	iOS 17, iPadOS 17, macOS 14 (Sonoma) or later
Xcode	15 or later (16 recommended)
Framework	SwiftUI (works inside UIKit/AppKit apps through UIHostingController / NSHostingView)
Install	Local Swift package: Add Package Dependencies ▸ Add Local. No CocoaPods, no third-party dependencies
Language	Swift 5.9+, Metal (compiled by Xcode)
Not included	Web versions. Our web effects are a separate product line (script tag / React / Framer)

Metal Shaders for SwiftUI

$39 one-time

38 SwiftUI Metal shaders, 3 presets each
Demo app for iOS and macOS, previews, DocC docs
Agent skill for writing new shaders
Free v1.x updates · one-app license

Not on sale yet. Leave your email below and we'll tell you when it is.

Native SwiftUI, sold separately: the All-Access Pass covers our web effects only.

FAQ

What do I need to use it?

An app built with SwiftUI for iOS 17, iPadOS 17 or macOS 14 or later, and Xcode 15 or later. Add the folder as a local Swift package and import ParallelShaders. UIKit and AppKit apps can host the effects with UIHostingController or NSHostingView.

Are the previews on this page the real thing?

They're WebGL approximations so you can see the effects in a browser: GLSL ports generated from the same shader source as the Metal code, with the same parameters, presets and pointer and tap behavior. The package itself is native Metal running through SwiftUI, and on device it's the reference. Tilt isn't simulated here.

Is this the same as your web effects?

No. It's a separate product line for native Apple apps. Our web effects (Shader Gradients, Dot Grid Field, Liquid Cursor and the rest) are script tags and React/Framer components for websites. Different code, different license, sold separately, and not part of the All-Access Pass.

Can I change the effects?

Yes. Every effect has typed parameters, a four-color palette, speed and three presets, all through one ShaderSettings value. The demo app's inspector lets you dial a look in and copies the SwiftUI code. You get the Metal source too, so you can edit shaders or write new ones; SKILL.md explains the conventions to you or your coding agent.

How does it handle Reduce Motion and battery?

With Reduce Motion on, each effect shows a finished still frame by default (or runs slowed, if you choose). Effects stop rendering when their view disappears, when they scroll out of view in lazy stacks and grids, and when the app goes to the background, and you can cap the frame rate (30 fps is plenty for most backgrounds).

Does it work on any view?

Backgrounds work anywhere: fill a shape, a card, or text. Effects that transform a view (ripples, magnifier, halftone, bloom…) work on SwiftUI content: text, shapes, images, Canvas and most controls. SwiftUI can't apply shaders to views backed by UIKit or AppKit, such as maps, web views and video players.

What does the license cover?

One app (its iOS, iPadOS and macOS versions count as one), shipped to any number of users, for you or one client. You can't resell or publish the shader source, or include it in a template, kit or library. Agencies and multiple apps: one license per app, or ask us about an extended license.

Is any of it third-party code?

No. Every shader, the Swift package, the demo and the docs are our own work, built from published graphics techniques (gradient noise, cellular noise, metaballs, ordered dithering, reflection mapping). No third-party notices are required.

visionOS, watchOS, tvOS?

v1.0 targets iOS, iPadOS and macOS. Other Apple platforms aren't supported yet.

Questions before buying?

Email hi@gunnargray.com.

Get told when it launches

The launch, new shaders, v1.x releases and the occasional new tool. No more than that.