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.

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 {
    // ...
}

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.

Class and protocol design

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

struct CreateVisualEffectsDemoApp: App {
    // ...
}
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

struct CreateVisualEffectsDemoApp: App {
    // ...
}

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 CreateVisualEffectsDemoApp
CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.swift PushEffect, RippleEffect, RippleModifier, SpatialPressingGestureModifier, SpatialPressingGesture, Coordinator
CreateVisualEffectsDemo/CreateVisualEffectsDemo/ScrollTransitions.swift Photo, ItemPhoto, ItemLabel
CreateVisualEffectsDemo/CreateVisualEffectsDemo/TextTransition.swift EmphasisAttribute, AppearanceEffectRenderer, TextTransition
CreateVisualEffectsDemo/CreateVisualEffectsDemo/CustomTransition.swift Twirl, Avatar
CreateVisualEffectsDemo/CreateVisualEffectsDemo/MeshGradient.swift Feature implementation
CreateVisualEffectsDemo/CreateVisualEffectsDemo/Ripple.metal Feature implementation
CreateVisualEffectsDemo/CreateVisualEffectsDemo/Stripes.metal Feature implementation
CreateVisualEffectsDemo/CreateVisualEffectsDemo/Stripes.swift Feature implementation
CreateVisualEffectsDemo/CreateVisualEffectsDemo/VisualEffects.swift Feature implementation