Turn one transparent PNG into a frame-perfect animated filmstrip for audio-plugin GUIs — knobs, faders, sliders, and meters.
Free, forever. Open source. · Download · stripkit.pro · Features · Contributing
Audio-plugin GUIs animate knobs, faders, and meters with a filmstrip (a.k.a. sprite sheet): one tall PNG holding every frame of the control stacked top-to-bottom, where the plugin shows frame N for parameter value N. Hand-authoring those is tedious and error-prone.
StripKit does it for you. Feed it a single transparent PNG of your control and it
renders the whole strip — correctly rotated about the art's true centre, supersampled, and
crisp at every frame. It also imports existing strips (KnobMan exports, purchased
packs) to re-slice, re-stack, or resample them, processes a whole folder in batch, and can emit a
skin.json manifest that binds a strip to a parameter for a JUCE-style LookAndFeel
loader.
It's the asset-production companion to VybeCode's plugin GUI tooling — and it's free and open source under the MIT license.
Download the latest installer →
- Self-contained — no .NET runtime needed on the target machine.
- Per-user install: choose your folder, optional desktop + Start-Menu shortcuts, and a clean uninstaller that leaves nothing behind.
- Every release is VirusTotal-scanned (report + SHA-256 in the release notes). The installer is currently unsigned, so Windows SmartScreen may warn on first run — choose More info → Run anyway.
Prefer a one-page overview with the live download and changelog? See stripkit.pro.
- Rotary knobs — any sweep (270° / 300° / 360° / custom), rotated about the art's true centre so it spins clean — no wobble.
- Faders & sliders — vertical faders and horizontal sliders with pixel-accurate end margins.
- Meters — procedural LED segments or layered on/off art; four fill directions; discrete or continuous.
- Smart alignment — auto-detects the spin centre on load; a draggable crosshair lets you nail it by eye on a smooth 1024-step preview.
- Filmstrip importer — detects an existing strip's frame count and orientation, extracts a single frame, re-stacks it, or resamples it to a new frame count.
- Batch processing — point it at a folder and render the whole set off the UI thread, with progress and a working cancel.
skin.jsonmanifest — schema-valid output binding each strip to a parameter id (single control on export, or a multi-control skin from the Skin tab).- Crisp rendering — supersampling + a Mitchell cubic resampler keep rotated edges sharp;
one-toggle
@2xHiDPI export. - Live preview — scrub, play, or step frame-by-frame before you export.
| Area | Tech |
|---|---|
| Language / runtime | C# / .NET 9 |
| UI | Avalonia 11.3 — MVVM, compiled bindings |
| MVVM | CommunityToolkit.Mvvm 8.4 (source generators) |
| Rendering | SkiaSharp 3.119 (supersampling + Mitchell cubic) |
| DI | Microsoft.Extensions.DependencyInjection |
| Tests | xUnit · NSubstitute · FluentAssertions · Avalonia.Headless + golden-image regression |
| Packaging / CI | Inno Setup installer · GitHub Actions release pipeline · VirusTotal scan |
The renderer, importer, and manifest services have no Avalonia dependency, so they're
reusable in a CLI or build step — FilmstripEngine.cs (repo root) is a standalone,
copy-paste-portable copy of the renderer.
Requires the .NET 9 SDK. Builds and runs on Windows, macOS, and Linux (Avalonia); Windows is the primary target.
Note: The frosted acrylic glass effect is Windows-only. macOS and Linux use a solid dark fallback — the app is fully functional but visually different.
git clone https://github.com/Vybecode-LTD/stripkit.git
cd stripkit
dotnet run --project src/StripKit # launch the app
dotnet test # 98 testsBuild a self-contained Windows release:
dotnet publish src/StripKit -c Release -r win-x64 --self-contained true -o publishIf NuGet warns about a SkiaSharp version conflict with Avalonia, run
dotnet list package --include-transitive, find the SkiaSharp version Avalonia pulls, and match it insrc/StripKit/StripKit.csproj.
StripKit is a four-tab app: Create, Import, Batch, and Skin.
Create — single image → animated strip
- Load a source PNG (button or drag-and-drop onto the preview) — your transparent control art (a knob drawn pointing up at 12 o'clock; a fader/slider's moving cap).
- Pick the component type (knob / vertical fader / horizontal slider / meter) and the frame count (32 / 64 / 128 or custom; 64 is standard).
- Tune the per-type settings — rotary sweep & pivot, linear margins, or meter segments & fill direction — and align the knob centre with auto-center or the crosshair.
- Preview (scrub / play / step), then Export the stacked PNG (+ optional
@2xand askin.jsonmanifest).
Import — re-use an existing strip: load a strip; StripKit detects its layout (editable — detection is a guess), scrub to confirm min → max, then extract a frame, re-stack the orientation, or resample it to a new frame count.
Batch — a whole folder at once: choose input/output folders, set a render template, and
Run — each source becomes a strip (+ @2x / .skin.json) off-thread, with progress;
bad files are skipped and reported, and Cancel stops cleanly between files.
Skin — bind many strips into one skin.json: add controls from existing strips
(auto-detected) or blank, edit each control's id / type / parameter / bounds / value range,
set the skin-level metadata, and export one combined multi-control manifest.
Quality tips: give knob art ~10% transparent margin so corners don't clip on rotation; exported PNGs are 32-bit RGBA with a transparent background (the plugin paints the background, the filmstrip draws only the control).
Contributions are very welcome — bug reports, feature ideas, and pull requests alike.
Get oriented: read CLAUDE.md (conventions), docs/KICKOFF.md (a fast bootstrap),
docs/ARCHITECTURE.md (the deep design), and docs/SOURCE_MAP.md (a file-by-file map).
Workflow
- Fork the repo and branch off
main. - Make your change and add/update tests —
dotnet testmust stay green (currently 98). - Keep the house conventions:
- Don't rewrite
Services/SkiaFilmstripRenderer.cs; the rotation/supersampling math is deliberate (the(N-1)angle divisor is intentional — last frame lands exactly on max). Extend, don't replace. - If you touch the renderer math, mirror it in the standalone
FilmstripEngine.cs. - View models don't reference Avalonia UI types (the preview
Bitmapalias aside); use compiled bindings; re-use theApp.axamldesign tokens (Obsidian glass,#e8440aaccent, Verdana — no monospace). Don't hard-code hex.
- Don't rewrite
- Open a PR describing the change and referencing any issue it closes.
Found a bug? Open an issue with steps to reproduce (and the source PNG's dimensions for a
rendering/import bug). Fix tracking lives in docs/BUGS.md.
Releases are cut by maintainers via the automated pipeline (docs/PACKAGING.md) — you
don't need to touch versioning in a PR.
StripKit.sln
FilmstripEngine.cs standalone, portable renderer (not compiled by the app)
src/StripKit/
Program.cs, App.axaml entry point + composition root (DI), Obsidian design tokens
Models/ FilmstripSettings, FrameTransform, StripDetection, SkinManifest, BatchModels, CodeModels, RenderLayer, enums
Services/ renderer · importer · manifest · code-snippet · pointer-extractor · batch · image load · file dialog · export
ViewModels/ MainWindowViewModel (Create) · ImporterViewModel · BatchViewModel · SkinViewModel
Views/ MainWindow (TabControl) · ImporterView · BatchView · SkinView
tests/StripKit.Tests/ xUnit: renderer golden-image, alignment, VM, importer, manifest, batch, meter, value-arc, layered-knob, code-snippet, pointer-extractor
installer/StripKit.iss Inno Setup installer script
scripts/Invoke-Release.ps1 local release driver (Stage 1)
.github/workflows/ ci.yml — build + test · auto-release.yml — CI release creator (Stage 2)
docs/ ARCHITECTURE, SOURCE_MAP, ROADMAP, TESTING, CHANGELOG, BUGS, HANDOFF, AUDIT-LOG, PACKAGING, KICKOFF
MIT — free for personal and commercial use, forever. Use it, modify it, ship it; just
keep the copyright and license notice. See LICENSE.
© 2026 VybeCode Software · built with care at vybeco.de
- 🌐 Website — stripkit.pro
- 📦 Releases — github.com/Vybecode-LTD/stripkit/releases
- 🏷️ Developer — VybeCode Software · vybeco.de