Strudel Visuals

SkillAI & models

Add psychedelic visual feedback to Strudel patterns. Use when you want trippy, colorful, or informative visualizations.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Strudel Visuals skill

What this skill tells your AI

The instructions your AI receives, as published by renatoworks/strudel-claude in .claude/skills/visuals/SKILL.md and read by ahel’s review.

Make your patterns come alive with visual feedback. Always add visuals - music should be seen, not just heard.


Quick Start

// Inline visuals (multiple allowed, rendered in code)
note("c a f e")._pianoroll()
note("c a f e")._spiral()
s("bd sd")._scope()

// Background visuals (one at a time, full page)
note("c a f e").pianoroll()

Rule: Use _ prefix for inline visuals (can stack multiple), no prefix for background.


Color Your Patterns

Everything starts with .color() - it affects highlighting AND visuals.

// Single color
note("c a f e").color("cyan")

// Pattern colors (cycles through)
note("c a f e").color("cyan magenta yellow")

// Hex colors
note("c a f e").color("#ff00ff #00ffff #ffff00")

// Neon acid palette
.color("cyan magenta yellow #ff6600")

// Vaporwave
.color("#ff71ce #01cdfe #05ffa1 #b967ff")

// Fire
.color("#ff0000 #ff6600 #ffff00")

Pianoroll / Punchcard

Scrolling note visualization. The bread and butter of live coding visuals.

// Basic
note("c a f e")._pianoroll()

// Full acid mode
note("c2 eb2 f2 g2")
  .color("cyan magenta")
  ._pianoroll({
    smear: 1,           // Notes leave trails (TRIPPY!)
    cycles: 8,          // Show more cycles
    labels: 1,          // Show note names
    active: "#ff00ff",  // Active note color
    inactive: "#00ffff", // Inactive note color
    vertical: 1,        // Vertical mode
    fold: 1,            // Notes fill full width
  })

All Pianoroll Options

OptionTypeDefaultEffect
smearbool0Notes leave solid trails
foldbool0Notes take full width
cyclesint4Cycles visible at once
verticalbool0Vertical orientation
labelsbool0Show note labels
playhead0-10.5Playhead position
flipTimebool0Reverse scroll direction
flipValuesbool0Flip note positions
activecolor#FFCA28Active note color
inactivecolor#7491D2Inactive note color
backgroundcolortransparentBackground color
playheadColorcolorwhitePlayhead line color
fillbool0Fill all notes
fillActivebool0Fill active notes only
strokebool0Show note borders
hideInactivebool0Only show active notes
colorizeInactivebool1Use pattern color for inactive
autorangebool0Auto-fit note range
minMidiint10Min note displayed
maxMidiint90Max note displayed

Trippy Pianoroll Recipes

// Smeared neon trails
._pianoroll({ smear: 1, active: "#ff00ff", inactive: "#00ffff" })

// Vertical waterfall
._pianoroll({ vertical: 1, smear: 1, cycles: 16 })

// Minimal active-only
._pianoroll({ hideInactive: 1, fillActive: 1, cycles: 2 })

// Full labels
._pianoroll({ labels: 1, fill: 1, autorange: 1 })

Spiral

Circular visualization - hypnotic and mesmerizing.

// Basic
note("c a f e")._spiral()

// Trippy spiral
note("c a f e")
  .color("#ff6600 #ff00ff #00ffff")
  ._spiral({
    steady: 0.96,       // Less jumpy (0-1)
    logSpiral: 1,       // Logarithmic spiral (COOL!)
    thickness: 4,       // Line thickness
    fade: 1,            // Fade past/future
    stretch: 2,         // Rotations per cycle
  })

All Spiral Options

OptionTypeDefaultEffect
steady0-10Smoothness (0.96 = smooth)
logSpiralbool0Logarithmic spiral
fadebool1Fade past/future
stretchnum1Rotations per cycle
sizenum-Spiral diameter
thicknessnum-Line thickness
insetnum3Rotations before start
paddingnum-Space around spiral
capstringbuttLine ends: butt/round/square
playheadColorcolorwhitePlayhead color
playheadLengthnum0.02Playhead size
activeColorcolor-Active segment color
inactiveColorcolor-Inactive segment color
colorizeInactivebool0Use pattern colors

