How to Build a Custom Page View with Animated Dot Indicators in SwiftUI

What You Will Build

An animated rainbow gradient that continuously scrolls across text, creating the shimmering effect seen in Apple Intelligence branding. A wide linear gradient moves behind a text mask, creating the illusion of iridescent flowing color within the letterforms.

Why This Pattern Matters

Apple debuted this animated gradient text effect for Apple Intelligence at WWDC 2024. It has since appeared in Siri's new interface and various Apple marketing materials. The technique of masking an animated gradient with text is widely applicable to logos, headings, and premium UI elements.

Key SwiftUI Concepts

• LinearGradient with many color stops for a smooth rainbow effect.
• .mask { Text(...) } to clip the gradient to text shapes.
• .offset animation with repeatForever to scroll the gradient continuously.

Step 1: Define the Gradient Colors

The gradient uses a mix of subtle transparent colors at the edges and vivid colors in the center. This creates smooth fade-in and fade-out as the gradient scrolls:

let gradientColors: [Color] = [
    .yellow.opacity(0.1), .mint.opacity(0.2), .yellow.opacity(0.1),
    .purple, .orange, .pink, .purple, .cyan, .purple, .pink, .orange,
    .yellow.opacity(0.1), .mint.opacity(0.2), .yellow.opacity(0.1),
]

Step 2: Build the Scrolling Gradient

The gradient is made extremely wide (about 9x the screen width) so there is enough color range to scroll through seamlessly. The offset animates from far right to far left:

@State var animate = false

ZStack {
    LinearGradient(
        gradient: Gradient(colors: gradientColors),
        startPoint: .leading, endPoint: .trailing
    )
    .frame(width: UIScreen.main.bounds.width * 8.9, height: 400)
    .offset(x: animate ? UIScreen.main.bounds.width * -3.4
                       : UIScreen.main.bounds.width * 4)
    .animation(
        .linear(duration: 5).repeatForever(autoreverses: false),
        value: animate
    )
    .onAppear { animate = true }
}

Step 3: Apply the Text Mask

The .mask modifier clips the gradient to only show through the text letterforms. Two rotation effects add a slight angle to the gradient flow:

.rotationEffect(.degrees(20))
.rotationEffect(.degrees(180))
.mask {
    Text("Apple Intelligence")
        .font(.system(size: 40, weight: .bold))
}

How It Works Together

The gradient is positioned behind the text and animated with a simple horizontal offset. The text mask acts like a stencil, revealing only the gradient pixels that fall within the letter shapes. Because the gradient is so wide, the animation loops seamlessly without visible jumps. The rotation effects add a diagonal sweep angle to the color flow.

Tips and Pitfalls

• Use autoreverses: false for continuous one-directional flow. Reversing creates a back-and-forth effect that looks less like the Apple original.
• The gradient must be much wider than the text to prevent visible edges during the animation. A 9x multiplier provides smooth coverage.
• Duration of 5 seconds gives a calm, premium feel. Faster (2-3s) looks energetic but less elegant.
• Transparent edge colors (.opacity(0.1)) prevent harsh color transitions at the gradient boundaries.
• Performance: This is a single layer animation, so it performs well. However, avoid using it on many text elements simultaneously.
• Dynamic text: The mask text can be any string. Change it to your app name or brand for a custom splash screen effect.

iOS Version: iOS 15+