SoundPulseButton

A highly customizable SwiftUI button component with audio level visualization and various visual effects including pulse rings, ripple waves, shimmer effects, and more.

Visual Effects

SoundPulseButton provides multiple customizable visual effects that activate during different states:

Core Effects

Inner Pulse Rings - Animated circles that scale from the center, responding to audio levels with staggered delays
Ripple Waves - Expanding wave effects that emanate from the button's current radius during listening state
Icon Shimmer - Radial gradient shimmer overlay that sweeps across the icon with configurable timing
Loading Animation - Rotating ring indicator that appears around the button during loading state
Background Rotation - Smooth rotation of the gradient background when in listening mode

Audio-Responsive Features

Real-time Scaling - Button and icon dynamically scale based on audio level input (0.0 to 1.0)
Progressive Opacity - Shimmer effect intensity increases with audio level
Staggered Animations - Multiple pulse rings animate with calculated delays for smooth wave effect

Features

Audio Level Visualization: Real-time scaling based on audio level input
Pulse Rings: Animated inner circles that scale with audio level
Ripple Waves: Expanding wave effects that start from the current button radius
Shimmer Effect: Radial gradient shimmer overlay on the icon
Loading State: Rotating loading indicator
Press Effects: Scale and opacity changes with haptic feedback
Background Gradient: Customizable multicolor gradient with rotation
RTL Support: Works with right-to-left layouts
Fully Configurable: Every aspect can be customized through configuration

Installation

Swift Package Manager

Add the following to your Package.swift file:

dependencies: [
    .package(url: "https://github.com/mikhailkogan17/SoundPulseButton", from: "0.1.0")
]

Or add it through Xcode:

File → Add Package Dependencies
Enter the repository URL
Select version and add to target

Example

Try it in seconds: Example project is located in Example/SoundPulseButtonExample.xcodeproj.

Basic Usage

import SoundPulseButton

SoundPulseButton(
    isListening: viewModel.isListening,
    isLoading: viewModel.isLoading,
    audioBufferProvider: audioProvider,
    onTap: handleMicrophoneTap
)

Configuration Methods

Size Presets

// Small button
SoundPulseButton(...)
    .withConfiguration(.small())

// Large button  
SoundPulseButton(...)
    .withConfiguration(.large())

// Custom size
SoundPulseButton(...)
    .withSize(60)

Background Colors

// Static Colors
SoundPulseButton(...)
    .withBackground(
        idle: .color(.accentColor),
        listening: .color(.red)
    )

// Mesh Gradient
SoundPulseButton(...)
    .withBackground(
        idle: .mesh([.purple, .indigo, .cyan]), 
        listening: .mesh([.purple, .indigo, .cyan])
    )

Icon

SoundPulseButton(...)
    .withIcon(Image(systemName: "mic.fill"))

Effects Configuration

The package includes an interactive example showcasing all available effects:

Background Rotation - Rotates gradient background during listening
Icon Shimmer - Adds shimmer effect to the icon
Inner Circles - Shows pulsing inner circles
Ripples - Creates expanding ripple waves
Haptic Feedback - Enables tactile feedback on interactions
Shadow Effects - Customizable drop shadows

// Configure inner pulse rings
SoundPulseButton(...)
    .withInnerCircles(count: 3)

// Configure ripple waves
SoundPulseButton(...)
    .withRipples(count: 3)

// Configure background rotation
SoundPulseButton(...)
    .withBackgroundRotation(idle: false, listening: true)

// Configure haptic feedback
SoundPulseButton(...)
    .withHaptic(enabled: true)

// Configure shimmer effect
SoundPulseButton(...)
    .withIconShimmering()

// Configure shadow
SoundPulseButton(...)
    .withShadow()

Configuration Structure