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 CreateVisualEffectsDemoApp → AppearanceEffectRenderer → Coordinator → SwiftUI 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
flowchart LR
N1["CreateVisualEffectsDemoApp"]
N2["AppearanceEffectRenderer"]
N3["Coordinator"]
N4["SwiftUI APIs"]
N1 --> N2
N2 --> N3
N3 --> N4
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
classDiagram
Ripple *-- Int : counter
Ripple *-- CGPoint : origin
Ripple *-- TimeInterval : time
Ripple *-- TimeInterval : amplitude
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
CreateVisualEffectsDemoAppis 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 |