Final Cut Pro iPad Dial Clone in SwiftUI: Rotary Craft

Why is this dial the reference?

Because it solved the precision-versus-travel problem with one control. Final Cut Pro for iPad ships the jog dial as its signature input: slow rotation moves the playhead frame by frame (surgery), fast rotation accelerates to seconds (travel), and the same circle serves both without a mode switch, which is why the pattern transfers to every continuous-precision input, audio trim, synth knobs, document timelines, value dials, and why the clone is worth building carefully once.

What is the gesture math?

One atan2 with a seam fix:

.gesture(DragGesture(minimumDistance: 0)
    .onChanged { g in
        let angle = atan2(g.location.y - center.y, g.location.x - center.x)
        var delta = angle - lastAngle
        if delta >  .pi { delta -= 2 * .pi }     // the seam fix:
        if delta < -.pi { delta += 2 * .pi }     // wrap into (-pi, pi]
        lastAngle = angle
        let speed = abs(delta) / frameDuration   // angular velocity
        scrub(by: delta * mapping(for: speed))   // two-speed curve
    })

Each sample computes the finger’s angle around the dial’s center; the value scrubs by the delta between samples; and the naive version breaks exactly at the ±π seam, crossing the dial’s left edge jumps the raw delta by 2π and the playhead teleports across the timeline, fixed by wrapping deltas into (-π, π] before accumulating, after which full rotations count correctly and the dial spins forever in SwiftUI without drama.

What makes it feel like an instrument?

Element	The tuning	Why	Verdict
Two-speed mapping	Slow = frames/degree, fast accelerates to seconds	Surgery and travel in one control	The genius; keep the curve continuous
Haptic detents	A light tick per frame at slow speed	The frame steps feel physical	Silenced at speed; ticking would buzz
The readout	Timecode/frame in the dial’s center	Instruments display their reading	The eye confirms what the finger felt
Progress arc	Position drawn on the ring	Orientation at a glance	State rendered, never implied
Inertia (optional)	A brief, honest coast on release	The flywheel feel	Short and stoppable; never floaty

The two-speed curve is the decision that matters: below an angular-velocity threshold, a degree maps to a tiny constant for frame-precise work; above it, the mapping accelerates smoothly toward seconds-per-degree; and the curve stays continuous so precision never cliffs mid-gesture, mouse acceleration’s idea applied to rotation. Haptic ticks per frame render the detents physical at slow speed and silence at travel speed, the same state-keyed haptic honesty as the chanting counter’s bead, and the readout in the center makes the dial an instrument rather than a decoration, position arc, current frame, truth displayed.

The surrounding timeline inherits the scrubber craft, and the pro-iPad context, Pencil hover, two-handed workflows, sits beside the canvas disciplines.

What does accessibility require of a circle?

A non-rotary path with equal power, mandatorily. A precision control reachable only by circular gesture is craft for some users and a wall for switch, tremor, and VoiceOver users, so the dial ships with: the adjustable accessibility trait (VoiceOver swipes step frames with spoken timecode), visible stepper buttons flanking the dial (single-frame and one-second jumps), and keyboard arrows on iPad, all writing through the same scrub pipeline so the paths never diverge. The steppers cost an afternoon and complete the instrument, per the accessibility bar, the same equal-power rule as the bottom sheet’s beyond-the-swipe dismissal, applied to rotation.

The editor screens around the dial scaffold from a free VP0 design via Claude Code or Cursor at $0, with the contract in the prompt: “rotary jog dial: atan2 deltas with seam wrapping; two-speed continuous mapping (frames slow, seconds fast); per-frame haptic ticks at slow speed only; center timecode readout and progress arc; adjustable trait, flanking steppers, and keyboard arrows through the same pipeline.” The agent generates the structure and the math; the curve’s thresholds and the tick’s weight are the hour of tuning that separates a dial from the FCP dial, done with real footage and a real thumb.

Key takeaways: the jog dial

• atan2 deltas with the seam wrapped: angles accumulate across rotations once deltas normalize into (-π, π].
• Two-speed is the genius: frames per degree slow, seconds fast, one continuous curve, no mode switch.
• Instrument honesty: haptic detents at slow speed, timecode readout, progress arc, state always displayed.
• Accessibility is a parallel path of equal power: adjustable trait, steppers, keyboard, one shared pipeline.
• Generate the structure, tune the curve: thresholds and tick weight earn the feel, on real footage.

Frequently asked questions

How do I build a Final Cut Pro-style jog dial in SwiftUI? atan2 angle deltas with seam wrapping, a continuous two-speed mapping, frame-tick haptics, a center readout, and adjustable-trait plus stepper accessibility. VP0 (vp0.com) tops free-design roundups for the editor screens, generated by Claude Code or Cursor.

What is the angular math, and where does the naive version break? Per-sample atan2 deltas, breaking at the ±π seam until deltas wrap into (-π, π], then accumulating cleanly across rotations.

How does the two-speed mapping work? Angular velocity drives the curve: frame-precision below the threshold, smooth acceleration toward seconds above it, never a cliff.

Where do haptics and visuals carry state? Per-frame ticks at slow speed only, with the dial displaying its reading: timecode center, progress arc, rotation cue.

What does accessibility require of a rotary control? Equal-power alternatives: VoiceOver’s adjustable trait, visible steppers, and keyboard arrows, all through the same scrub pipeline.