Sample CodeiOS, iPadOS, Mac CatalystReviewed 2026-07-21View on Apple Developer

Creating visual effects with SwiftUI

At a glance

Item Summary
Purpose Add scroll effects, rich color treatments, custom transitions, and advanced effects using shaders and a text renderer.
App architecture A Metal, Swift sample with the source-visible chain CreateVisualEffectsDemoAppAppearanceEffectRendererCoordinatorSwiftUI APIs.
Main patterns Delegate or data-source callbacks, Coordinator, Binding-based state propagation
Project style 10 scanned source file(s) across Metal, Swift, organized around ranked entry, type, and file boundaries.
Execution model No structured execution marker indexed; callback threading requires source review.
State/event model Source-visible mechanisms: SwiftUI state property wrapper.
Key frameworks/packages SwiftUI, metal_stdlib; these are source dependencies, not architecture labels.

Project structure

Source bundle/
├── CreateVisualEffectsDemo/
│   ├── CreateVisualEffectsDemo/
│   │   ├── CreateVisualEffectsDemoApp.swift
│   │   ├── Ripple.swift
│   │   ├── ScrollTransitions.swift
│   │   ├── TextTransition.swift
│   │   ├── CustomTransition.swift
│   │   ├── MeshGradient.swift
│   │   ├── Ripple.metal
│   │   ├── Stripes.metal
│   │   ├── Stripes.swift
│   │   └── VisualEffects.swift
│   └── CreateVisualEffectsDemo.xcodeproj/
│       └── .xcodesamplecode.plist
└── Configuration/
    └── SampleCode.xcconfig

Structure observations

  • Architecturally prominent files are ranked from entry points and role-named declarations; resource-only paths are omitted.
  • Primary languages: Metal, Swift.
  • The verified tree contains 3 project/configuration file(s) and 15 source declaration(s).

Overall architecture

Reference code

CreateVisualEffectsDemo/CreateVisualEffectsDemo/CreateVisualEffectsDemoApp.swift:10 — architecture anchor

@main
struct CreateVisualEffectsDemoApp: App {
    var body: some Scene {
        WindowGroup {
            Text("You'll find the examples in the Xcode project's previews.")
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)
        }
    }
}

Interpretation

The arrows summarize the source-visible entry, role-named types or folders, and framework direction; when nodes come from structural folders, the sequence is a high-level interpretation rather than proof that every adjacent node calls the next. Ownership is claimed only where the next section cites a stored property or assignment. The diagram is intentionally limited to the dominant path into SwiftUI.

Ownership and state

Ownership evidence

CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.swift:11 — stored dependency or nearest verified ownership anchor

    @Previewable @State var counter: Int = 0
Owner Object or state Relationship Mutation authority
Ripple Int (counter) owns wrapper-managed state App/module collaborators
Ripple CGPoint (origin) owns wrapper-managed state App/module collaborators
Ripple TimeInterval (time) owns wrapper-managed state App/module collaborators
Ripple TimeInterval (amplitude) owns wrapper-managed state App/module collaborators

Composition arrows indicate a source-visible construction expression or locally owned value state; aggregation means the owner stores or receives a dependency without proving exclusive lifetime ownership.

Concurrency, scheduling, and thread safety

Evidence limit: actor isolation, async/await, or Task creation does not by itself prove background-thread execution; Sendable conformance alone does not prove thread-safe mutation.

No source-visible execution, scheduling, or synchronization boundary was found in the indexed source.

@MainActor/MainActor.run, DispatchQueue.main, and RunLoop.main are reported as distinct isolation, queue, and event-loop mechanisms. A plain Task is kept separate from Task.detached; neither is labeled as a background thread.

State propagation, frameworks, and dependencies

Evidence limit: an import proves a source-level compilation dependency at the cited line; it does not prove runtime use, architectural adoption, or whether a Swift package is a direct application dependency.

Category Mechanism or module Verified role Evidence
State propagation SwiftUI state property wrapper A SwiftUI property wrapper supplies or observes UI state. CreateVisualEffectsDemo/CreateVisualEffectsDemo/CustomTransition.swift:12
Source import SwiftUI The cited file imports this module; runtime use and architectural role are not inferred. CreateVisualEffectsDemo/CreateVisualEffectsDemo/CreateVisualEffectsDemoApp.swift:8
Source import metal_stdlib The cited file imports this module; runtime use and architectural role are not inferred. CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.metal:9

receive(on:) describes downstream delivery scheduling, while subscribe(on:) describes upstream subscription/request/cancel scheduling. An import Combine alone establishes neither behavior nor a Store, reducer, Redux, or other application architecture.

Class and protocol design

CreateVisualEffectsDemo/CreateVisualEffectsDemo/CreateVisualEffectsDemoApp.swift:11 — representative type boundary

@main
struct CreateVisualEffectsDemoApp: App {
    // ...
            Text("You'll find the examples in the Xcode project's previews.")
    // ...
}
Type Responsibility Depends on or conforms to
CreateVisualEffectsDemoApp Application entry and top-level composition App
Coordinator Cross-object flow or session coordination NSObject, UIGestureRecognizerDelegate
AppearanceEffectRenderer Owns drawing, GPU, or presentation processing TextRenderer, Animatable
PushEffect Represents a feature value or composable behavior Concrete collaborators/imported frameworks
RippleEffect Represents a feature value or composable behavior Concrete collaborators/imported frameworks
RippleModifier Represents a feature value or composable behavior ViewModifier
SpatialPressingGestureModifier Represents a feature value or composable behavior ViewModifier
SpatialPressingGesture Represents a feature value or composable behavior UIGestureRecognizerRepresentable
Photo Represents a feature value or composable behavior Identifiable
ItemPhoto Represents a feature value or composable behavior View

