Every setting in the Create tab, in order

Render Presets

Save and restore the entire Create-tab render setup as a named preset. A preset captures type, frames, sweep, layout, parameter law, meter/arc settings, and export toggles — it never captures loaded art (source, background, base/pointer, or imported layers).

• Preset list — a list of saved preset names; selecting one enables Apply and Delete.
• Apply — restores every field the preset carries in a single batch, then re-renders once. Does not load or clear any art.
• Delete — removes the selected preset from both the visible list and persisted settings, matched by the specific preset object so duplicate-named presets can't desync.
• New preset name — text field for the name to save under; empty by default.
• Save — saves the current full render setup under the typed name, overwriting an existing preset of the same name (case-insensitive), then clears the field and selects the new preset.

Source Image

The single transparent-PNG control art most component types animate.

• Load source image… — opens a file picker (drag-and-drop onto the preview does the same thing). For a rotary knob, loading auto-detects and centers the rotation pivot on the opaque content; for other types it resets the center to 0.5, 0.5. Also squares the frame to the loaded art.
• Source info readout — reads "No image loaded." until a file is loaded, then shows filename and pixel dimensions, e.g. "knob.png — 512×512px".

Component Type

Chooses which of the six control kinds you're producing. Switching types applies type-specific defaults and changes which sections below are visible.

• Component type — one dropdown: Rotary Knob (default), Vertical Fader, Horizontal Slider, Meter, Button, Toggle. Changing it resets Frame Width/Height to that type's defaults, and for Button/Toggle forces Frame Count to 2 — so switching types after manually tuning frame size silently resets it.

Frames

How many discrete frames the exported strip contains.

• Frame count — numeric field, default 64, range 2–512. More frames means a smoother sweep and a larger file.
• 32 / 64 / 128 — three preset buttons that set Frame Count to the standard values in one click.

Frame Size (1x, px)

The pixel dimensions of one frame cell at 1x, before any HiDPI scale is applied.

• Width — numeric field, default 80, range 1–4096.
• Height — numeric field, default 80, range 1–4096.
• Match frame to source size — does nothing if no source is loaded. For a rotary knob it squares the frame to the larger of the source's width/height; for a vertical fader it sets width to source width + 8px and height to source height × 6; for a horizontal slider it sets width to source width × 6 and height to source height + 8px.

Rotation (rotary knobs only)

Only visible when Component Type is Rotary Knob. Controls the angular sweep the knob travels across the frame sequence.

• Sweep (degrees) — numeric field, default 270, range 1–360, step 5. Recomputes Start/End angle symmetrically around 0 each time you change it.
• 270° / 300° / 360° — three preset buttons that set Sweep directly.
• Clockwise (min → max) — checkbox, default on. When checked, Start angle is negative half the sweep and End is positive half; unchecking flips which end is negative. Also recomputes Start/End on toggle.

Center (alignment) — rotary knobs only

Sets the rotation pivot so an off-center knob spins in place instead of orbiting.

• Auto-center on content — only enabled when a source is loaded. Re-runs content detection to reset Center X/Y to the opaque-pixel centroid and reports the result in the status bar.
• Enable crosshair — checkbox, default off. Shows a draggable crosshair over the preview for manual center placement; supersampling drops to 1 while it's on for responsiveness.
• Center X (0–1) — numeric field, default 0.5, range 0–1, step 0.01. Normalized horizontal pivot position.
• Center Y (0–1) — numeric field, default 0.5, range 0–1, step 0.01. Normalized vertical pivot position.
• Reset to image centre — sets Center X/Y back to 0.5, 0.5.

Value Arc / Fill Ring (rotary knobs only)

An optional value-tracking arc, in the style of Serum or Vital, baked onto every knob frame.

