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

1. Character Creation — input, customization, preview

2. Template Selection — choose pre-made block-ins

3. Animation — rigging, keyframing, auto-animation

4. 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