SpriteDX

1. The Mockup

Mocked up the landing page. Mostly to get the idea across.

This is in stark contrast to the full application which is more of a production tool and pipeline.

2. Role

Communicates value instantly through examples and familiar input box.

It removes 90% of cognitive load. The full app has templates, pipelines, parameters, seeds, input boxes, select boxes, folders, preview pane, etc. In this landing page, user is able to just type in a stuff and it will just work.

Emotional Impact. Landing page uses centered layout. Live examples and animations. It feel alive, magical, intentional.

3. Background Characters

The concept includes live background characters moving under a dim spotlight.

Behind the input box, and main content, characters move around. It may be blurred or softly glowing.

This should be beautiful, emotional, and brand-defining.

It should turn your landing page into a stage, theater, a mini world.

Targeting emotional engagement and homage wot retro games.

Risks

movements could be bright or distracting
animation loop may be too fast
Too many characters → too chaotic
No parallax depth. Have some minimal parallex

4. What happens once “Generate” button is clicked.

Right below the generate button, a new section is added for the generation.
It will initially show a progress bar and text showing cute funny text like “buttoning the eye,“ “stitching muscles together” or something that is funny and exciting.
When things fail, we will show different messagings
1. Ran out of current budget: There are too many requests. Please try again later.
2. Per device Rate limit: We are noticing too many requests from your device. Please try again later.
3. Unknown error: Somethng went wrong, please try again.
Once generation is completed.
Character is presented inline in idle mode.
User will also be presented with basic on screen “left” and “right” buttons.
Clicking on them will move the character.
If character idles for too long, it will greet the user.
If user generates more characters, it will just push the earlier generation down.
Failed generations will go away.
There will be button to “See it in full app” button which directs them to the full app.

5. Metaphor: Build-A-Bear

The metaphor is a Build-A-Bear place where users can say “I want ___,“ and actually see it being made.

6. Copywriting

Here are the proposed copies for the landing page texts.

6.1 One-liner

(A) Turn your character idea into an animated spritesheet.
(B) Bring tiny pixel characters to life.
(C) Your pixel character begins here.

6.2 Input Label + Placeholder

(A) Describe your character…
e.g. “girl with glasses”, “emerald knight“, “forest mage apprentice”
(B) Describe the friend you’d like to create…
“a shy fox mage”, “a knight with a cape”, “a girl wearing round glasses”
(C) Enter your character concept…
“rogue in leather armor”, “blue-haired healer”, “dragon girl warrior”

6.3 Generate Button Section

(A) Generate
(B) Create Character
(C) Bring to Life
(D) Make My Character

With micro copy:

(A) Runs a real SpriteDX pipeline (~3 minutes)
(B) Your character is being handcrafted by the engine…
(C) This may take a minute — good sprites take time.

6.4 Loading Phase Copy

Here are 20+ lines we can rotate randomly.

Stitching the little boots…
Buttoning the eyes… carefully!
Giving them their very first breath…
Teaching them how to stand upright…
Adjusting their tiny outfit…
Practicing their idle pose…
Helping them warm up their pixels…
Brushing their hair… pixel by pixel…
Adding personality sparkles…
Preparing their first steps…

6.5 Error Messages

Too many characters are being created right now.
Please try again in a moment — our workshop is busy!
Whoa! You’re generating really fast.
Take a tiny break and try again soon.
Oops — your character slipped out of the workshop!
Something went wrong. Please try again.

6.6 Reveal Copy (When Character is Ready)

(A) Your character is ready.
(B) Your new pixel friend has arrived!
(C) Character creation complete.

6.7 Movement Button Labels

← Run
→ Run
Idle
Wave

Microcopy:

Click to make them move
They learn fast
They’ll greet you if you wait to long.

6.8 Multi-Generation Behavior (Stacking Cards)

(A) Generated Character
(B) A new character steps onto the stage…
(C) New sprite added to your party

6.9 “How it Works” Copy

(A) How SpriteDX Works
1. Understands your description
2. Generates animation frames
3. Cleans stray pixels
4. Builds a game-ready spritesheet
(B) The Sprite Creation Process
1. Parse your prompt
2. Generate idle/walk/run keyframes
3. Clean artifacts
4. Export sprite animations

6.10 Section Headings

Make a Character
Watch the Magic Happen
Your Character’s Journey
Example Results
Watch Them Come to Life
The SpriteDX Workshop
Behind the Scenes

6.11 Full Copy Spec

  {
    "hero_title": "Bring a tiny pixel character to life.",
    "hero_subtitle": "Describe your hero and watch SpriteDX stitch together their first animations.",
    "input_label": "Describe the friend you'd like to create...",
    "input_placeholder": "\"a shy fox mage\", \"a knight with a cape\", \"a girl wearing round glasses\"",
    "cta_generate": "Create Character",
    "cta_note": "Your character is being handcrafted… this may take a moment.",
    "loading_messages": [
      "Buttoning the eyes…",
      "Stitching tiny boots…",
      "Brushing their pixel hair…",
      "Giving them their very first breath…",
      "Adjusting their little outfit…",
      "Practicing their idle pose…",
      "Teaching them how to wave…",
      "Warming up the pixel forge…",
      "Adding sparkles to their personality…",
      "Preparing their first steps…"
    ],
    "error_budget": "Too many characters are being created right now — our workshop is busy! Try again soon.",
    "error_rate_limit": "Whoa! You're generating very fast. Take a tiny break and try again.",
    "error_unknown": "Oops — your character slipped out of the workshop! Please try again.",
    "reveal_title": "Your new pixel friend has arrived! 👋",
    "movement_left": "← Walk",
    "movement_right": "Walk →",
    "movement_idle": "Idle",
    "movement_greet": "Wave",
    "multi_generation_title": "A new character steps onto the stage…",
    "view_full_app": "See in Full App →",
    "section_how_it_works_title": "How We Bring Characters to Life",
    "how_it_works_steps": [
      "Read your description",
      "Sketch your character’s form",
      "Add personality and movement",
      "Assemble a lively spritesheet"
    ]
  }

What’s Next?

I’ll get do some coding I guess…

— Sprited Dev 🌱

SpriteDX - Landing Page - Mockup

1. The Mockup

2. Role

3. Background Characters

4. What happens once “Generate” button is clicked.

5. Metaphor: Build-A-Bear