https://github.com/nsland/animatedmesh
Dynamic, themeable, and fully SwiftUI-powered animated mesh gradients
https://github.com/nsland/animatedmesh
ios macos mesh-gradients swiftui tvos watchos
Last synced: 3 months ago
JSON representation
Dynamic, themeable, and fully SwiftUI-powered animated mesh gradients
- Host: GitHub
- URL: https://github.com/nsland/animatedmesh
- Owner: NSLand
- License: mit
- Created: 2025-10-05T07:23:44.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-10-05T09:21:39.000Z (9 months ago)
- Last Synced: 2025-10-05T10:17:46.195Z (9 months ago)
- Topics: ios, macos, mesh-gradients, swiftui, tvos, watchos
- Language: Swift
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌀 AnimatedMesh
> **Dynamic, themeable, and fully SwiftUI-powered animated mesh gradients.**
> Add motion and color depth to your app’s backgrounds with ease.
---
## ✨ Overview
**AnimatedMesh** brings **live, evolving color gradients** to SwiftUI using the new `MeshGradient` API.
It’s lightweight, theme-based, and completely customizable — perfect for creating ambient motion backgrounds, onboarding screens, and modern Apple-style visuals.
> Think **App Store icons**, **Apple Music auroras**, or **macOS Sonoma wallpapers** — but made interactive and code-driven.
---
## 🧱 Installation
### Swift Package Manager
In **Xcode**:
1. Go to **File ▸ Add Packages...**
2. Enter the URL:
```
https://github.com/nsland/AnimatedMesh
```
3. Choose **Add Package**
Or manually in your `Package.swift`:
```swift
dependencies: [
.package(url: "https://github.com/nsland/AnimatedMesh", from: "1.0.0")
]
```
Then import it:
```swift
import AnimatedMesh
```
---
## 🧭 Usage
### Basic Example
```swift
import SwiftUI
import AnimatedMesh
struct ContentView: View {
var body: some View {
ZStack {
AnimatedMesh(theme: .auroraBlush)
.ignoresSafeArea()
VStack {
Text("Hello, Mesh!")
.font(.largeTitle)
.bold()
.foregroundStyle(.white)
}
}
}
}
```
---
### Custom Theme Example
```swift
let customTheme = MeshGradientColorTheme(
width: 4,
height: 4,
meshColors: [
.blue, .purple, .cyan, .blue,
.purple, .cyan, .blue, .purple,
.cyan, .blue, .purple, .cyan,
.blue, .purple, .cyan, .blue
]
)
```
Use it like this:
```swift
AnimatedMesh(theme: customTheme)
```
---
## 🎨 Built-in Themes
| Theme | Description |
|-------|--------------|
| `.auroraBlush` | Soft pinks, purples, and peaches for glowing backgrounds |
| `.dreamyPurple` | Serene lavender tones for calm, sleep-inspired UIs |
| `.moonlitViolet` | Deep blue-violet hues of a moonlit sky |
| `.twilightFlow` | Subtle purple gradients for elegant dark designs |
| `.auroraSleep` | Soothing purple and teal blend for tranquil animations |
| `.deepRest` | Muted purples for meditative or sleep apps |
| `.lavenderDream` | Gentle spa-like lavender tones |
| `.sunnyGold` | Bright golden and yellow hues for cheerful UIs |
| `.sunsetGlow` | Warm sunset reds and pinks |
| `.vibrantFlow` | Bold and dynamic palette for playful designs |
---
## ⚙️ Customization
You can easily adjust:
- `width` and `height` → number of mesh grid columns/rows
- `meshColors` → base colors of your theme
You can even create your own dynamic logic:
```swift
extension MeshGradientColorTheme {
static let oceanBreeze = MeshGradientColorTheme(
width: 3,
height: 3,
meshColors: [.blue, .teal, .mint, .cyan, .indigo, .blue, .mint, .cyan, .teal]
)
}
```
---
## 🪄 Accessibility
`AnimatedMesh` is purely decorative.
If used as a background, mark it as hidden from accessibility:
```swift
.accessibilityHidden(true)
```
---
## 💡 Requirements
| Platform | Minimum Version |
|-----------|----------------|
| iOS | 18.0 |
| macOS | 15.0 |
| tvOS | 18.0 |
| visionOS | 2.0 |
| watchOS | 11.0 |
- Requires **Swift 6.2** or later
- Uses SwiftUI’s native `MeshGradient` API
---
## 📸 Preview
---
## 📄 License
Licensed under the **MIT License**.
See [LICENSE](LICENSE) for details.