Suno producer mode

Concept prototype. Scene 1 adds Loop mode to the Create form. Scene 2 is the player: tap to keep, swipe left to refuse, and Regenerate uses kept elements as reference.

← alexkaravai.com

Spec

Chrome (status bar, header, cards, action rows, tab bar, player sheet) is traced from live Suno iOS captures dated 2026-10-09; the SUNO wordmark is an SVG trace of the home header. Accent ring on a row means kept as reference; it is not the live app's locked (paywalled) state.

Design decisions

Loop lives in Styles. Song / Loop is a segmented control at the top of the Styles card, where live already keeps style controls, not a new screen or top-level mode.
Kept means reference, not a stem toggle. Regenerate passes kept elements back to the model as reference; the rest, refused included, are regenerated. The glyph is a pin, not a padlock, because a padlock in Suno means paywalled. Nothing claims per-stem control the model does not have.
Refuse by swipe, undo by stub. Refuse is a swipe-left action on the row (or the long-press menu). The row fades in place into a struck-through stub with Undo, so the list never shifts and Undo lands where the row was.
Meters, not faders. Each row shows the element's hit pattern as a level meter. No volume or solo, so it reads as "keep what you want", not a mixer. The meter is segmented so it does not read as a slider. Mute is a listening aid for choosing, it does not change what Regenerate keeps.
The result is the player. Scene 2 reuses the live player sheet (grabber, cover, title row, pill actions) and swaps the scrubber for the bar counter and the About card for the Regenerate CTA. Cover compressed from the live 322pt frame so the Elements card is visible on open.

Motion

Timed frame by frame from a 60fps screen recording of the Suno iPhone app, Oct 15 2026.

Trigger	What moves	Duration, easing
Song / Loop switch	Producer row height and opacity	240ms, cubic-bezier(.4,0,.2,1)
BPM step	Value scales 1.0 to 0.95 to 1.0	80ms
Create button	Lit with Suno's moving fire gradient once the form has a prompt, as in the app	7s drift, loops
Create loop	Player sheet rises over the form; the form stays put (no card stack), as in the app	400ms, cubic-bezier(.32,.72,0,1)
Generating	Cover drifts through color, title reads Untitled, element names land one by one; status pill drops in from the top: “Your groove is on its way”, “Crafting your next hit”, then “Loop ready”	3s total (the app takes about 13s); pill in 300ms, out 150ms
Grabber swipe down, Escape	Sheet follows the finger, then drops	follow, 220ms after release
Key sheet	Half sheet rises over a dim	350ms in, 250ms out
Long-press menu	Grows from the press, folds back into it	about 280ms in, 150ms out
Playback	Beat dots, meters and the loop progress track at the chosen BPM	requestAnimationFrame, 454.5ms per beat at 132
Keep (tap, Enter, K)	2px accent ring, pin fills and turns accent, meter turns accent	150ms
Swipe left	Meter and pin follow the finger up to 72px, Refuse slides in from the right; past 50% of the row refuses	follow, 200ms settle
Mute (swipe right, menu, M)	Row dims, meter rests, element goes silent; still regenerated unless kept	150ms
Refuse	Row fades and shrinks to 0.97 in place, stub fades in; Undo holds for 5s	200ms, cubic-bezier(.4,0,.2,1)
Regenerate	Label names the scope (“Regenerate 5, keep Bass”); rows that are not kept drift through color under the same status pill, then new names land; kept rows hold still	1.5s
Download	Status pill “Preparing loop”, then “Saved to Files”	1.5s, then 1.5s
Reduced motion	Drift, pulses and slides off, state changes instant	prefers-reduced-motion