ShaderKit

ShaderKit

A Swift package for composable Metal shaders and holographic UI effects in SwiftUI.

Demos:

https://github.com/user-attachments/assets/6f813c40-f022-4874-ad97-d83cda51747f

Quick Start

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

Installation

Swift Package Manager

Add ShaderKit to your project via Xcode:

1. File → Add Package Dependencies
2. Enter the repository URL
3. Select your version requirements

Or add to your Package.swift:

dependencies: [
    .package(url: "https://github.com/jamesrochabrun/ShaderKit.git", from: "1.0.0")
]

The package ships three library products — depend only on what you need:

• ShaderKit — the composable Metal shader primitives and holographic containers
• ShaderKitUI — ready-made interactive components (jelly switch, jelly button)
• ShaderCards — Pokémon-style holographic trading cards built on ShaderKit (see ShaderCards)

⚠️ Adding this Swift Package does NOT install the trading-card skill

The library (added via SPM, above) and the agent skill are two separate things. Coding agents do not scan Swift Package checkouts for skills, so adding ShaderKit as a dependency will never install or activate the skill — there is nothing to "also install the skill" as part of adding the package.

The skill is a Claude Code plugin, installed independently of your SPM setup (once per machine):

/plugin marketplace add jamesrochabrun/ShaderKit
/plugin install shaderkit@shaderkit

Then it's available as shaderkit:trading-card. Full details in Agent skill: trading-card.

Available Shaders

ShaderKit provides 52 composable shader effects, including holographic, glass, metallic, material, seasonal, paper, and interactive 3D treatments.

Foil Effects

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>

Glitter & Sparkle

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

Light Effects

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	-

Holographic Patterns