Taanee GUI Design
GUI and visual interface design inspired by Thai folklore for the Taanee interactive game concept.
UX/UI
Artwork
Animation
Nov 12, 2024
TAANEE
A slot game UI concept inspired by ผีตานี (Phee Tanee), a haunting spirit from Thai folklore known for her beauty and deadly charm.
The design blends mystical Thai horror elements with modern slot-game interface clarity, using rich jungle tones, ritual symbolism, and dramatic lighting to create an immersive, suspenseful atmosphere. Every screen—from the character reveal to bonus and free-spin moments—is designed to evoke mystery, temptation, and danger, drawing players into a supernatural world rooted in Thai mythology.
Workflow Tools
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 34 33" xmlns="http://www.w3.org/2000/svg"><path d="M 5.935 0 L 27.581 0 C 30.863 0 33.516 2.651 33.516 5.93 L 33.516 26.721 C 33.516 30 30.863 32.651 27.581 32.651 L 5.935 32.651 C 2.653 32.651 0 30 0 26.721 L 0 5.93 C 0 2.651 2.653 0 5.935 0 Z" fill="rgb(33, 36, 54)" height="32.65116279069764px" id="Tn_URl1yG" width="33.5162094763092px"/><path d="M 9.316 11.135 L 4.121 11.135 L 3.06 14.428 C 3.032 14.553 2.92 14.637 2.794 14.623 L 0.169 14.623 C 0.015 14.623 -0.027 14.54 0.015 14.372 L 4.512 1.493 C 4.554 1.353 4.596 1.228 4.652 1.06 C 4.708 0.767 4.735 0.46 4.735 0.153 C 4.722 0.084 4.777 0.014 4.847 0 L 8.464 0 C 8.562 0 8.632 0.042 8.646 0.112 L 13.743 14.344 C 13.785 14.498 13.743 14.567 13.603 14.567 L 10.685 14.567 C 10.587 14.581 10.489 14.512 10.461 14.414 L 9.316 11.065 Z M 4.931 8.358 L 8.478 8.358 C 8.394 8.065 8.283 7.716 8.157 7.353 C 8.031 6.977 7.906 6.572 7.78 6.153 C 7.64 5.721 7.515 5.302 7.375 4.87 C 7.235 4.437 7.11 4.033 6.998 3.628 C 6.886 3.237 6.788 2.874 6.691 2.54 L 6.663 2.54 C 6.537 3.14 6.383 3.74 6.188 4.34 C 5.978 5.009 5.769 5.707 5.545 6.405 C 5.364 7.116 5.14 7.772 4.931 8.358 Z M 21.968 9.879 L 17.541 9.879 C 17.597 10.312 17.737 10.744 17.974 11.121 C 18.226 11.498 18.575 11.791 18.994 11.958 C 19.552 12.195 20.167 12.321 20.781 12.307 C 21.27 12.293 21.759 12.251 22.234 12.153 C 22.667 12.098 23.086 11.986 23.477 11.833 C 23.546 11.777 23.588 11.805 23.588 11.944 L 23.588 14.079 C 23.588 14.135 23.574 14.191 23.56 14.247 C 23.533 14.288 23.505 14.316 23.463 14.344 C 23.016 14.54 22.555 14.679 22.066 14.763 C 21.41 14.888 20.753 14.944 20.083 14.93 C 19.022 14.93 18.128 14.763 17.402 14.442 C 16.718 14.149 16.117 13.688 15.642 13.116 C 15.195 12.572 14.874 11.958 14.679 11.288 C 14.483 10.633 14.385 9.949 14.385 9.251 C 14.385 8.498 14.497 7.758 14.735 7.033 C 14.958 6.335 15.307 5.693 15.782 5.121 C 16.243 4.563 16.815 4.116 17.472 3.795 C 18.128 3.474 18.91 3.363 19.804 3.363 C 20.544 3.349 21.284 3.488 21.968 3.795 C 22.541 4.047 23.044 4.423 23.435 4.912 C 23.798 5.386 24.091 5.916 24.273 6.502 C 24.454 7.06 24.538 7.633 24.538 8.205 C 24.538 8.54 24.524 8.833 24.51 9.098 C 24.482 9.363 24.468 9.558 24.454 9.684 C 24.44 9.781 24.356 9.865 24.259 9.865 C 24.175 9.865 24.021 9.879 23.798 9.893 C 23.574 9.921 23.309 9.935 22.988 9.935 C 22.667 9.935 22.332 9.879 21.968 9.879 Z M 17.541 7.842 L 20.488 7.842 C 20.851 7.842 21.117 7.842 21.284 7.828 C 21.396 7.814 21.508 7.786 21.605 7.716 L 21.605 7.577 C 21.605 7.395 21.577 7.228 21.522 7.06 C 21.27 6.279 20.53 5.749 19.706 5.777 C 18.938 5.735 18.212 6.14 17.849 6.837 C 17.681 7.158 17.583 7.493 17.541 7.842 Z" fill="rgb(143, 149, 166)" height="14.932325438066359px" id="LQ1LZeFHY" transform="translate(4.146 8.4)" width="24.537991569404884px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 34 33" xmlns="http://www.w3.org/2000/svg"><path d="M 5.935 0 L 27.581 0 C 30.863 0 33.516 2.651 33.516 5.93 L 33.516 26.721 C 33.516 30 30.863 32.651 27.581 32.651 L 5.935 32.651 C 2.653 32.651 0 30 0 26.721 L 0 5.93 C 0 2.651 2.653 0 5.935 0 Z" fill="rgb(33, 36, 54)" height="32.65116279069767px" id="lsdeVHLk8" width="33.51620947630923px"/><path d="M 0 14.595 L 0 0.237 C 0 0.14 0.042 0.084 0.14 0.084 C 0.377 0.084 0.6 0.084 0.922 0.07 C 1.257 0.056 1.606 0.056 1.983 0.042 C 2.36 0.028 2.765 0.028 3.198 0.014 C 3.631 0 4.05 0 4.469 0 C 5.614 0 6.564 0.14 7.346 0.433 C 8.044 0.67 8.686 1.06 9.217 1.577 C 9.664 2.023 10.013 2.567 10.236 3.167 C 10.446 3.753 10.558 4.353 10.558 4.981 C 10.558 6.181 10.278 7.172 9.72 7.953 C 9.161 8.735 8.379 9.321 7.471 9.656 C 6.522 10.005 5.474 10.13 4.329 10.13 C 3.994 10.13 3.771 10.13 3.631 10.116 C 3.491 10.102 3.296 10.102 3.03 10.102 L 3.03 14.581 C 3.044 14.679 2.975 14.763 2.877 14.777 L 0.168 14.777 C 0.056 14.777 0 14.721 0 14.595 Z M 3.044 2.777 L 3.044 7.465 C 3.24 7.479 3.421 7.493 3.589 7.493 L 4.329 7.493 C 4.874 7.493 5.418 7.409 5.935 7.242 C 6.382 7.116 6.773 6.851 7.08 6.502 C 7.374 6.153 7.513 5.679 7.513 5.065 C 7.527 4.633 7.415 4.2 7.192 3.823 C 6.955 3.46 6.619 3.181 6.214 3.028 C 5.698 2.819 5.139 2.735 4.567 2.749 C 4.203 2.749 3.882 2.749 3.617 2.763 C 3.338 2.749 3.142 2.763 3.044 2.777 Z M 19.272 6.614 C 18.853 6.391 18.406 6.237 17.931 6.14 C 17.414 6.028 16.898 5.958 16.367 5.958 C 16.088 5.944 15.795 5.986 15.529 6.056 C 15.348 6.098 15.194 6.195 15.096 6.335 C 15.026 6.447 14.985 6.586 14.985 6.712 C 14.985 6.837 15.04 6.963 15.124 7.074 C 15.25 7.228 15.417 7.353 15.599 7.451 C 15.92 7.619 16.255 7.772 16.591 7.912 C 17.345 8.163 18.071 8.512 18.741 8.93 C 19.202 9.223 19.579 9.614 19.844 10.088 C 20.068 10.535 20.18 11.023 20.166 11.526 C 20.18 12.181 19.984 12.837 19.621 13.381 C 19.23 13.94 18.685 14.372 18.057 14.623 C 17.373 14.916 16.535 15.07 15.529 15.07 C 14.887 15.07 14.258 15.014 13.63 14.888 C 13.141 14.805 12.652 14.651 12.205 14.442 C 12.108 14.386 12.038 14.288 12.052 14.177 L 12.052 11.749 C 12.052 11.707 12.066 11.651 12.108 11.623 C 12.15 11.595 12.192 11.609 12.233 11.637 C 12.778 11.958 13.351 12.181 13.965 12.321 C 14.496 12.46 15.054 12.53 15.613 12.53 C 16.144 12.53 16.521 12.46 16.772 12.335 C 16.996 12.237 17.149 12 17.149 11.749 C 17.149 11.553 17.037 11.372 16.814 11.191 C 16.591 11.009 16.13 10.8 15.445 10.535 C 14.733 10.284 14.077 9.949 13.462 9.53 C 13.029 9.223 12.666 8.819 12.401 8.344 C 12.178 7.898 12.066 7.409 12.08 6.921 C 12.08 6.321 12.247 5.749 12.555 5.233 C 12.904 4.674 13.42 4.228 14.021 3.949 C 14.677 3.614 15.501 3.46 16.493 3.46 C 17.065 3.46 17.652 3.502 18.224 3.586 C 18.643 3.642 19.048 3.753 19.425 3.907 C 19.481 3.921 19.537 3.977 19.565 4.033 C 19.579 4.088 19.593 4.144 19.593 4.2 L 19.593 6.474 C 19.593 6.53 19.565 6.586 19.523 6.614 C 19.398 6.642 19.328 6.642 19.272 6.614 Z" fill="rgb(143, 149, 166)" height="15.069767279957613px" id="zATi6vHr4" transform="translate(7.541 8.302)" width="20.166753006680903px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 34 33" xmlns="http://www.w3.org/2000/svg"><path d="M 5.935 0 L 27.581 0 C 30.863 0 33.516 2.651 33.516 5.93 L 33.516 26.721 C 33.516 30 30.863 32.651 27.581 32.651 L 5.935 32.651 C 2.653 32.651 0 30 0 26.721 L 0 5.93 C 0 2.651 2.653 0 5.935 0 Z" fill="rgb(33, 36, 54)" height="32.651162790697676px" id="F5YkW8jYt" width="33.5162094763092px"/><path d="M 6 3.167 C 6 4.915 4.656 6.333 3 6.333 C 1.344 6.333 0 4.915 0 3.167 C 0 1.419 1.344 0 3 0 C 4.656 0 6 1.419 6 3.167 Z" fill="rgb(143, 149, 166)" height="6.333333735995865px" id="ALBwhmX8_" transform="translate(16.5 13.333)" width="6px"/><g opacity="0.87"><path d="M 0 0 L 3 0 C 4.656 0 6 1.419 6 3.167 C 6 4.915 4.656 6.333 3 6.333 L 0 6.333 Z" fill="rgb(143, 149, 166)" height="6.333333735995851px" id="npcAmw9Gw" transform="translate(16.5 7)" width="6px"/></g><g opacity="0.73"><path d="M 0 3.167 C 0 1.419 1.344 0 3 0 L 6 0 L 6 6.333 L 3 6.333 C 1.344 6.333 0 4.915 0 3.167 Z" fill="rgb(143, 149, 166)" height="6.333333735995851px" id="JF9eqDP9c" transform="translate(10.5 7)" width="6px"/></g><g opacity="0.85"><path d="M 0 3.167 C 0 1.419 1.344 0 3 0 L 6 0 L 6 6.333 L 3 6.333 C 1.344 6.333 0 4.915 0 3.167 Z" fill="rgb(143, 149, 166)" height="6.333333735995865px" id="jY_WTG9On" transform="translate(10.5 13.333)" width="6px"/></g><g opacity="0.96"><path d="M 3 6.333 C 4.656 6.333 6 4.915 6 3.167 L 6 0 L 3 0 C 1.344 0 0 1.419 0 3.167 C 0 4.915 1.344 6.333 3 6.333 Z" fill="rgb(143, 149, 166)" height="6.333333735995851px" id="VRaSZgO_k" transform="translate(10.5 19.667)" width="6px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 34 33" xmlns="http://www.w3.org/2000/svg"><path d="M 5.935 0 L 27.581 0 C 30.863 0 33.516 2.651 33.516 5.93 L 33.516 26.721 C 33.516 30 30.863 32.651 27.581 32.651 L 5.935 32.651 C 2.653 32.651 0 30 0 26.721 L 0 5.93 C 0 2.651 2.653 0 5.935 0 Z" fill="rgb(33, 36, 54)" height="32.651162790697676px" id="EehgCr4Cx" width="33.5162094763092px"/><path d="M 21.483 9.414 C 22.012 7.847 21.83 6.132 20.984 4.707 C 19.713 2.522 17.156 1.398 14.659 1.927 C 13.548 0.692 11.952 -0.01 10.279 0 C 7.726 -0.006 5.462 1.616 4.676 4.012 C 3.037 4.344 1.621 5.357 0.793 6.792 C -0.488 8.971 -0.196 11.718 1.516 13.587 C 0.987 15.153 1.169 16.869 2.015 18.293 C 3.287 20.478 5.843 21.603 8.34 21.074 C 9.451 22.309 11.047 23.011 12.72 23 C 15.274 23.006 17.54 21.383 18.325 18.985 C 19.965 18.654 21.38 17.641 22.208 16.205 C 23.488 14.026 23.195 11.281 21.484 9.412 Z M 12.722 21.497 C 11.7 21.499 10.71 21.145 9.925 20.499 C 9.961 20.481 10.023 20.447 10.063 20.422 L 14.705 17.777 C 14.942 17.644 15.088 17.395 15.086 17.125 L 15.086 10.669 L 17.048 11.786 C 17.069 11.796 17.083 11.817 17.086 11.84 L 17.086 17.187 C 17.083 19.564 15.132 21.492 12.722 21.497 Z M 3.337 17.542 C 2.825 16.669 2.641 15.647 2.816 14.654 C 2.85 14.674 2.911 14.71 2.954 14.735 L 7.595 17.38 C 7.831 17.516 8.122 17.516 8.358 17.38 L 14.024 14.151 L 14.024 16.387 C 14.026 16.41 14.015 16.432 13.997 16.446 L 9.305 19.119 C 7.215 20.307 4.546 19.601 3.338 17.542 Z M 2.115 7.544 C 2.625 6.67 3.43 6.002 4.389 5.655 C 4.389 5.694 4.387 5.764 4.387 5.813 L 4.387 11.104 C 4.385 11.372 4.531 11.622 4.768 11.755 L 10.434 14.983 L 8.472 16.1 C 8.453 16.113 8.428 16.116 8.406 16.106 L 3.714 13.431 C 1.628 12.239 0.913 9.606 2.115 7.545 Z M 18.232 11.245 L 12.566 8.016 L 14.528 6.9 C 14.547 6.887 14.572 6.884 14.594 6.894 L 19.286 9.567 C 21.376 10.758 22.092 13.395 20.885 15.456 C 20.374 16.329 19.57 16.997 18.612 17.345 L 18.612 11.896 C 18.614 11.628 18.469 11.379 18.233 11.245 Z M 20.185 8.346 C 20.15 8.325 20.09 8.289 20.047 8.264 L 15.405 5.619 C 15.17 5.484 14.878 5.484 14.643 5.619 L 8.976 8.848 L 8.976 6.613 C 8.975 6.59 8.986 6.567 9.004 6.553 L 13.696 3.882 C 15.786 2.693 18.457 3.401 19.662 5.463 C 20.171 6.335 20.356 7.354 20.183 8.346 Z M 7.91 12.33 L 5.948 11.212 C 5.927 11.202 5.912 11.182 5.91 11.159 L 5.91 5.812 C 5.911 3.431 7.868 1.502 10.281 1.504 C 11.301 1.504 12.289 1.857 13.074 2.501 C 13.038 2.52 12.977 2.554 12.936 2.578 L 8.295 5.223 C 8.057 5.356 7.911 5.605 7.913 5.875 L 7.91 12.328 Z M 8.976 10.063 L 11.5 8.625 L 14.024 10.062 L 14.024 12.938 L 11.5 14.375 L 8.976 12.938 Z" fill="rgb(143, 149, 166)" height="23px" id="kQU31MfGY" transform="translate(5 5)" width="23px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 34 33" xmlns="http://www.w3.org/2000/svg"><path d="M 5.935 0 L 27.581 0 C 30.863 0 33.516 2.651 33.516 5.93 L 33.516 26.721 C 33.516 30 30.863 32.651 27.581 32.651 L 5.935 32.651 C 2.653 32.651 0 30 0 26.721 L 0 5.93 C 0 2.651 2.653 0 5.935 0 Z" fill="rgb(33, 36, 54)" height="32.65116279069764px" id="PAOlSBq2Z" width="33.5162094763092px"/><g d="M 25.846 12.5 C 25.846 19.393 20.049 25.001 12.923 25.001 C 5.797 25.001 0 19.393 0 12.5 C 0 5.607 5.797 0 12.923 0 C 20.049 0 25.846 5.607 25.846 12.5 Z M 12.725 4.599 L 12.725 8.091 L 8.774 8.091 L 8.774 20.599 L 5.575 20.599 L 5.575 8.091 L 1.625 8.091 L 1.625 4.599 Z M 24.625 10.722 C 24.625 14.037 22.165 16.724 19.128 16.724 L 19.128 12.722 L 19.168 12.722 C 20.18 12.722 21 11.826 21 10.721 C 21 9.616 20.18 8.719 19.168 8.719 C 18.407 8.719 17.754 9.226 17.478 9.947 C 17.385 10.185 17.335 10.447 17.335 10.721 L 17.335 20.597 L 13.633 20.597 L 13.633 10.721 C 13.633 8.093 15.18 5.858 17.335 5.047 C 17.912 4.83 18.518 4.719 19.128 4.719 C 22.165 4.719 24.625 7.407 24.625 10.721 Z" fill="transparent" height="25.00103309044167px" id="CDGNqx2W8" transform="translate(4.077 4)" width="25.846153788268566px"><path d="M 25.846 12.5 C 25.846 19.393 20.049 25.001 12.923 25.001 C 5.797 25.001 0 19.393 0 12.5 C 0 5.607 5.797 0 12.923 0 C 20.049 0 25.846 5.607 25.846 12.5 Z" fill="rgb(33, 36, 54)" height="25.001033133751097px" id="Gn7kwOANw" transform="translate(0 0)" width="25.846153791134157px"/><path d="M 11.1 0 L 11.1 3.492 L 7.149 3.492 L 7.149 16 L 3.95 16 L 3.95 3.492 L 0 3.492 L 0 0 Z M 23 6.123 C 23 9.438 20.54 12.125 17.503 12.125 L 17.503 8.123 L 17.543 8.123 C 18.555 8.123 19.375 7.227 19.375 6.122 C 19.375 5.017 18.555 4.12 17.543 4.12 C 16.782 4.12 16.129 4.627 15.853 5.348 C 15.76 5.586 15.71 5.848 15.71 6.122 L 15.71 15.998 L 12.007 15.998 L 12.007 6.122 C 12.007 3.494 13.554 1.259 15.71 0.448 C 16.287 0.231 16.893 0.12 17.503 0.12 C 20.54 0.12 23 2.808 23 6.122 Z" fill="rgb(143, 149, 166)" height="16px" id="r5ki1fBQG" transform="translate(1.625 4.599)" width="23px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 34 33" xmlns="http://www.w3.org/2000/svg"><path d="M 5.935 0 L 27.581 0 C 30.863 0 33.516 2.651 33.516 5.93 L 33.516 26.721 C 33.516 30 30.863 32.651 27.581 32.651 L 5.935 32.651 C 2.653 32.651 0 30 0 26.721 L 0 5.93 C 0 2.651 2.653 0 5.935 0 Z" fill="rgb(33, 36, 54)" height="32.65116279069764px" id="kFLsT99qp" width="33.5162094763092px"/><path d="M 9.507 12.419 L 4.206 12.419 L 3.123 15.732 C 3.094 15.859 2.98 15.944 2.852 15.93 L 0.172 15.93 C 0.016 15.93 -0.027 15.845 0.016 15.676 L 4.605 2.608 C 4.647 2.467 4.69 2.312 4.747 2.143 C 4.804 1.847 4.833 1.537 4.833 1.226 C 4.819 1.156 4.876 1.085 4.947 1.071 L 8.638 1.071 C 8.752 1.071 8.809 1.114 8.823 1.184 L 14.025 15.704 C 14.068 15.859 14.025 15.93 13.883 15.93 L 10.904 15.93 C 10.804 15.944 10.705 15.873 10.676 15.774 Z M 5.032 9.558 L 8.652 9.558 C 8.567 9.262 8.453 8.909 8.324 8.543 C 8.196 8.162 8.068 7.753 7.94 7.33 C 7.797 6.893 7.669 6.47 7.526 6.033 C 7.384 5.596 7.256 5.188 7.142 4.779 C 7.028 4.384 6.928 4.018 6.828 3.679 L 6.8 3.679 C 6.671 4.285 6.514 4.892 6.315 5.498 C 6.101 6.174 5.887 6.879 5.659 7.584 C 5.46 8.303 5.246 8.966 5.032 9.558 Z M 17.203 3.538 C 16.733 3.552 16.277 3.369 15.935 3.045 C 15.607 2.693 15.436 2.227 15.45 1.748 C 15.436 1.269 15.621 0.818 15.964 0.493 C 16.306 0.169 16.762 0 17.232 0 C 17.788 0 18.215 0.169 18.529 0.493 C 18.842 0.832 19.013 1.283 18.999 1.748 C 19.013 2.227 18.842 2.693 18.5 3.045 C 18.173 3.383 17.688 3.567 17.203 3.538 Z M 15.607 15.774 L 15.607 4.92 C 15.607 4.779 15.664 4.722 15.792 4.722 L 18.614 4.722 C 18.743 4.722 18.8 4.793 18.8 4.92 L 18.8 15.774 C 18.8 15.93 18.743 16 18.614 16 L 15.821 16 C 15.678 16 15.607 15.915 15.607 15.774 Z" fill="rgb(143, 149, 166)" height="16px" id="vRYn4mRN8" transform="translate(6.5 8)" width="19px"/></svg>)
Full UI art direction and asset creation by me.
All symbols, frames, icons, characters, and interface elements were designed to work seamlessly together, delivering a polished and immersive slot game experience.
Animated cutscenes and motion visuals created by me using Adobe After Effects.
This includes free-spin intros, character reveals, visual effects, transitions, and cinematic timing designed to heighten tension and enhance the supernatural atmosphere of the game.
