InfographicKit

InfographicKit is a SwiftUI package for building visual, timed demonstrations. It gives you a reusable deck container, section tabs, phase navigation, playback controls, speed controls, and editable timing.

The included LinkEducationDemo executable is an example app: it uses InfographicKit to explain hard links, symbolic links, and APFS clones.

---

Requirements

macOS	14.0+
iOS	17.0+
Swift	5.9+
Dependencies	None

---

Installation

Swift Package Manager

In Xcode -> File -> Add Package Dependencies, paste:

https://github.com/InspiratioNULL/InfographicKit

Or in your own Package.swift:

dependencies: [
    .package(url: "https://github.com/InspiratioNULL/InfographicKit", from: "1.0.0"),
],
targets: [
    .target(name: "YourApp", dependencies: ["InfographicKit"]),
]

---

Usage

Build a custom demonstration

import InfographicKit
import SwiftUI

struct ContentView: View {
    let sections = [
        DemonstrationSection(
            title: "How Photos Sync",
            subtitle: "A visual walkthrough of upload, processing, and delivery.",
            symbolName: "photo.stack",
            accentColor: .cyan,
            phases: [
                DemonstrationPhase(
                    title: "Upload",
                    narration: "The device streams original bytes to the cloud.",
                    duration: 2,
                    symbolName: "icloud.and.arrow.up"
                ),
                DemonstrationPhase(
                    title: "Process",
                    narration: "The service creates thumbnails, metadata, and search indexes.",
                    duration: 3,
                    symbolName: "gearshape.2.fill"
                ),
            ],
            holdDuration: 1.5
        )
    ]

    var body: some View {
        DemonstrationDeck(
            title: "Photo Sync Demo",
            sections: sections
        ) { state in
            InfographicCallout(
                title: state.phase.title,
                message: state.phase.narration,
                symbolName: state.phase.symbolName ?? "info.circle.fill",
                color: state.phase.accentColor ?? state.section.accentColor
            )
        }
    }
}

Use the bundled visual components

HStack {
    InfographicNode("Input", symbolName: "tray.fill", color: .blue)
    InfographicArrow(label: "transform", color: .purple)
    InfographicNode("Output", symbolName: "shippingbox.fill", color: .green)
}

Run the demo app

swift run LinkEducationDemo

---

Core Types

Type	Purpose
DemonstrationDeck	Playback shell with tabs, phase rail, narration, speed, loop, and timing editor
DemonstrationSection	A chapter with title, subtitle, accent color, phases, and section hold duration
DemonstrationPhase	A narrated step with an adjustable duration
DemonstrationPlaybackState	The state snapshot passed to your visual closure
InfographicNode	Reusable labeled object tile
InfographicArrow	Reusable directional connector
InfographicMetric	Compact metric/stat tile
InfographicBlockGrid	Generic block/grid visualization
InfographicCallout	Highlighted explanatory callout

---

Design Notes

• SwiftUI-only and dependency-free.
• Works on macOS 14+ and iOS 17+.
• Playback uses Swift concurrency instead of Timer or Combine.
• Phase durations and section hold durations are editable directly in the running deck.
• The demo app is intentionally separate from the library target so the package can be reused for onboarding, product explainers, tutorials, technical education, and dashboards.