# 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

```plaintext
┌─────────────────────┬─────────┬─────────┬────────────────────────────────────┐
│[//] 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)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754952627918/139cd12e-a5e7-461d-8abd-97ccd5930d7c.png align="center")

## Next Steps

* Gonna work on filling out rest of the sections in the UX mockup.
    
* Then get started on implementation with BYOT OSS model