WWDC24AnimatedText

A SwiftUI package that renders text with a character-by-character animated font transition, inspired by the WWDC24 typography animation style.

Each character independently animates between two font states (size, weight, and width), creating a fluid ripple-like effect across the text.

Requirements

• iOS 17+ / macOS 14+ / tvOS 17+ / visionOS 1+
• Swift 5.9+
• Xcode 15+

Installation

Swift Package Manager

In Xcode, go to File → Add Package Dependencies and enter the repository URL:

https://github.com/mark-x64/WWDC24AnimatedText

Or add it to your Package.swift:

dependencies: [
    .package(url: "https://github.com/mark-x64/WWDC24AnimatedText", from: "1.0.0")
]

Usage

import SwiftUI
import WWDC24AnimatedText

struct ContentView: View {
    @State private var toggle = false

    var body: some View {
        VStack {
            WWDC24AnimatedTextView(
                "Hello, World!",
                toggle: toggle
            )

            Button("Animate") {
                toggle.toggle()
            }
        }
    }
}

Customization

WWDC24AnimatedTextView(
    "Hello, World!",
    toggle: toggle,
    animation: .bouncy,
    targetFontSize: 40,
    minimumFontSize: 30,
    targetFontWeight: .semibold,
    minimumFontWeight: .ultraLight,
    targetFontWidth: .expanded,
    minimumFontWidth: .compressed,
    delayBetweenSwitch: 3,   // seconds between the two animation phases
    delayBetweenCharacter: 2  // total seconds spread across all characters
)

Parameter	Type	Default	Description
toggle	Bool	—	Flip this value to trigger the animation
animation	Animation	.easeInOut	SwiftUI animation curve
targetFontSize	CGFloat	40	Font size in the "large" state
minimumFontSize	CGFloat	30	Font size in the "small" state
targetFontWeight	Font.Weight	.semibold	Font weight in the "bold" state
minimumFontWeight	Font.Weight	.ultraLight	Font weight in the "thin" state
targetFontWidth	Font.Width	.expanded	Font width in the "wide" state
minimumFontWidth	Font.Width	.compressed	Font width in the "narrow" state
delayBetweenSwitch	Double	3	Seconds between the two animation phases
delayBetweenCharacter	Double	2	Total seconds spread across all character delays

License

MIT