No local protocol conformance is claimed as protocol-oriented design; external framework conformances are listed only as dependencies.

Access control

Symbol Access Verified effect Likely rationale
CreateVisualEffectsDemoApp (CreateVisualEffectsDemo/CreateVisualEffectsDemo/CreateVisualEffectsDemoApp.swift:11) implicit internal No explicit modifier means the Swift declaration is internal to the module. Inference: app-target collaboration needs no exported library surface.
Coordinator (CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.swift:206) implicit internal No explicit modifier means the Swift declaration is internal to the module. Inference: app-target collaboration needs no exported library surface.
AppearanceEffectRenderer (CreateVisualEffectsDemo/CreateVisualEffectsDemo/TextTransition.swift:71) implicit internal No explicit modifier means the Swift declaration is internal to the module. Inference: app-target collaboration needs no exported library surface.
ScrollTransitions (CreateVisualEffectsDemo/CreateVisualEffectsDemo/ScrollTransitions.swift:8) implicit internal No explicit modifier means the Swift declaration is internal to the module. Inference: app-target collaboration needs no exported library surface.

Reference code

CreateVisualEffectsDemo/CreateVisualEffectsDemo/CreateVisualEffectsDemoApp.swift:11 — representative boundary

@main
struct CreateVisualEffectsDemoApp: App {
    // ...
            Text("You'll find the examples in the Xcode project's previews.")
    // ...
}

Swift declarations without a modifier are internal; explicit private, fileprivate, private(set), public, or open entries above are interpreted by language semantics. Objective-C/C samples instead rely on header and implementation boundaries, which are not equivalent to Swift lexical privacy.

Logic ownership and placement

Logic Owning type or file Placement rationale
Application entry and top-level composition CreateVisualEffectsDemoApp The source’s App suffix makes this role explicit.
Cross-object flow or session coordination Coordinator The source’s Coordinator suffix makes this role explicit.
Owns drawing, GPU, or presentation processing AppearanceEffectRenderer The source’s Renderer suffix makes this role explicit.

Design patterns

Pattern Source evidence Purpose or tradeoff
Delegate or data-source callbacks CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.swift:206 Callback protocols invert event delivery back into the sample’s owner.
Coordinator CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.swift:206 A role-named coordinator centralizes cross-object flow.
Binding-based state propagation CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.swift:216 A binding exposes controlled read/write access while the upstream owner remains authoritative.

Naming conventions

  • Types: App: CreateVisualEffectsDemoApp; Coordinator: Coordinator; Renderer: AppearanceEffectRenderer.
  • Protocols: no local protocol declaration in the scanned source.
  • Methods: body, onPressingChanged, gestureRecognizer, makeCoordinator, makeUIGestureRecognizer, handleUIGestureRecognizerAction, draw, elementDelay.
  • Files: CreateVisualEffectsDemo/CreateVisualEffectsDemo/CreateVisualEffectsDemoApp.swift, CreateVisualEffectsDemo/CreateVisualEffectsDemo/TextTransition.swift.

Architecture takeaways

  • CreateVisualEffectsDemoApp is the main source-visible entry or composition anchor for this sample.
  • Framework work reaches SwiftUI, metal_stdlib through a deliberately small high-level chain; the detailed API graph remains inside the cited implementation files.
  • Stored-property evidence identifies lifecycle collaboration; it does not by itself prove exclusive object ownership.
  • Access-control conclusions separate verified language visibility from the likely design rationale.
  • The source does not justify labeling the design protocol-oriented.

Source map

Source file Relevant symbols
CreateVisualEffectsDemo/CreateVisualEffectsDemo/CreateVisualEffectsDemoApp.swift Cited implementation, CreateVisualEffectsDemoApp, SwiftUI
CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.swift Cited implementation, Coordinator, PushEffect, RippleEffect, RippleModifier, SpatialPressingGestureModifier, SpatialPressingGesture
CreateVisualEffectsDemo/CreateVisualEffectsDemo/TextTransition.swift AppearanceEffectRenderer, EmphasisAttribute, TextTransition
CreateVisualEffectsDemo/CreateVisualEffectsDemo/ScrollTransitions.swift ScrollTransitions, Photo, ItemPhoto, ItemLabel
CreateVisualEffectsDemo/CreateVisualEffectsDemo/CustomTransition.swift SwiftUI state property wrapper, Twirl, Avatar
CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.metal metal_stdlib, Feature implementation
CreateVisualEffectsDemo/CreateVisualEffectsDemo/MeshGradient.swift Feature implementation
CreateVisualEffectsDemo/CreateVisualEffectsDemo/Stripes.metal Feature implementation
CreateVisualEffectsDemo/CreateVisualEffectsDemo/Stripes.swift Feature implementation
CreateVisualEffectsDemo/CreateVisualEffectsDemo/VisualEffects.swift Feature implementation