SwiftGlow is a Swift Package for building animated glow borders and neon capsule effects with SwiftUI + Metal.

It is designed to closely mirror the configuration model of react-native-animated-glow, so presets and tuning workflows can be shared across React Native and Apple-platform projects with minimal translation.

• Metal-based renderer for high-performance per-pixel glow animation
• SwiftUI-first API with a simple .animatedGlow(...) modifier
• Config model compatible with the core shape of react-native-animated-glow
• Supports default, hover, and press state definitions
• Supports multi-layer glow composition
• Supports behind, inside, and over glow placement
• Includes a macOS demo app with a live parameter inspector
• Includes a one-click React Native glow JSON import workflow in the demo

This effect is fundamentally a fragment-shader problem:

• rounded-rect distance fields
• animated perimeter progress
• layered color gradients
• gaussian glow falloff

Metal is the right base for that workload. It keeps CPU overhead low, gives direct control over blending and timing, and scales better than stacking multiple blur/mask/material layers in SwiftUI or Core Animation.

• iOS 15+
• macOS 12+
• tvOS 15+

Add this package in Xcode or Package.swift:

dependencies: [
    .package(url: "https://github.com/margox/SwiftGlow.git", from: "0.1.0")
]

Then add the product to your target:

dependencies: [
    .product(name: "SwiftGlow", package: "SwiftGlow")
]

import SwiftUI
import SwiftGlow

struct DemoView: View {
    var body: some View {
        Text("Apple Intelligence")
            .font(.system(size: 22, weight: .bold))
            .foregroundStyle(.white)
            .padding(.horizontal, 52)
            .padding(.vertical, 22)
            .animatedGlow(
                states: GlowPresets.appleIntelligence.states,
                status: .default
            )
            .padding(40)
            .background(.black)
    }
}

The package mirrors the React Native library's configuration style.

import SwiftGlow

let states = [
    GlowState(
        name: .default,
        preset: .css(
            cornerRadius: 30,
            outlineWidth: 4,
            borderColor: [
                "rgba(238, 255, 0, 1)",
                "rgba(79, 255, 0, 1)",
                "rgba(46, 90, 255, 1)",
                "rgba(254, 0, 255, 1)",
                "rgba(231, 23, 23, 1)"
            ],
            backgroundColor: "rgba(10, 10, 10, 1)",
            animationSpeed: 1.2,
            borderSpeedMultiplier: 1,
            glowLayers: [
                GlowLayerConfig(
                    cssColors: [
                        "rgba(205, 201, 35, 1)",
                        "rgba(0, 255, 79, 1)",
                        "rgba(0, 119, 255, 1)",
                        "rgba(239, 0, 255, 1)",
                        "rgba(222, 28, 28, 1)"
                    ],
                    opacity: 0.2,
                    glowSize: [34],
                    speedMultiplier: 1,
                    glowPlacement: .behind,
                    coverage: 1,
                    relativeOffset: 0
                ),
                GlowLayerConfig(
                    cssColors: ["#FFFFFF"],
                    opacity: 0.2,
                    glowSize: [2, 8, 8, 2],
                    speedMultiplier: 2,
                    glowPlacement: .behind,
                    coverage: 0.5,
                    relativeOffset: 0
                )
            ]
        )
    ),
    GlowState(
        name: .hover,
        preset: .css(animationSpeed: 1.8),
        transition: 0.3
    ),
    GlowState(
        name: .press,
        preset: .css(animationSpeed: 2.4),
        transition: 0.1
    )
]

Apply it:

Text("Default Rainbow")
    .padding(.horizontal, 36)
    .padding(.vertical, 18)
    .foregroundStyle(.white)
    .animatedGlow(states: states, status: .default)

func animatedGlow(
    preset: GlowConfig = GlowConfig(),
    states: [GlowState],
    viewOverride: GlowConfig = GlowConfig(),
    status: GlowStatus,
    isVisible: Bool = true
) -> some View

Parameters:

For interactive controls such as buttons:

Button("Buy") {
    purchase()
}
.buttonStyle(.plain)
.animatedGlow(
    states: GlowPresets.neonGreen.states,
    status: .auto
)

status: .auto resolves .default while idle, .hover while the pointer is hovering, and .press while pressed. If both hover and press are active, .press wins.

There is still a deprecated activeState: overload for compatibility, but status: is the preferred public API now.

Config resolution order:

1. .default state preset
2. preset
3. viewOverride
4. selected state's preset

That merge order is implemented in GlowCompatibility.resolvedConfig(...). Scalar fields are overridden when the later config provides a value. glowLayers are merged by array index instead of replacing the entire array.

GlowConfig describes the border, background, and glow layers for one resolved state.

Notes:

