Fractal Clouds

Drifting fractal cumulus clouds rendered via a SwiftUI Metal stitchable shader, using two-pass 5-octave FBM with domain warping for soft cumulus-like swirls

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

Full-screen drifting fractal clouds rendered through SwiftUI's colorEffect Metal pipeline. Two-pass FBM (5-octave value noise): the first pass perturbs the sample position for the second, producing soft cumulus-like swirls. Sky and cloud colors are mixed by the warped FBM, with an optional warm tint layered on top of the unwarped pass for ambient lift.

Requires iOS 18+ / macOS 15+.

What you get

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

animationmetalshadercloudsbackgroundfbmSwiftUI

Usage

// Default — twilight cumulus, full-screen
ZStack {
    SWFractalClouds()
        .ignoresSafeArea()
    // Your content here
}

// Recolor — daylight sky
SWFractalClouds(
    skyColor: .blue.opacity(0.5),
    cloudColor: .white,
    warmth: 0.0
)

// As a section background
myContent
    .background { SWFractalClouds() }

// Heavier coverage, slower drift
SWFractalClouds(speed: 0.5, coverage: 0.2)

Parameters

Parameter	Type	Default	Range	Notes
`skyColor`	`Color`	`#1A2659` (deep twilight blue)	—	Color of the open sky behind clouds
`cloudColor`	`Color`	`#E6E6FF` (soft lilac white)	—	Color of the cloud body
`warmTint`	`Color`	`#1A0D00` (deep amber)	—	Color added on top of the unwarped FBM for ambient lift
`warmth`	`Float`	`0.5`	0…2	Multiplier on the warm tint additive layer
`speed`	`Float`	`1.0`	0…3	Time multiplier driving drift and warp evolution
`zoom`	`Float`	`3.0`	0.5…10	FBM sampling scale — higher = larger features
`driftX`	`Float`	`0.08`	-0.5…0.5	Horizontal drift velocity
`driftY`	`Float`	`0.04`	-0.5…0.5	Vertical drift velocity
`warp`	`Float`	`2.0`	0…5	Strength of the first FBM warping the second's sample position; `0` = pure FBM
`coverage`	`Float`	`0.0`	-1…1	Added to warped FBM before clamping — positive widens coverage, negative opens the sky
`showsControls`	`Bool`	`false`	—	Demo-only gear ToolbarItem; requires an enclosing `NavigationStack`

Integration Checklist

Copy SWFractalClouds.swift and SWFractalClouds.metal into your Xcode target.
Confirm the deployment target is iOS 18+ / macOS 15+.
Use it as a ZStack background with .ignoresSafeArea() for full-bleed.
Pick a sky / cloud / warm tint palette that matches your brand — defaults are a twilight palette; for daylight set warmth: 0 and pick a brighter sky/cloud pair.
Keep to one full-screen instance per visible screen.

Notes / Gotchas

The shader runs two 5-octave FBM evaluations per pixel — cost is higher than the SWDots family. Keep to one full-screen instance.
zoom is clamped internally to >= 0.0001 to avoid division-style blowups in the noise lookup; setting it to 0 still renders cleanly.
The 5-octave FBM loop bound is static so the compiler can fully unroll it. Do not turn the octave count into a uniform.
When showsControls is true, the gear button is a native ToolbarItem — the call site must be inside a NavigationStack.