Trippy Spiral Recipes

// Logarithmic hypnosis
._spiral({ logSpiral: 1, steady: 0.96, thickness: 6 })

// Tight fast spiral
._spiral({ stretch: 4, steady: 0.9, fade: 0 })

// Thick colorful
._spiral({ thickness: 8, colorizeInactive: 1, steady: 0.96 })

Scope (Oscilloscope)

Real-time waveform visualization - see your sound.

// Basic
s("sawtooth")._scope()

// Styled scope
s("sawtooth")._scope({
  color: "#00ff00",    // Matrix green
  thickness: 4,        // Thicc lines
  scale: 0.5,          // Zoom in on waveform
})

All Scope Options

OptionTypeDefaultEffect
colorcolorwhiteLine color
thicknessnum3Line thickness
scalenum0.25Y-axis zoom
alignbool1Align to zero crossing
pos0-1-Y position on screen
triggernum0Alignment amplitude

Scope Recipes

// Neon green matrix
._scope({ color: "#00ff00", thickness: 4 })

// Hot pink
._scope({ color: "#ff00ff", thickness: 5, scale: 0.6 })

// Subtle background
._scope({ color: "#ffffff33", thickness: 2 })

Spectrum (Frequency Analyzer)

See the frequencies - bass on the left, treble on the right.

// Basic
s("supersaw")._spectrum()

// Styled
s("supersaw")._spectrum({
  thickness: 3,
  speed: 2,           // Scroll speed
  min: -60,           // Min dB
  max: 0,             // Max dB
})

Pitchwheel

Pitch circle for visualizing notes within an octave.

n("0 .. 12").scale("C:chromatic")._pitchwheel()

Combining Visuals

Stack multiple inline visuals for maximum impact.

setcpm(130/4)

// Bass with smeared pianoroll
$: note("c2 eb2 f2 g2".fast(2))
  .s("sawtooth").lpf(800)
  .color("cyan magenta")
  ._pianoroll({ smear: 1, cycles: 8 })

// Drums with scope
$: s("bd sd hh hh").bank("RolandTR909")
  ._scope({ color: "#00ff00", thickness: 4 })

// Lead with spiral
$: n("0 3 7 10".fast(2)).scale("C:minor").s("square")
  .color("#ff6600 #ff00ff")
  ._spiral({ logSpiral: 1, steady: 0.96 })

// Pad with spectrum
$: chord("<Cm7 Fm7>").voicing().s("supersaw")
  ._spectrum({ thickness: 2 })

Acid Visual Presets

Neon Rave

.color("cyan magenta yellow")
._pianoroll({ smear: 1, active: "#ff00ff", inactive: "#00ffff" })

Matrix

.color("#00ff00")
._pianoroll({ smear: 1, active: "#00ff00", inactive: "#003300", vertical: 1 })

Vaporwave

.color("#ff71ce #01cdfe #05ffa1 #b967ff")
._spiral({ logSpiral: 1, steady: 0.96, thickness: 5 })

Fire

.color("#ff0000 #ff6600 #ffff00")
._pianoroll({ smear: 1, active: "#ffff00", inactive: "#ff3300" })

Minimal Techno

.color("white")
._pianoroll({ hideInactive: 1, fillActive: 1, cycles: 2 })

Pro Tips

  1. Always use steady: 0.96 on spirals - makes them smooth
  2. smear: 1 is the secret sauce for trippy pianorolls
  3. Match colors to your vibe - neon for acid, muted for ambient
  4. logSpiral: 1 makes spirals way cooler
  5. Combine visuals - pianoroll + scope + spiral = full experience
  6. Use .color() patterns - colors that change with notes

Philosophy

If it sounds good, it should look good.

Visuals aren't decoration - they're part of the performance. Let people see the music breathe.

Signals

GitHub stars
63
Forks
7
Last commit
Feb 2026
Advanced
Catalog kind
skill
Gateway key
visuals
Source
github.com/renatoworks/strudel-claude