Back to AtesKit
UI Components

Visual Effects & Modifiers

AtesKit provides powerful visual effects, animations, and modifiers to create premium, engaging user experiences. From AI-themed gradients to mystical backgrounds.

Effect Categories

AI Effects (3)
Visual Effects (3)
Animations (2)
Layout Effects (1)

AKAIButtonLabel

AI Effects
A premium gradient label modifier with shimmer animation for AI-related content. Creates an animated rainbow gradient effect perfect for AI features.
USE CASES
AI-generated content labels
Premium feature badges
Status indicators for AI operations
Attention-grabbing labels
USAGE EXAMPLE
Swift
Text("AI Generated ✨")
    .akAIButtonLabel

AKAIButton

AI Effects
A premium AI button with animated gradient background, glow effect, and press animations. Features pulsing glow and gradient borders.
USE CASES
AI generation triggers
Premium AI feature buttons
ML model inference actions
Smart enhancement features
USAGE EXAMPLE
Swift
Button {
    // AI action
} label: {
    HStack {
        Image(systemName: "sparkles")
        Text("Generate with AI")
    }
}
.akAIButton

AKCardModifier

Visual Effects
A simple card modifier that adds rounded corners, background tint, and padding to create card-like containers.
USE CASES
Content containers
List items
Feature cards
Information panels
PARAMETERS
radius
AKRadius.Set
Default: .small
Corner radius of the card
tint
S: ShapeStyle
Default: HierarchicalShapeStyle.quinary
Background tint color
padding
AKPadding.Set
Default: .xxMedium
Internal padding
USAGE EXAMPLE
Swift
Text("Card Content")
    .akCard(
        radius: .medium,
        tint: Color.blue.opacity(0.1),
        padding: .large
    )

AKMysticalBackgroundView

Visual Effects
An immersive background with radial gradients creating a mystical nebula effect. Uses accent color for cohesive theming.
USE CASES
App backgrounds
Welcome screens
Premium feature sections
Onboarding flows
USAGE EXAMPLE
Swift
ZStack {
    AKMysticalBackgroundView()
    
    // Your content here
    VStack {
        Text("Welcome")
    }
}
.ignoresSafeArea()

// Or use the modifier:
ContentView()
    .makeAkMysticalBackground

AKSelectedEffect

Visual Effects
Adds a stroke border overlay when an item is selected. Perfect for selection states in grids, lists, or pickers.
USE CASES
Color pickers
Image selection
Grid item selection
Option selectors
PARAMETERS
isSelected
Bool
Whether the view is currently selected
radius
AKRadius.Set
Default: .small
Corner radius for the selection border
tint
S: ShapeStyle
Default: Color.primary
Color of the selection border
USAGE EXAMPLE
Swift
Circle()
    .foregroundStyle(.blue)
    .frame(width: 50, height: 50)
    .akSelected(
        isColorSelected,
        radius: .circular,
        tint: Color.white
    )
    .onTapGesture {
        isColorSelected.toggle()
    }

Shimmer Effect

Animations
An animated shimmering effect that moves across any view. Supports mask, overlay, and background modes with customizable gradients.
USE CASES
Loading placeholders
Skeleton screens
Processing indicators
Premium visual effects
PARAMETERS
active
Bool
Default: true
Enable/disable the shimmer effect
animation
Animation
Default: AKShimmer.defaultAnimation
Custom animation timing
gradient
Gradient
Default: AKShimmer.defaultGradient
Custom shimmer gradient
bandSize
CGFloat
Default: 0.3
Size of the shimmer band (0-1)
mode
AKShimmer.Mode
Default: .mask
Shimmer mode: .mask, .overlay, or .background
USAGE EXAMPLE
Swift
// Loading state
VStack {
    Text("Loading...")
        .font(.title)
    Text(String(repeating: "Content", count: 5))
        .redacted(reason: .placeholder)
}
.shimmering()

// Custom gradient
Text("Premium Feature")
    .shimmering(
        gradient: Gradient(colors: [
            .clear, .orange, .white, .green, .clear
        ]),
        bandSize: 0.5,
        mode: .overlay()
    )

AKStretchyHeader

Layout Effects
Creates a header that stretches when pulled down (like Instagram/Twitter profiles) and sticks to the top when scrolling up.
USE CASES
Profile headers
Hero images
Parallax effects
Detailed views
PARAMETERS
height
CGFloat
Default: 300
Default height of the header
coordinateSpace
CoordinateSpace
Default: .named("AKStretchyScroll")
Coordinate space for scroll tracking
USAGE EXAMPLE
Swift
ScrollView {
    VStack(spacing: 0) {
        // Stretchy header
        Image("profileHeader")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .makeStretchy(height: 300)
        
        // Content
        VStack {
            Text("Profile Content")
        }
        .padding()
    }
}
.coordinateSpace(name: "AKStretchyScroll")
.ignoresSafeArea(edges: .top)

AuroraLoadingView

Animations
A mesmerizing aurora-like loading animation with moving gradient blobs. Uses blend modes for smooth, colorful transitions.
USE CASES
Splash screens
Loading states
Background animations
Processing indicators
PARAMETERS
animationToggle
Binding<Bool>
Binding to control animation start/stop
USAGE EXAMPLE
Swift
@State private var isLoading = true

AuroraLoadingView(animationToggle: $isLoading)
    .frame(width: 300, height: 300)
    .clipShape(RoundedRectangle(cornerRadius: 20))

AKMeshingAIProgressView

AI Effects
Siri-style animated mesh gradient progress indicator. Creates organic, flowing mesh animations perfect for AI/ML operations.
USE CASES
AI processing states
ML inference loading
Smart feature activation
Premium loading indicators
PARAMETERS
triggerAnimation
Binding<Bool>
Binding to trigger the animation
radius
Double
Default: 4
Corner radius of the effect
USAGE EXAMPLE
Swift
@State private var isProcessing = false

RoundedRectangle(cornerRadius: 12)
    .foregroundStyle(.ultraThinMaterial)
    .frame(width: 200, height: 200)
    .akMeshingAIProgressView(
        triggerAnimation: $isProcessing,
        radius: 12
    )
    .onTapGesture {
        isProcessing.toggle()
    }

Best Practices

Performance: Use .drawingGroup() for complex animations to leverage GPU rendering
Consistency: Always use AKRadius and AKPadding constants for effect parameters
Theming: Effects like AKMysticalBackgroundView automatically use accent color for cohesive theming
Accessibility: Provide alternative non-animated states when appropriate