@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&display=swap');
@mixin inset($top, $right, $bottom, $left) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
:root {
--black: #413564;
--white: #fff;
--primary-color: #554684;
--primary-color-dark: #413564;
--primary-color-tint: #8979b9;
--secondary-color: #fff5f0;
--accent-color: #ff4dde;
--sparkle-color: #ffe085;
--shirt-color: #fff;
--shirt-color-dark: #eaeaea;
--shirt-color-dark-2: #ddd;
--bow-color-1: #961E60;
--bow-color-2: #411854;
--bow-gradient: repeating-linear-gradient(-45deg, var(--bow-color-1) 0 0.25rem, var(--bow-color-2) 0.25rem 0.375rem);
--background: #c4bcdc;
--line-width-1: 0.125rem;
--line-width-2: 0.375rem;
}
* { box-sizing: border-box; }
body {
display: grid;
place-items: center;
height: 100vh;
background-color: var(--background);
font-size: 16px;
line-height: 1;
font-family: 'Kiwi Maru', serif;
overflow-x: hidden;
}
.komi {
position: relative;
*,
*::before,
*::after {
position: absolute;
}
&-head,
&-body,
&-hair-extension {
animation: var(--hover-animation, none);
}
&-eye {
@include inset(4.5rem, var(--eye-right), auto, var(--eye-left));
--flip: 1;
--eye-offset: 1.25rem;
--pupil-offset: 0.5rem;
--eye-line-top-offset: -13%;
--eye-line-bottom-offset: 16%;
z-index: 2;
height: 3.75rem;
width: 4rem;
transform-origin: center 70%;
border-radius: 100%;
background-color: var(--white);
animation: blinky 7s infinite;
&::before,
&::after {
content: '';
}
&::before {
@include inset(-0.0625rem, var(--eye-line-top-right), auto, var(--eye-line-top-left));
height: 120%;
width: 120%;
transform: rotate(calc(-12deg * var(--flip)));
border-radius: 100%;
border: var(--line-width-2) solid transparent;
border-top: var(--line-width-2) solid var(--black);
}
&::after {
@include inset(auto, var(--eye-line-bottom-right), 0, var(--eye-line-bottom-left));
height: 15%;
width: 50%;
transform: rotate(calc(8deg * var(--flip)));
border-radius: 100%;
border: var(--line-width-1) solid transparent;
border-bottom: var(--line-width-1) solid var(--black);
}
&-sparkle {
inset: 15% 20%;
transform: scale(var(--eye-sparkle-scale, 0));
transition: 0.4s ease-in-out;
&::before,
&::after {
content: '';
border-radius: 100%;
background-color: var(--sparkle-color);
}
&::before {
left: 50%;
height: 100%;
width: 0.5rem;
transform: translateX(-50%);
animation: twinkleY 0.3s infinite;
}
&::after {
top: 50%;
width: 100%;
height: 0.5rem;
transform: translateY(-50%);
animation: twinkleX 0.3s 0.3s infinite;
}
}
&-pupil {
@include inset(0.75rem, var(--pupil-right), auto, var(--pupil-left));
height: 2.5rem;
width: 2.5rem;
transform: scale(var(--eye-pupil-scale, 1));
border-radius: 100%;
background-color: var(--black);
transition: 0.4s ease-in-out;
overflow: hidden;
&::before {
content: '';
top: 60%;
left: 50%;
height: 100%;
width: 130%;
transform: translateX(-50%);
border-radius: 100%;
background-color: var(--primary-color-tint);
}
}
&-left {
--eye-left: var(--eye-offset);
--pupil-right: var(--pupil-offset);
--eye-line-top-left: var(--eye-line-top-offset);
--eye-line-bottom-left: var(--eye-line-bottom-offset);
}
&-right {
--flip: -1;
--eye-right: var(--eye-offset);
--pupil-left: var(--pupil-offset);
--eye-line-top-right: var(--eye-line-top-offset);
--eye-line-bottom-right: var(--eye-line-bottom-offset);
}
}
&-blush {
@include inset(7.5rem, var(--blush-right), auto, var(--blush-left));
--blush-offset: 0.75rem;
height: 2rem;
width: 2.5rem;
border-radius: 100%;
background-color: var(--accent-color);
opacity: var(--blush-opacity, 0.1);
transition: 0.8s;
&-left {
--blush-left: var(--blush-offset);
}
&-right {
--blush-right: var(--blush-offset);
}
}
&-ear {
@include inset(5.75rem, var(--ear-right), auto, var(--ear-left));
--flip: 1;
--ear-offset: -1.25rem;
height: 3rem;
width: 2rem;
transform: rotate(calc(40deg * var(--flip)));
border-radius: 100%;
background-color: var(--secondary-color);
&-left {
--flip: -1;
--ear-left: var(--ear-offset);
z-index: -1;
}
&-right {
--ear-right: var(--ear-offset);
}
}
&-cat-ear {
@include inset(var(--cat-ear-translate, 4rem), var(--cat-ear-right), auto, var(--cat-ear-left));
--flip: 1;
--cat-ear-offset: -3rem;
--cat-ear-fur-offset: 20%;
--cat-ear-fur-1-offset: 1.75rem;
--cat-ear-fur-2-offset: 1.5rem;
z-index: -1;
height: 6rem;
width: 5rem;
transition: 0.5s ease-in-out;
&::before {
content: '';
inset: 0;
transform-origin: var(--cat-ear-transform-origin);
transform: rotate(calc(30deg * var(--flip)));
border-radius: inherit;
background-color: var(--primary-color);
}
&-fur {
@include inset(10%, var(--cat-ear-fur-right), auto, var(--cat-ear-fur-left));
height: 70%;
width: 70%;
transform-origin: var(--cat-ear-transform-origin);
transform: rotate(calc(30deg * var(--flip)));
border-radius: inherit;
background-color: var(--primary-color-tint);
&::before,
&::after {
content: '';
border-radius: var(--cat-ear-fur-border-radius);
background-color: var(--primary-color);
}
&::before {
@include inset(-0.625rem, var(--cat-ear-fur-1-right), auto, var(--cat-ear-fur-1-left));
height: 2rem;
width: 2rem;
transform: rotate(calc(-70deg * var(--flip)));
}
&::after {
@include inset(-0.25rem, var(--cat-ear-fur-2-right), auto, var(--cat-ear-fur-2-left));
height: 1rem;
width: 1rem;
transform: rotate(calc(-50deg * var(--flip)));
}
}
&-left {
--cat-ear-left: var(--cat-ear-offset);
--cat-ear-transform-origin: right bottom;
--cat-ear-fur-left: var(--cat-ear-fur-offset);
--cat-ear-fur-1-left: var(--cat-ear-fur-1-offset);
--cat-ear-fur-2-left: var(--cat-ear-fur-2-offset);
--cat-ear-fur-border-radius: 0 100% 0 100%;
border-radius: 0.5rem 0 0 100%;
}
&-right {
--flip: -1;
--cat-ear-right: var(--cat-ear-offset);
--cat-ear-transform-origin: left bottom;
--cat-ear-fur-right: var(--cat-ear-fur-offset);
--cat-ear-fur-1-right: var(--cat-ear-fur-1-offset);
--cat-ear-fur-2-right: var(--cat-ear-fur-2-offset);
--cat-ear-fur-border-radius: 100% 0 100% 0;
border-radius: 0 0.5rem 100% 0;
animation: var(--cat-ear-animation);
}
}
&-face {
@include border-radius(50% 50%, 50% 40%);
inset: 0;
background-color: var(--secondary-color);
}
&-face-inner {
inset: 0;
}
&-hair {
&-back {
top: -2.75rem;
left: -2rem;
width: 120%;
&-1 {
width: 100%;
height: 9.5rem;
transform: rotate(-10deg);
border-radius: 100%;
background-color: var(--primary-color);
&::before,
&::after {
content: '';
}
&::before {
top: 5.5rem;
right: -1rem;
width: 50%;
height: 60%;
background-color: inherit;
border-radius: 100%;
}
&::after {
inset: 0;
border-radius: inherit;
border-left: 1rem solid var(--primary-color-tint);
}
}
}
&-bangs {
top: -0.5rem;
left: 25%;
width: 65%;
&::before,
&::after {
content: '';
z-index: 2;
background-color: var(--primary-color-tint);
}
&::before {
top: 2.5rem;
left: -3.75rem;
height: 1rem;
width: 1rem;
transform: rotate(-2deg) skewY(20deg);
border-radius: 0.25rem;
}
&::after {
top: 2.25rem;
left: 0.5rem;
height: 1rem;
width: 90%;
transform: rotate(-2deg) skewY(10deg);
border-radius: 0.25rem;
}
&-1,
&-2 {
transform-origin: center top;
background-color: var(--primary-color);
}
&-1 {
top: 0;
left: 0;
width: 55%;
height: 6rem;
transform: rotate(-8deg);
border-bottom-left-radius: 100% 50%;
&::before {
content: '';
left: -1.5rem;
height: 80%;
width: 3rem;
border-bottom-left-radius: 100%;
transform: rotate(50deg);
border-left: 1.5rem solid var(--primary-color);
}
}
&-2 {
top: 0;
left: 50%;
width: 45%;
height: 6.5rem;
transform: rotate(-12deg);
border-bottom-left-radius: 100% 70%;
}
&-3 {
top: 1.5rem;
left: -1.75rem;
height: 6rem;
width: 4.5rem;
border-bottom-left-radius: 100%;
transform-origin: center top;
transform: rotate(45deg);
border-left: 1.75rem solid var(--primary-color);
}
}
&-strand {
z-index: -1;
top: 4rem;
left: -0.75rem;
height: 13rem;
width: 1.5rem;
background-color: var(--primary-color);
}
}
&-head {
position: relative;
z-index: 3;
height: 12rem;
width: 13rem;
margin-bottom: 5rem;
}
&-hair-extension {
top: 3rem;
left: calc(50% - 7rem);
width: 14rem;
height: 14rem;
background-color: var(--primary-color);
&::after {
content: '';
left: 1rem;
height: 100%;
width: 5rem;
background-color: var(--primary-color-dark);
}
}
&-neck {
z-index: 2;
bottom: calc(100% - 0.25rem);
left: 50%;
height: 5rem;
width: 2rem;
transform: translateX(-50%);
background-color: var(--secondary-color);
&::after {
content: '';
z-index: -1;
top: calc(100% - 0.125rem);
left: 50%;
border: 1.125rem solid transparent;
border-top-color: var(--secondary-color);
transform: translateX(-50%);
}
&-shadow {
inset: 0;
overflow: hidden;
&::before {
content: '';
top: 0.25rem;
left: 50%;
width: 250%;
height: 3rem;
border-radius: 100%;
background-color: var(--black);
transform: translateX(-50%);
opacity: 0.1;
}
}
}
&-collar {
--flip: 1;
--collar-offset: -4.4375rem;
bottom: -0.5rem;
left: 50%;
height: 3rem;
width: 100%;
transform: translateX(-50%) skewY(calc(-15deg * var(--flip))) scaleY(0.6);
&::before {
@include inset(0.5rem, var(--collar-right), auto, var(--collar-left));
content: '';
height: 0;
width: 0;
border: 2.5rem solid transparent;
border-top-color: var(--shirt-color);
transform: rotate(calc(78deg * var(--flip)));
}
&-left {
--collar-left: var(--collar-offset);
}
&-right {
--flip: -1;
--collar-right: var(--collar-offset);
}
}
&-bow {
bottom: -1.875rem;
left: 50%;
height: 0.75rem;
width: 1.25rem;
transform: translateX(-50%);
&::after {
content: '';
z-index: 3;
inset: 0;
border-radius: 0.75rem;
background-color: var(--bow-color-1);
background-image: var(--bow-gradient);
}
&-top {
--flip: 1;
--bow-top-offset: 0.75rem;
z-index: 2;
inset: 0;
// perspective: 1000px;
&::before,
&::after {
@include inset(-0.25rem, var(--bow-top-right), auto, var(--bow-top-left));
content: '';
height: 1.75rem;
width: 1.75rem;
transform: rotate(calc(-15deg * var(--flip))) perspective(1rem) rotateY(calc(22deg * var(--flip)));
background-color: var(--bow-color-1);
background-image: var(--bow-gradient);
border-radius: 0.25rem;
}
&::before {
--bow-top-right: var(--bow-top-offset);
}
&::after {
--bow-top-left: var(--bow-top-offset);
--flip: -1;
}
&-shadow {
--bow-top-shadow-offset: 0.75rem;
inset: 0;
&::before,
&::after {
@include inset(0.125rem, var(--bow-top-shadow-right), auto, var(--bow-top-shadow-left));
content: '';
z-index: 1;
height: 0.75rem;
width: 1.25rem;
transform: rotate(calc(-15deg * var(--flip)));
border-radius: 100%;
background-color: var(--bow-color-2);
mix-blend-mode: multiply;
opacity: 0.4;
}
&::before {
--bow-top-shadow-right: var(--bow-top-shadow-offset);
}
&::after {
--bow-top-shadow-left: var(--bow-top-shadow-offset);
--flip: -1;
}
}
}
&-bottom {
--flip: 1;
--bow-bottom-offset: -1.5rem;
z-index: 1;
inset: 0;
&::before,
&::after {
@include inset(0.325rem, var(--bow-bottom-right), auto, var(--bow-bottom-left));
content: '';
height: 1.75rem;
width: 2rem;
transform: rotate(calc(15deg * var(--flip)));
border-radius: 0.125rem;
background-color: var(--bow-color-1);
background-image: var(--bow-gradient);
}
&::before {
--bow-bottom-left: var(--bow-bottom-offset);
}
&::after {
--bow-bottom-right: var(--bow-bottom-offset);
--flip: -1;
}
}
}
&-shirt {
--flip: 1;
z-index: 1;
top: -0.5rem;
left: 50%;
width: 9rem;
height: 8rem;
transform: translateX(-50%);
&::before,
&::after {
@include inset(0, var(--shirt-right), auto, var(--shirt-left));
content: '';
z-index: 2;
height: 100%;
width: 70%;
border-radius: 0.5rem;
background-color: var(--shirt-color-dark);
transform: rotate(calc(8deg * var(--flip)));
}
&::before {
--shirt-left: 0;
--flip: -1;
}
&::after {
--shirt-right: 0;
}
&-sleeves {
&::before,
&::after {
@include inset(1rem, var(--shirt-sleeve-right), auto, var(--shirt-sleeve-left));
content: '';
z-index: -1;
height: 4rem;
width: 4rem;
border-radius: 0.25rem;
background-color: var(--shirt-color-dark);
transform: rotate(calc(20deg * var(--flip)));
}
&::before {
--shirt-sleeve-left: -1.25rem;
}
&::after {
--shirt-sleeve-right: -1.25rem;
--flip: -1;
}
&,
&-shadow {
inset: 0;
}
&-shadow {
z-index: 1;
&::before,
&::after {
@include inset(2.5rem, var(--shirt-sleeve-sh-right), auto, var(--shirt-sleeve-sh-left));
content: '';
height: 50%;
width: 1.5rem;
transform: rotate(calc(20deg * var(--flip)));
background-color: var(--shirt-color-dark-2);
}
&::before {
--shirt-sleeve-sh-left: -1rem;
}
&::after {
--shirt-sleeve-sh-right: -1rem;
--flip: -1;
}
}
}
}
&-body {
z-index: 1;
top: 12rem;
left: calc(50% - 6rem);
height: 6rem;
width: 12rem;
}
&-panel {
top: 2rem;
left: 50%;
width: clamp(20rem, 50vw, 30rem);
height: 15rem;
transform: translateX(-50%);
background-color: var(--white);
overflow: hidden;
}
&-zigzag {
background-image: repeating-linear-gradient(45deg, var(--primary-color-tint) 0 0.125rem, transparent 0.125rem 0.25rem);
opacity: var(--zigzag-opacity, 0);
transition: 0.3s;
&,
&::after {
height: 0.125rem;
width: 1.125rem;
}
&::after {
content: '';
background-image: repeating-linear-gradient(-45deg, transparent 0 0.125rem, var(--primary-color-tint) 0.125rem 0.25rem);
}
&-1 {
left: -2rem;
bottom: 2rem;
transform: rotate(85deg);
}
&-2 {
left: -2rem;
bottom: 6rem;
width: 0.875rem;
transform: rotate(90deg);
}
&-3 {
left: -3rem;
top: 5rem;
transform: rotate(60deg);
}
&-4 {
left: -2rem;
top: -1rem;
transform: rotate(-40deg);
}
&-5 {
left: 5rem;
top: -4rem;
transform: rotate(-10deg);
}
&-6 {
right: -1rem;
top: -2rem;
transform: rotate(50deg);
}
&-7 {
right: -3.5rem;
top: 4rem;
transform: rotate(80deg);
}
&-8 {
right: -2.5rem;
top: 8rem;
width: 0.875rem;
transform: rotate(-60deg);
}
&-9 {
right: -2rem;
bottom: 5rem;
transform: rotate(90deg);
}
&-10 {
right: -2rem;
bottom: 1rem;
transform: rotate(95deg);
}
}
&-zigzags {
inset: 0;
}
&-buruburu {
right: -3rem;
top: 0;
height: 100%;
transform-origin: center bottom;
transform: rotate(5deg) skewX(-10deg) scale(var(--buruburu-scale, 0.7));
font-size: 3rem;
color: var(--primary-color);
opacity: var(--buruburu-opacity, 0);
transition: opacity 0.3s, transform 0.4s ease-in-out;
&-character {
&-1 {
left: -0.25em;
font-size: 1.2em;
}
&-2 {
top: 1.0625em;
left: -0.125em;
}
&-3 {
top: 2em;
left: -0.5em;
}
&-4 {
top: 3.25em;
left: -0.625em;
font-size: 0.9em;
}
&-5 {
top: 4.75em;
left: -0.75em;
font-size: 0.8em;
}
&-6 {
top: 6.5em;
left: 0;
left: -0.5em;
font-size: 0.7em;
}
}
}
&:hover {
--hover-animation: tremble 0.3s infinite;
--eye-pupil-scale: 0.85;
--zigzag-opacity: 1;
--buruburu-opacity: 1;
--buruburu-scale: 1;
}
&-head {
&:hover {
--eye-pupil-scale: 1.1;
--eye-sparkle-scale: 1;
--blush-opacity: 0.3;
--cat-ear-scale: 1;
--cat-ear-translate: -3rem;
--cat-ear-animation: catEarTwitch 3s 0.5s infinite;
&,
+ .komi-panel {
--hover-animation: none;
}
~ .komi-zigzag {
--zigzag-opacity: 0;
}
~ .komi-buruburu {
--buruburu-opacity: 0;
}
}
}
}
@keyframes twinkleY {
0%, 100% {
transform: translateX(-50%) scaleY(1);
}
50% {
transform: translateX(-50%) scaleY(0.5);
}
}
@keyframes twinkleX {
0%, 100% {
transform: translateY(-50%) scaleX(1);
}
50% {
transform: translateY(-50%) scaleX(0.5);
}
}
@keyframes catEarTwitch {
0%, 70%, 90% {
transform: rotate(0deg);
}
80%, 95% {
transform: rotate(5deg) scaleX(0.9);
}
}
@keyframes tremble {
0%, 24%, 50%, 74%, 100% {
transform: translate(0, 0);
}
25%, 49% {
transform: translate(0.0625rem, 0.1875rem);
}
75%, 99% {
transform: translate(-0.0625rem, 0.1875rem);
}
}
!
