Home

Awesome

<p align="center"> <a href="https://github.com/metasidd/Orb"> <img src="https://img.shields.io/github/v/release/metasidd/Orb?style=flat&label=Swift%20Package%20Index&color=red"/> </a> <a href="https://github.com/metasidd/Orb/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/metasidd/Orb?style=flat"/> </a> <a href="https://swiftpackageindex.com/metasidd/Orb"> <img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fmetasidd%2FOrb%2Fbadge%3Ftype%3Dplatforms"/> </a> <a href="https://swiftpackageindex.com/metasidd/Orb"> <img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fmetasidd%2FOrb%2Fbadge%3Ftype%3Dswift-versions"/> </a> </p>

🔮 The Orb - SwiftUI

A beautiful, highly customizable animated orb component using SwiftUI. Create mesmerizing, interactive orbs with glowing effects, particles, and dynamic animations.

https://github.com/user-attachments/assets/181b5041-df59-40ed-b71b-a9f91292ce0a

(Inspired by Apple's Siri Animations, and OÄŸuz's Tweet!)

Installation

Swift Package Manager

Add Orb as a dependency to your project through Xcode:

  1. Go to File > Add Package Dependencies
  2. Enter the repository URL: https://github.com/metasidd/Orb.git
  3. Click Add Package

Or add it to your Package.swift file:

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

Usage

Basic Implementation

import Orb
import SwiftUI

struct ContentView: View {
    var body: some View {
        OrbView()
            .frame(width: 200, height: 200)
    }
}

Highly Customizable

image

The OrbView can be customized using OrbConfiguration:

let configuration = OrbConfiguration(
    backgroundColors: [.purple, .blue, .pink], // Custom gradient colors
    glowColor: .white,                         // Glow effect color
    particleColor: .white,                     // Particle effect color
    coreGlowIntensity: 1.2,                   // Intensity of the core glow
    showBackground: true,                      // Toggle background visibility
    showWavyBlobs: true,                      // Toggle organic movement elements
    showParticles: true,                      // Toggle particle effects
    showGlowEffects: true,                    // Toggle glow effects
    showShadow: true,                         // Toggle shadow effects
    speed: 60                                 // Animation speed
)

OrbView(configuration: configuration)
    .frame(width: 200, height: 200)

Available Configuration Options

PropertyTypeDefaultDescription
backgroundColors[Color][.green, .blue, .pink]Colors used for the gradient background
glowColorColor.whiteColor of the glow effects
particleColorColor.whiteColor of the particle effects
coreGlowIntensityDouble1.0Intensity of the core glow effect (higher = brighter)
showBackgroundBooltrueShows/hides the gradient background
showWavyBlobsBooltrueShows/hides organic movement elements
showParticlesBooltrueShows/hides particle effects
showGlowEffectsBooltrueShows/hides glow effects
showShadowBooltrueShows/hides shadow effects
speedDouble60Animation speed (higher = faster)

Preset Configurations

Explore these beautiful configurations to see what you can achieve. Copy any of the presets below to use in your own project, and feel free to customize them to match your vision.

// Mystic
let mysticOrb = OrbConfiguration(
    backgroundColors: [.purple, .blue, .indigo],
    glowColor: .purple,
    coreGlowIntensity: 1.2
)

// Nature
let natureOrb = OrbConfiguration(
    backgroundColors: [.green, .mint, .teal],
    glowColor: .green,
    speed: 45
)

// Sunset
let sunsetOrb = OrbConfiguration(
    backgroundColors: [.orange, .red, .pink],
    glowColor: .orange,
    coreGlowIntensity: 0.8
)

// Ocean
let oceanOrb = OrbConfiguration(
    backgroundColors: [.blue, .cyan, .teal],
    glowColor: .cyan,
    speed: 75
)

// Minimal
let minimalOrb = OrbConfiguration(
    backgroundColors: [.gray, .white],
    glowColor: .white,
    showWavyBlobs: false,
    showParticles: false,
    speed: 30
)

// Cosmic
let cosmicOrb = OrbConfiguration(
    backgroundColors: [.purple, .pink, .blue],
    glowColor: .white,
    coreGlowIntensity: 1.5,
    speed: 90
)

// Fire
let fireOrb = OrbConfiguration(
    backgroundColors: [.red, .orange, .yellow],
    glowColor: .orange,
    coreGlowIntensity: 1.3,
    speed: 80
)

// Arctic
let arcticOrb = OrbConfiguration(
    backgroundColors: [.cyan, .white, .blue],
    glowColor: .white,
    coreGlowIntensity: 0.75,
    showParticles: true,
    speed: 40
)

// Shadow
let shadowOrb = OrbConfiguration(
    backgroundColors: [.black, .gray],
    glowColor: .gray,
    coreGlowIntensity: 0.7,
    showParticles: false
)

Requirements

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.