Monika Light

Card PNG

• simple version, standalone like Tomoyo. Embedded regex. Just fucking works.

Monika Complete

Card PNG
Theme JSON

• complete version, with a custom theme. Also embedded regex. Just fucking works (less stably).

How does it fucking work

We add a prompt that tells the model to end his messages with

1
2

$BG=background_choice$
$EX=expression_choice$

and then we regex that into actual HTML, which is basically

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<style>
:root {
  --sprite-height: 720px;
}

.sprite-box {
  height: var(--sprite-height);
  position: relative;
}

.sprite {
  height: var(--sprite-height);
  width: 100%;
  position: absolute;
  background-position: center;
}
</style>

<div class="sprite-box">
  <div class="sprite" style="background-image: url('https://stttv.neocities.org/monika-bg/$1.png')"></div>
  <div class="sprite" style="background-image: url('https://stttv.neocities.org/monika-ex/$1.webp')"></div>
</div>

Which literally just layers the images over one another in order. I do not need to think about how they're layered because I've just manually edited them in GIMP to ensure they're the same size.

Like scale image -> canvas size -> done. Very simple. Anyone can do it.

Thanks

Thanks to Pixi for making the OG Monika card and to _purple for getting me the Monika sprites/bgs.