SpriteDX - Web UI - Planning
Counterintuitively, the UI is the hardest part. It’s the one surface where a human actually touches the engine — and it dictates everything else.
I used to think the engine was the challenge. But every UI decision bends the product’s trajectory. It’s no longer assembling puzzle pieces; it’s deciding which puzzle to even make.
Designing the interface is like arriving at an unexpected fork in the road. The path you choose here doesn’t just show what’s possible — it declares the product’s mission.
Core Flows
Character Creation — input, customization, preview
Template Selection — choose pre-made block-ins
Animation — rigging, keyframing, auto-animation
Export — formats for Unity, Godot, Unreal, etc.
Supportive Features
- History feed / gallery (personal + community)
High Level Design
┌─────────────────────┬─────────┬─────────┬────────────────────────────────────┐
│[//] File Edit │Gen 1 │Gen 2 │ + [Playground] [Donwload] [Share] │
├────┬────────────────┴─┬───────┴─────────┴────────────────────────────────────┤
│┌──┐│⌄ Template │ Gen 1 > Animation > Idle ⌄ │
││Cr││┌────────────────┐│ │
│└──┘││Machi/Character ││ ┌────────┐ │
│┌──┐│└────────────────┘│ < │ Idle │ > │
││Hi││┌────────────────┐│ └────────┘ │
│└──┘││┌─┐ ┌─┐ ┌─┐ ┌─┐ ││ │
│ ││├─┤ ├─┤ ├─┤ ├─┤ │├─┐ ┌──────────────────────────────────────────────┐ ┌─┤
│ ││└─┘ └─┘ └─┘ └─┘ ││ │ │ │ │ │
│ │└────────────────┘│ │ │ │ │ │
│ ├──────────────────┤ │ │ ┌ ─ ─ ─ ─ ┐ │ │ │
│ │⌄ Prompt │ │ │ .─. │ │ │
│ │┌────────────────┐│ │ │ │ ( ) │ │ │ │
│ ││Boy scout kid ││ │ │ `┬' │ │ │
│ ││doing yoyo ││ │ │ │ ───┼─── │ │ │ │
│ │└────────────────┘│ │ │ │ │ │ │
│ │Seed [42]│ │ │ │ ┌┴┐ │ │ │ │
│ │Guidance [60]│ │ │ │ │ │ │ │
│ ├──────────────────┤ │ │ │ ─┘ └─ │ Hit │ │ │
│ │⌄ Animation [+]│ │ │ ─ ─ ─ ─ ─ box │ │ │
│ │ ┌────┐┌───────┐│ │ │ │ │ │
│ │[-]│Idle││... ││ │ │ │ │ │
│ │ ├────┤├───────┤├─┘ └──────────────────────────────────────────────┘ └─┤
│ │[-]│Run ││... ││ │
│ │ └────┘└───────┘│ ┌━━━━━━━━━━━━━━━━━━━━━━━━━━┐ │
│ ├──────────────────┤ │ ┌────┐ ┌──┐ │ │
│ │Post Processing │ │ │ |> │ │Re│ │ │
│┌──┐│BG Cleanup [v]│ │ └─▲──┘ └─▲┘ │ │
││Ac│├━━━━━━━━━━━━━━━━━━┤ └────────────┼──────────┼──┘ │
│└▲─┘│[Run] ▲ eta 2m │ │ │ │
└─┼──┴───────┼──────────┴──────────────────────────┼──────────┼────────────────┘
│ │ │ │
Acct, Progress Bar Play Regenerate
Settings
V1 Scope
In Scope
Create animated characters for Machi based on template
Template 1: Humanoid Character
Template 2: Cat
Template 3: Vehicle
Template 4: Mech
Custom: Allow users to upload.
Open-sourced web app for people to clone and customize for their niche.
Bring Your Own Token.
- At least one API provider.
Export to Unity
Playground = Machi
Demo Site
Out of Scope
- Login / Account Management / Payment.
UX Mockup (work in progress)
Next Steps
Gonna work on filling out rest of the sections in the UX mockup.
Then get started on implementation with BYOT OSS model