• Add a value arc that tracks the value — checkbox, default off. Reveals the rest of this section when checked.
• Radius (0–1) — numeric field, default 0.88, range 0.1–1.2. Fraction of the frame's inscribed radius; ~0.88 sits just outside a typical knob body, 1.0 rings the frame edge.
• Thickness (px) — numeric field, default 4, range 0.5–64.
• Arc colour (#AARRGGBB) — hex text field, default #FFE8440A (the house accent). Invalid hex falls back to the default.
• Round end caps — checkbox, default on. Round vs. flat (butt) arc ends.
• Dim track behind — checkbox, default on. Draws a faint full-sweep track behind the lit fill so the unfilled remainder is visible; reveals the track colour field below when checked.
• Track colour (#AARRGGBB) — hex text field, default #33FFFFFF, only shown when Dim track behind is checked.
• Gradient along the arc — checkbox inside the "Gradient & glow" expander, default off. Turns the lit arc into a sweep gradient from Arc colour to Gradient end colour.
• Gradient end colour — hex text field, default #FFFFC107, only shown when Gradient along the arc is checked.
• Glow — checkbox, default off. Adds a soft blurred under-stroke glow in the arc colour.
• Glow size (px) — numeric field, default 6, range 0–64, only shown when Glow is checked.

Layered Knob (base + pointer) — rotary knobs only

An alternative to a single flat source image: a static base body plus a separately rotating pointer, so the body stays crisp at any resolution. There are three mutually exclusive ways to populate it — import a real layered file, auto-extract from a flat image, or load base and pointer by hand — and loading one discards the others.

• Import layered file (SVG / PSD)… — opens a picker for .svg/.psd/.psb, parses named layers off the UI thread, squares the frame to the imported canvas, and auto-detects the merged rotation center. Replaces the manual base/pointer slots and any previous import.
• Per-layer behaviour dropdown — one row per imported layer, showing its name and a Static/Rotate/Frame dropdown you can override; only shown once a layered file is imported.
• Clear import — disposes and clears the imported layer stack; only shown once a layered file is imported.
• Auto-extract from flat knob… — opens a picker, then splits a single flat knob image into a static base and rotating pointer via a radial-symmetry residual, immediately filling the Base/Pointer slots and reporting a confidence percentage. Works best on a round knob with one indicator drawn at the minimum (frame-0) position, and there is no preview-before-commit step — verify by scrubbing afterward.
• Load base (body)… — loads the static base/body layer, discards any imported layer stack, squares the frame to it, and auto-detects its content center (which also seeds the pointer's default pivot).
• Clear base — disposes/clears the base layer; only enabled once one is loaded.
• Base layer info readout — reads "None." until loaded, then shows filename and dimensions.
• Load pointer layer… — loads the rotating pointer drawn on top of the base, discarding any imported layer stack.
• Clear pointer — disposes/clears the pointer layer; only enabled once one is loaded.
• Pointer info readout — reads "None." until loaded.
• Pointer pivot X (0–1) — numeric field, default 0.5, range 0–1, only shown once a pointer is loaded. Normalized horizontal rotation pivot within the pointer's own art.
• Pointer pivot Y (0–1) — numeric field, default 0.5, range 0–1, only shown once a pointer is loaded.
• Center pointer on body — resets the pointer's pivot to the base's detected center (the knob axis); only shown once a pointer is loaded.
• Start angle (frame 0) — numeric field inside the "Advanced angles / pivot" expander, default -135, range -360 to 360. Editing it directly does not recompute Sweep (degrees) above.
• End angle (last frame) — numeric field in the same expander, default 135, range -360 to 360.
• Pivot offset X — numeric field in the same expander, default 0, range -2048 to 2048. An additional raw-pixel nudge added on top of the content-center pivot, for deliberately eccentric rotation.
• Pivot offset Y — numeric field in the same expander, default 0, range -2048 to 2048.

Travel (fader / slider only)

Only visible when Component Type is Vertical Fader or Horizontal Slider. The loaded source image is treated as the moving cap; the Frame Size above defines the full track area.

• Edge margin (px) — numeric field, default 4, range 0–512. Gap left at each end of the cap's travel.
• Cap cross-axis offset (px) — numeric field, default 0, range -512 to 512. Offsets the cap on its non-travel axis.
• Auto-center cap on content — same underlying command as the knob's centering button; re-detects the content center for cross-axis centering. Only enabled with a source loaded.
• Enable crosshair — the same crosshair alignment tool used for knobs, reused here for cap centering.

Button / Toggle States

Only visible when Component Type is Button or Toggle. Each frame here is a discrete UI state rather than a position or rotation transform.

• Import layered file (SVG / PSD)… — the same import command as the knob's layered import, but in this context each imported layer maps one-to-one to a frame index by ordinal position among Frame-tagged layers (off = 0, on = 1, and so on), not by rotation. A shared Static border or shadow layer doesn't count toward the frame index.
• Per-layer behaviour dropdown — same mechanism as the knob's layered-import list; lets you override Static/Rotate/Frame per layer (a layer left as Rotate is simply never drawn in the button/toggle path — it won't appear on any frame — so re-tag it to Static or Frame). Only shown once a layered file is imported.
• Clear import — clears the imported layer stack; only shown once one is imported.

A button/toggle filmstrip has one frame per state — frame 0 off, frame 1 on, plus optional frame 2 (pressed) and frame 3 (disabled). A toggle is just the off/on pair. Set Frame Count above to match the number of states you need. To supply the art, import a layered SVG or PSD with groups named off and on (or state0, state1, and so on) — each group renders only on its matching frame. The Generate tab can produce this button/toggle art directly from your own AI key.

Meter

Only visible when Component Type is Meter. Renders a progressive segment-fill indicator, either procedurally as colored bars or from loaded on/off-state art.

• Segments — numeric field, default 12, range 1–128. Number of LED-style bars for a procedural meter.
• Fill direction — dropdown, default Up. Options: Up, Down, Left to Right, Right to Left.
• Continuous (smooth) fill — checkbox, default off. When checked, the meter fills smoothly instead of snapping to whole segments — this interacts directly with Segments, since a segment count only matters when this is unchecked.
• On colour (#AARRGGBB) — hex text field, default #FFE8440A (house accent). Procedural lit-segment colour.
• Off colour — hex text field, default #FF2A2A2A. Procedural unlit-segment colour.
• Peak marker (highlight the top segment) — checkbox, default off. Highlights the topmost/leading lit segment in the Peak colour, baked per-frame into the filmstrip — it is not a live peak-hold behavior at runtime.
• Peak colour (#AARRGGBB) — hex text field, default #FFFFFFFF, only shown when Peak marker is checked.

A meter is procedural (colored segment bars) by default. Load a Source Image as the on-state art — and optionally a Background as the off-state/track art — to switch to a layered meter that reveals real art up to the value instead.

Static Background (optional)

A fixed backdrop drawn behind the animated element on every frame. Most relevant for meters as the off-state/track art, but usable with any component type.

• Load background layer… — opens a file picker and loads a static background drawn behind every frame.
• Clear background — disposes/clears the background image; only enabled once one is loaded.
• Background info readout — reads "None." until loaded, then shows filename and dimensions.

Quality & Output

Rendering quality, sprite packing layout, and HiDPI export scale.

• Supersample (anti-aliasing) — dropdown, default 4. Options: 1, 2, 4, 8. Internal oversampling factor during render; export always uses the full value even though the live preview may temporarily cap it lower for responsiveness.
• Sprite layout — dropdown, default Strip. Options: Strip (a single 1×N strip along the stack direction) or Grid (an R×C sprite atlas).
• Grid columns — numeric field, default 8, range 1–512, only shown when Sprite layout is Grid. Rows are computed as the frame count divided by this, rounded up.
• Stack direction — dropdown, default Vertical, options Vertical or Horizontal, only shown when Sprite layout is Strip (it's hidden entirely under Grid layout). Frames stack vertically by default: frame 0 is the minimum value, frame N-1 is the maximum.
• Also export a HiDPI copy — checkbox, default on. Writes a second, upscaled PNG suffixed by the selected scale (for example @2x).
• Scale — dropdown, default 2, options 2, 3, 4 (i.e. @2x/@3x/@4x), only shown when Also export a HiDPI copy is checked. Drives the export suffix, the render/upscale multiplier, and the manifest's declared hi-res asset.

Parameter Law (advanced)

Remaps each frame's position in the sweep to match a plugin's actual parameter law — for example a logarithmic frequency taper — instead of a straight linear divisor. The mapping applies uniformly to knob rotation, layered-knob pivot, meter fill, and the value arc.

• Frame mapping curve — dropdown, default Linear. Options: Linear, Skew, Logarithmic. Linear is a true no-op — it returns every value completely unchanged, so all pre-existing renders stay byte-identical.
• Skew exponent — numeric field, default 1.0, range 0.1–10, only shown when the curve is Skew. A power-law exponent using the same convention as JUCE's NormalisableRange skew factor; values below 1 front-load resolution toward the low end, values above 1 push it toward the high end.
• Log base — numeric field, default 9.0, range 1.1–1000, only shown when the curve is Logarithmic. Higher values compress the low end more aggressively — useful for frequency-style parameters.

Manifest (optional)

Optionally writes a skin.json sidecar describing the exported control for a JUCE LookAndFeel or skin loader.

• Also write a skin.json manifest — checkbox, default on.
• Parameter id — text field, default empty (falls back to the export file's base name if left blank).

This writes <name>.skin.json next to the exported PNG — one control bound to this parameter, ready to hand to a JUCE LookAndFeel or skin loader.

Code Export (loader snippets)

Emits ready-to-paste source code that loads the exported filmstrip and displays the frame matching a 0..1 value, for five target frameworks.

• Also emit ready-to-paste loader code — checkbox, default off. Reveals the per-target checkboxes below when checked.
• JUCE — checkbox, default on. Emits a JUCE LookAndFeel filmstrip Slider (or meter Component).
• CSS / HTML — checkbox, default on. Emits a CSS/HTML sprite control driven by background-position, plus a JS value setter.
• iPlug2 — checkbox, default off. Emits an IBKnobControl/IBSliderControl/IBitmapControl snippet.
• HISE — checkbox, default off. Emits a ScriptPanel with a filmstrip paint routine.
• React / Web — checkbox, default off. Emits a .jsx sprite component driven by a 0..1 value prop, for WebView-based plugin GUIs (JUCE WebView, iPlug2 WebUI, Cmajor).
• Preview / copy code — an expander containing a live preview of one target's generated snippet.
• Target picker — dropdown inside the expander, default Juce, options Juce/Css/IPlug2/Hise/React. Selects which target is shown in the read-only preview below — it does not change which targets get exported (the checkboxes above control that).
• Code preview — a read-only, monospaced text box showing the live-updating snippet for the selected preview target.
• Copy to clipboard — copies the currently previewed snippet text.

Export writes a loader file per ticked target next to the PNG (.juce.h / .html / .iplug2.cpp / .hise.js / .jsx). Each file loads the strip and shows one frame per value.

Render Recipe (offline 3D)

For path-tracing the control in an external 3D renderer such as Blender, KeyShot, or Octane, this exports a recipe so the offline render frames land on exactly the same angles as StripKit's own sweep math. The resulting frame sequence is later stacked into a strip on the Assemble tab.

• Preview / save render recipe — an expander containing the recipe target picker, live preview, save, and copy controls.
• Recipe target — dropdown, default Blender, options Blender/Csv/Json. Blender emits a bpy script that bakes a keyframe on every one of the N frames (exact angles, no interpolation drift) plus a 0..1 "value" custom property for non-rotary rigs; CSV/JSON emit an engine-agnostic frame,value,angle_deg table. All three share the same per-frame math the renderer uses, so the recipe and the runtime output can't drift apart.
• Recipe preview — a read-only text box showing the live-updating recipe text for the selected target.
• Save recipe… — opens a folder picker and saves the recipe file (for example <id>.blender.py, <id>.frames.csv, or <id>.frames.json) into it.
• Copy to clipboard — copies the currently previewed recipe text.

Preview Pane, Transport & Export

The right-hand column: a live-rendered preview image that also accepts dropped files, scrub/playback transport, live frame and dimension readouts, the export button, and a post-export folder shortcut.

• Preview image area — shows the current rendered frame and doubles as a drop zone for a PNG (the same load path as Load source image…); its border highlights briefly while a file is dragged over it.
• Previous frame — icon button; stops playback and steps the scrub position back one frame.
• Play / Stop — toggles animated playback of the preview scrub position.
• Next frame — icon button; stops playback and steps the scrub position forward one frame.
• Reset — icon button; resets the scrub position to the centred start frame.
• Scrub slider — default 0.5, range 0–1. Scrubs the normalized value range; internally the preview resamples at a fixed 1024-step virtual resolution regardless of the real Frame Count, so scrubbing looks smooth even at a low frame count.
• Frame readout — text showing the current frame index and count, plus the rotary angle (for knobs) or a percentage (for other types), reflecting the Parameter Law mapping.
• Strip dimensions readout — live-computed total exported pixel dimensions, e.g. "Strip: 80×5120px · @2x: 160×10240px", including the HiDPI variant if that export is enabled.
• Status message — rolling feedback text for the most recent action: load, center, export, or an error. Defaults to "Load a source image to begin."
• Export filmstrip PNG — renders and saves the stacked PNG (plus the HiDPI copy, skin.json manifest, and ticked code snippets if those options are on). Also bound to Ctrl+E.
• Show in folder — opens the OS file explorer at the exported file. Only enabled after a successful export in the current session, and only while that file still exists.