Lottie and sprite-sheet players for Unity 6 UI Toolkit. LottieImage and SpriteAnimation custom VisualElements; pure-C# Lottie renderer; reads Sprite Editor slices; Theme Switcher tinting.Animation content authored outside Unity — Lottie JSON from After Effects, sprite sheets from frame-by-frame tools, branded logo animations from your designer — has no native home in UI Toolkit. You drop in a UIDocument and find no way to drag a Lottie file onto a panel. Sprite sheets need a UV-rect helper you write from scratch. Frame-by-frame icon animations live on Animator components that UI Toolkit can't bind to.This asset is the missing import layer. Two custom VisualElements drop straight into UXML: `` plays Lottie JSON via a pure-C# managed renderer, and `` plays sprite sheets via the standard Unity Sprite Editor workflow with no manual Columns/Rows entry. Zero allocations during steady-state playback. No native plugins required.Lottie playback in three lines.```var lottie = new LottieImage { Asset = myLottieAsset, AutoPlay = true, Loop = true };lottie.OnComplete += () => Debug.Log("loop finished");parent.Add(lottie);```Drag a `.lottie.json` file into your project and Unity's custom importer turns it into a `LottieAnimationAsset` with parsed metadata (frame rate, frame count, dimensions, markers). Drop the asset onto a `` element and it plays. Full control surface: `Play`, `Pause`, `Stop`, `GoToFrame`, `GoToProgress`, `Speed`, plus events for `OnPlay`, `OnPause`, `OnStop`, `OnComplete`, `OnFrame`, and `OnMarker`.Pure C# renderer — no native plugins.The managed Lottie renderer paints image layers and shape layers (ellipse, fill) with animated transforms (position, anchor, scale, rotation, opacity) directly through UI Toolkit's Painter2D and child VisualElements. Parent-chain transforms cascade correctly so nested layers inherit their parent's scale and rotation. Designed for branded logo animations, icon flourishes, and UI accents — the kind of content most mobile and desktop apps actually use.Sprite sheets the way Unity already works.```xml```Slice your sheet in Unity's Sprite Editor (Grid By Cell Count) and drop the resulting `Texture2D` onto a `` element. The asset auto-detects the slice sub-assets via `AssetDatabase` and plays each `Sprite`'s own rect — no Columns/Rows entry, no double-bookkeeping with what you already told Unity. For un-sliced PNGs, the grid-mode fallback uses `Columns`/`Rows` attributes from UXML or inspector overrides.Three loop modes plus sub-range playback.```sprite.Loop = LoopMode.PingPong;sprite.PlayRange(8, 15); // play frames 8–15 of a multi-pose sheetsprite.SetFrames(spriteList); // or supply a hand-curated frame list````Once` / `Loop` / `PingPong` for the playback pattern. `PlayRange(start, end)` for sheets that pack multiple animations on one texture (walk left, walk right, idle, attack — pick any range). Sprite-list mode (`SetFrames`) when you have pre-curated sprites that aren't in a grid. Frame tags via `SetFrameTag` fire callbacks at specific frames for game logic.Zero allocations during steady-state playback.`SpriteAnimation` adjusts UV rect via `background-position` and `background-size` — single texture, no per-frame allocation, batch-friendly. A single PlayerLoop hook ticks all live elements; no MonoBehaviour per animation. Stop a panel, swap UIDocuments, destroy a scene — the runtime cleans up automatically.Theme-aware logos via the optional Theme Switcher integration.If you also own UI Toolkit: Theme Switcher, one extension method recolors a Lottie logo to match the active theme:```themeManager.BindLottieTint(logo, "--color-brand-primary");```The tint applies to both raster image layers and vector shape fills, and follows live theme switches automatically. The binding cleans itself up when the element leaves its panel. The integration ships disabled by default — enable it from Tools > KrookedLilly > Theme Switcher Setup (one row toggles the main API, a second row toggles the bundled Lottie demo binder).Four demo scenes included.**SpriteBasicDemo** — drop any sliced sheet onto the controller; the demo plays it with Play / Pause / Stop / Prev Frame / Next Frame controls and a live frame readout. **SpriteLoopModesDemo** — same sheet rendered three times side-by-side in `Once`, `Loop`, and `PingPong` modes. **SpritePlayRangeDemo** — four-direction walk cycle on a single sheet (Left / Right / Forward / Backward); each button calls `PlayRange` to switch the active row without reloading the texture. Frame ranges are Inspector-configurable to fit any sheet's row layout. **LottieLogoDemo** — `.lottie.json` playback with Play / Pause / Stop / 0.5× / 1× / 2× speed controls plus a tint row (Red / Cyan / Amber) demonstrating the `TintColor` property. All four scenes ship with controller scripts, UXML, USS, and configured panel settings.Plays well with the rest of the UI Toolkit Components suite.`` and `` are ordinary `VisualElement`s, so they compose with the rest of the suite naturally. Drop a Lottie inside a UI Toolkit: Screen Manager screen — it auto-pauses when the screen detaches. Inside a UI Toolkit: Modal & Notifications overlay — it works without special handling. Bind its properties (`Asset`, `IsPlaying`, `Speed`, `CurrentFrame`, `TintColor`) via UI Toolkit: Data Binding — standard UITK bindings work out of the box. UI Toolkit: Focus & Navigation receives focus events on either element when `focusable="true"`.Cross-asset integrations ship disabled by default and are enabled from a Setup panel — open Tools > KrookedLilly > Motion Importer Setup to toggle the integrations that consume from Motion Importer, or use the deep-link buttons there to jump to a sibling's panel.Works on every platform.Verified on Mac Standalone IL2CPP. Uses standard Unity AOT and `UnityEngine.UIElements` — supported on iOS, Android, WebGL, and consoles via the standard AOT path.Full C# source, no DLLs.XML documentation on every public API. Zero external dependencies.Lottie- `LottieImage` custom `VisualElement` with `[UxmlElement]` attribute generator support- UXML attributes: `asset`, `auto-play`, `loop`, `speed`, `direction`, `render-width`, `render-height`, `tint-color`- C# API: `Asset`, `AutoPlay`, `Loop`, `Speed`, `Direction`, `TintColor`, `IsPlaying`, `CurrentFrame`, `TotalFrames`, `Duration`, `Progress`- Playback methods: `Play`, `Pause`, `Stop`, `GoToFrame(int)`, `GoToProgress(float)`- Events: `OnPlay`, `OnPause`, `OnStop`, `OnComplete`, `OnFrame(int)`, `OnMarker(string)`- `LottieAnimationAsset` ScriptableObject created by the custom `ScriptedImporter` for `.lottie.json` files- Managed renderer: parses the JSON via hand-rolled `MiniJson` (no Newtonsoft dependency) into a typed `LottieDocument`, renders image layers via child `VisualElement` + raster textures and shape layers (ellipse + fill) via Painter2D- Supported Lottie subset: image layers (`ty=2`), shape layers (`ty=4`) with `el` (ellipse) and `fl` (fill) items, animated transforms (anchor, position, scale, rotation, opacity) with linear keyframe interpolation, parent-chain transform inheritance, embedded base64 image assets- Native renderer slot (`INativeLottieRenderer`) lets buyers drop in their own rasterizer for the parts the managed renderer doesn't cover; the registry picks it over the managed path automaticallySprite Sheet- `SpriteAnimation` custom `VisualElement` with `[UxmlElement]` attribute generator support- UXML attributes: `sheet`, `columns`, `rows`, `total-frames`, `frames-per-second`, `auto-play`, `loop`, `play-on-visible`- C# API: `Sheet`, `Columns`, `Rows`, `TotalFrames`, `FramesPerSecond`, `Speed`, `Loop`, `IsPlaying`, `CurrentFrame`- Playback methods: `Play`, `Pause`, `Stop`, `GoToFrame(int)`, `PlayRange(start, end)`, `SetFrames(IList)`, `SetFrameTag(frame, tag)`- Events: `OnComplete`, `OnFrame(int)`, `OnFrameTag(string)`- Auto-detects Unity Sprite Editor slice sub-assets via `AssetDatabase.LoadAllAssetRepresentationsAtPath` (editor); grid-mode fallback via `Columns`/`Rows` for runtime builds and un-sliced PNGs- Rendering via `BackgroundPosition` + `BackgroundSize` — single texture, zero per-frame allocation- Loop modes: `LoopMode.Once`, `LoopMode.Loop`, `LoopMode.PingPong`- Auto-pause on `display: none` or detach from panel; `play-on-visible` mode starts playback when the element scrolls into viewRuntime- `MotionRuntime` — single PlayerLoop hook (`Update` phase) injected at first use, ticks all live `IMotionTickable` elements. No MonoBehaviour required, survives scene loads- `IMotionTickable` interface for buyer-extensible animation elements- `LottieRendererRegistry` — single global slot for an `INativeLottieRenderer`; the managed renderer activates when no native renderer is registered- `MotionLog` — tagged logging gated by `MOTION_IMPORTER_VERBOSE` define for zero-overhead release buildsTheme Switcher integration (opt-in)- `ThemeManager.BindLottieTint(logo, tokenName)` extension method- Tint applies to image layers via `style.unityBackgroundImageTintColor` and shape fills via Painter2D fill multiply- Returns `IDisposable` for explicit unbind; auto-cleans on element detach- Ships disabled by default; enable from `Tools > KrookedLilly > Theme Switcher Setup` (main integration row + a separate Lottie demo binder row)Editor- `LottieAnimationAssetImporter` — `ScriptedImporter` for `.lottie.json` files; parses metadata, produces a `LottieAnimationAsset` ScriptableObject- `LottieAnimationAssetInspector` — read-only inspector showing frame rate, total frames, duration, dimensions, layer count, markers- `Tools > KrookedLilly > Motion Importer Setup` — Setup panel for enabling integrations that consume from Motion Importer; surfaces a read-only directory of providers MI consumes from with one-click deep links to each provider's panelIncluded demos- SpriteBasicDemo — auto-slice detection + grid-mode fallback, with Play / Pause / Stop / Prev / Next controls- SpriteLoopModesDemo — three side-by-side animations in Once / Loop / PingPong modes plus a Restart All button- SpritePlayRangeDemo — four-direction walk cycle (Left / Right / Forward / Backward); Inspector-configurable Vector2Int ranges for any sheet layout- LottieLogoDemo — `.lottie.json` playback with speed controls, tint buttons, and optional Theme Switcher binderCompatibility- Unity 6+ (6000.0 and newer)- UI Toolkit (`com.unity.modules.uielements`)- Mono + IL2CPP (Standalone verified; iOS/Android/WebGL/consoles supported via standard AOT path)- Full C# source, no DLLs- XML documentation on all public APIs- Zero external dependenciesAI (Claude Code) was used as a development assistant throughout the package creation process. This includes code generation, architecture design, writing unit tests, documentation authoring, and debugging. All AI-generated code was reviewed, tested, and validated by the developer. The final package is 100% human-supervised C# source code with no AI runtime components.