• borderColor currently produces an animated border when two or more colors are provided.
• If glowLayers is omitted or empty, only the background and animated border are rendered.
• GlowConfig.css(...) accepts CSS-style strings and converts them into GlowColor values for convenience.

Each GlowLayerConfig defines one glow pass around the rounded rect.

glowSize expansion matches the React Native package:

• [a] -> [a, a, a, a]
• [a, b] -> [a, b, b, a]
• [a, b, c] -> [a, b, c, c]
• [a, b, c, d] -> [a, b, c, d]

transition is currently stored for compatibility with the React Native config model, but the SwiftUI wrapper does not yet animate interpolation between states. Changing activeState applies the resolved state immediately.

GlowColor(css:) and GlowConfig.css(...) currently accept:

• #fff
• #ffffff
• #ffffffff
• rgb(255, 0, 0)
• rgba(255, 0, 0, 0.5)
• transparent

Core public types:

• GlowColor
• GlowPlacement
• GlowEvent
• GlowStatus
• GlowLayerConfig
• GlowConfig
• GlowState
• PresetConfig
• GlowPresets
• AnimatedGlow

SwiftGlow is intentionally built around the same mental model as react-native-animated-glow.

Implemented compatibility rules:

• glowPlacement: behind | inside | over
• glowLayers are merged by array index
• default / hover / press state structure is supported
• CSS-style colors such as #fff, #ffffff, #ffffffff, rgb(...), and rgba(...) are supported
• seamless gradient sampling loops back to the first color

glowSize expansion matches the React Native package:

• [a] -> [a, a, a, a]
• [a, b] -> [a, b, b, a]
• [a, b, c] -> [a, b, c, c]
• [a, b, c, d] -> [a, b, c, d]

Built-in presets currently include:

• GlowPresets.appleIntelligence
• GlowPresets.neonGreen
• GlowPresets.rainbow
• GlowPresets.alert
• GlowPresets.vaporwave
• GlowPresets.glimmer

These are useful as references for creating your own effects and for validating rendering behavior.

The repository includes a macOS demo app with a live parameter editor.

Run it with:

swift run SwiftGlowDemo

Demo features:

• switch between built-in presets
• edit general glow parameters live
• add, duplicate, and remove glow layers
• edit per-layer placement, colors, sizes, coverage, speed, and offset
• switch preview state between default, hover, and press
• import JSON presets from react-native-animated-glow

The demo includes an Import RN JSON action. Paste a preset JSON document in the same shape as the React Native package:

{
  "metadata": {
    "name": "Default Rainbow",
    "textColor": "#FFFFFF"
  },
  "states": [
    {
      "name": "default",
      "preset": {
        "cornerRadius": 30,
        "outlineWidth": 4,
        "borderColor": ["#ff0", "#0f0", "#00f"],
        "backgroundColor": "rgba(10, 10, 10, 1)",
        "animationSpeed": 1.2,
        "borderSpeedMultiplier": 1,
        "glowLayers": [
          {
            "glowPlacement": "behind",
            "colors": ["#ff0", "#0f0", "#00f"],
            "glowSize": 34,
            "opacity": 0.2,
            "speedMultiplier": 1,
            "coverage": 1,
            "relativeOffset": 0
          }
        ]
      }
    }
  ]
}

The importer supports:

• metadata.name
• metadata.textColor
• states.default / hover / press
• transition in React Native milliseconds
• borderColor as a single string or array
• glowSize as a single number or array

What is solid today:

• package builds cleanly with SwiftPM
• unit tests cover compatibility helpers
• Metal shader rendering is wired and running
• demo import/edit workflow is in place

Current limitations:

• state transition timing is parsed and stored, but the SwiftUI wrapper does not yet animate interpolation between states the same way the React Native implementation does
• visual parity is close, but not yet validated by automated snapshot comparison against the React Native reference on multiple devices
• UIKit/AppKit-first wrappers are not exposed as public APIs yet; the primary experience is SwiftUI

Build:

swift build

Run tests:

swift test

Run the demo:

swift run SwiftGlowDemo

Sources/
  SwiftGlow/
    AnimatedGlow.swift
    GlowColor.swift
    GlowCompatibility.swift
    GlowConfiguration.swift
    GlowPresets.swift
    GlowRenderer.swift
    GlowUniforms.swift
    MetalGlowView.swift
    Resources/GlowShaders.metal
  SwiftGlowDemo/
    SwiftGlowDemoApp.swift
Tests/
  SwiftGlowTests/

• animated interpolation between default, hover, and press
• public preset import/export helpers outside the demo app
• snapshot-based visual regression tests
• more built-in presets
• performance tuning for large numbers of simultaneous glow views

SwiftGlow is inspired by realimposter/react-native-animated-glow. The package aims to bring a similar configuration model and animated glow aesthetic to SwiftUI and Metal.

MIT. See LICENSE.