A Swift package for composable Metal shaders and holographic UI effects in SwiftUI.
butterflyShader.mov
Create holographic cards with composable shader effects:
import ShaderKit
HolographicCardContainer(width: 260, height: 380) {
CardContent()
.foil()
.glitter()
.lightSweep()
}The HolographicCardContainer provides:
- Device motion tracking via gyroscope
- Drag gesture for manual tilt control
- 3D rotation effects synchronized with tilt
- Dynamic shadow based on tilt angle
- Automatic shader context injection
Add ShaderKit to your project via Xcode:
- File → Add Package Dependencies
- Enter the repository URL
- Select your version requirements
Or add to your Package.swift:
dependencies: [
.package(url: "https://github.com/jamesrochabrun/ShaderKit.git", from: "1.0.0")
]ShaderKit provides 33 composable shader effects across 6 categories.
| Effect | Description | Parameters |
|---|---|---|
.foil() |
Rainbow foil overlay | intensity: Double = 1.0 |
.invertedFoil() |
Inverted foil with shine | intensity: Double = 0.7 |
.maskedFoil() |
Foil with masked area | imageWindow: SIMD4<Float>, intensity: Double = 1.0 |
.foilTexture() |
Fine diagonal line texture | imageWindow: SIMD4<Float> |
| Effect | Description | Parameters |
|---|---|---|
.glitter() |
Sparkle particle overlay | density: Double = 50 |
.multiGlitter() |
Multi-scale sparkle particles | density: Double = 80 |
.sparkles() |
Tilt-activated sparkle grid | - |
.maskedSparkle() |
Sparkles in masked area only | imageWindow: SIMD4<Float> |
.rainbowGlitter() |
Rainbow with luminosity blend | intensity: Double = 0.7 |
.shimmer() |
Metallic shimmer effect | intensity: Double = 0.7 |
| Effect | Description | Parameters |
|---|---|---|
.lightSweep() |
Sweeping light band | - |
.radialSweep() |
Rotating radial light sweep | - |
.angledSweep() |
Angled light sweep | - |
.glare() |
Following light hotspot | intensity: Double = 1.0 |
.simpleGlare() |
Simple radial glare | intensity: Double = 0.7 |
.edgeShine() |
Edge highlight effect | - |
| Effect | Description | Parameters |
|---|---|---|
.diamondGrid() |
Diamond grid pattern | intensity: Double = 1.0 |
.intenseBling() |
Maximum intensity diamond holo | - |
.starburst() |
Radial rainbow rays from center | intensity: Double = 1.0 |
.blendedHolo() |
Luminance-blended rainbow | intensity: Float = 0.7, saturation: Float = 0.75 |
.verticalBeams() |
Vertical rainbow beam pattern | intensity: Double = 0.7 |
.diagonalHolo() |
Diagonal lines with 3D depth | intensity: Double = 0.7 |
.crisscrossHolo() |
Criss-cross diamond pattern | intensity: Double = 0.7 |
.galaxyHolo() |
Galaxy/cosmos with rainbow overlay | intensity: Double = 0.7 |
.radialStar() |
Star pattern with radial fade | intensity: Double = 0.7 |
.subtleGradient() |
Large-scale subtle gradient | intensity: Double = 0.7 |
.metallicCrosshatch() |
Metallic sun-pillar with crosshatch | intensity: Double = 0.7 |
.spiralRings() |
Concentric spiral rings with metallic effect | intensity: Double = 0.8, ringCount: Double = 20, spiralTwist: Double = 0.5 |
| Effect | Description | Parameters |
|---|---|---|
.glassEnclosure() |
Plastic/glass layer with beveled edges | intensity: Double = 1.0, cornerRadius: Double = 0.05, bevelSize: Double = 0.7, glossiness: Double = 0.8 |
.glassSheen() |
Simple glass sheen overlay | intensity: Double = 0.7, spread: Double = 0.5 |
.glassBevel() |
Edge bevel with visual thickness | intensity: Double = 0.8, thickness: Double = 0.6 |
.chromaticGlass() |
Prismatic RGB separation at edges | intensity: Double = 0.6, separation: Double = 0.4 |
| Effect | Description | Parameters |
|---|---|---|
.snowfall() |
Falling snowflakes with twinkling stars | intensity: Double = 0.8, snowDensity: Double = 0.5, starDensity: Double = 0.6, primaryColor: SIMD4<Float>, secondaryColor: SIMD4<Float> |
.frozen() |
Icy silver shimmer with floating blue stars | intensity: Double = 0.85, starDensity: Double = 0.6, shimmerIntensity: Double = 0.8, iceColor: SIMD4<Float>, starColor: SIMD4<Float> |
Chain multiple effects to create unique combinations:
// Holographic trading card
HolographicCardContainer(width: 260, height: 380) {
CardContent()
.foil()
.glitter()
.lightSweep()
}
// Premium gold card with starburst
HolographicCardContainer(
width: 280,
height: 400,
shadowColor: .yellow,
rotationMultiplier: 12
) {
CardContent()
.starburst()
.radialSweep()
.multiGlitter()
}
// Psychic holographic effect
HolographicCardContainer(width: 280, height: 400, shadowColor: .purple) {
CardContent()
.foil()
.glitter()
.lightSweep()
}
// Layered effect with blended holo
HolographicCardContainer(width: 260, height: 364, shadowColor: .yellow) {
ZStack {
BackgroundLayer()
.blendedHolo(intensity: 0.7, saturation: 0.75)
SparkleLayer()
.sparkles()
ArtworkLayer()
}
.angledSweep()
}
// Glass-encased collectible card
HolographicCardContainer(width: 280, height: 400, shadowColor: .white.opacity(0.3)) {
CardContent()
.foil()
.glitter()
.glassEnclosure()
}
// Winter snowfall effect
HolographicCardContainer(width: 260, height: 380, shadowColor: .cyan) {
CardContent()
.snowfall(
primaryColor: SIMD4<Float>(0.3, 0.5, 0.7, 1.0),
secondaryColor: SIMD4<Float>(0.2, 0.4, 0.6, 1.0)
)
}
// Frozen ice magic effect
HolographicCardContainer(width: 260, height: 380, shadowColor: .cyan) {
CardContent()
.frozen(starDensity: 0.7, shimmerIntensity: 0.9)
}For custom tilt control without HolographicCardContainer:
CardContent()
.shaderContext(tilt: myTiltPoint, time: elapsedTime)
.shader(.foil(intensity: 0.8))
.shader(.glitter(density: 75))
.shader(.lightSweep)Apply effects using the generic .shader() modifier:
CardContent()
.shaderContext(tilt: tilt, time: time)
.shader(.foil(intensity: 0.8))
.shader(.glitter())
.shader(.lightSweep)Apply effects only to specific areas using UV coordinates:
// Define image window bounds (UV space 0-1)
let imageWindow = SIMD4<Float>(
0.04, // minX
0.11, // minY
0.96, // maxX
0.55 // maxY
)
CardContent()
.maskedFoil(imageWindow: imageWindow)
.maskedSparkle(imageWindow: imageWindow)
.foilTexture(imageWindow: imageWindow)- iOS 17.0+ / macOS 14.0+
- Swift 5.9+
- Xcode 15+
MIT License