@sleepywave
stuff
About...
I am an artist taking inspiration primarily from...
I admire these creators greatly; subsequently you will most likely see that pretty much all characters and scenarios are based off of their designs.
|
As per both @R and @V 's tos, any art used will be accredited and can be taken down at will by either jai's system or other forms of contact.
|
|
|
I love roleplaying! JAI is a source for me to explore psychological horror as well as build my personal species.
\
/
\
|
That's all for here!
Background / Lore
Anything you see below is unlikely to be introduced.
STAINS
Remer, Minnesota.
Sacrifice
N/A.
Sin
"When he lies, it is consistent with his character; for he is a liar and the father of lies.” John 8:44.
@keyframes splashFade { 0% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.os-tagline { font-size: 16px; font-family: 'Georgia'; font-style: italic; color: #ff69b4; letter-spacing: 3px; margin-top: 4px; opacity: 0; animation: taglineShow 3.5s ease forwards; }
@keyframes taglineShow { 0% { opacity: 0; } 15% { opacity: 0.8; } 39% { opacity: 0.8; } 40% { opacity: 0; } 100% { opacity: 0; } }
.loading-dots { display: flex; gap: 10px; margin-top: 20px; animation: dotsHide 3.5s ease forwards; }
.loading-dots span { width: 12px; height: 12px; background: blanchedalmond; border-radius: 50%; animation: dotPulse 1s ease-in-out infinite; }
.loading-dots span:nth-child(1) { animation-delay: 0s; } .loading-dots span:nth-child(2) { animation-delay: 0.15s; } .loading-dots span:nth-child(3) { animation-delay: 0.3s; } .loading-dots span:nth-child(4) { animation-delay: 0.45s; } .loading-dots span:nth-child(5) { animation-delay: 0.6s; }
@keyframes dotPulse { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } }
@keyframes dotsHide { 0% { opacity: 1; } 39% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
.welcome-text { font-size: 28px; letter-spacing: 2px; margin-top: 20px; display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px; opacity: 0; animation: welcomeShow 3.5s ease forwards; }
@keyframes welcomeShow { 0% { opacity: 0; } 39% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 1; } }
.name-slot { position: relative; display: inline-block; width: 120px; height: 22px; }
.redacted-name { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: blanchedalmond; animation: glitchJitter 0.12s steps(1) infinite, colorFlicker 0.3s steps(1) infinite, redactedHide 3.5s steps(1) forwards; }
.redacted-name::before, .redacted-name::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.redacted-name::before { background: #ff69b4; mix-blend-mode: screen; animation: glitchSplitRed 0.15s steps(1) infinite, redFlash 0.22s steps(1) infinite, redactedHide 3.5s steps(1) forwards; }
.redacted-name::after { background: #3bb8ff; mix-blend-mode: screen; animation: glitchSplitBlue 0.18s steps(1) infinite, redactedHide 3.5s steps(1) forwards; }
@keyframes glitchJitter { 0% { transform: translate(0px, 0px); opacity: 1; } 10% { transform: translate(-2px, 1px); opacity: 0.9; } 20% { transform: translate(2px, -1px); opacity: 1; } 30% { transform: translate(-1px, 0px); opacity: 0.7; } 40% { transform: translate(1px, 2px); opacity: 1; } 50% { transform: translate(0px, -2px); opacity: 0.85; } 60% { transform: translate(-2px, -1px); opacity: 1; } 70% { transform: translate(2px, 1px); opacity: 0.6; } 80% { transform: translate(-1px, 1px); opacity: 1; } 90% { transform: translate(1px, -1px); opacity: 0.9; } 100% { transform: translate(0px, 0px); opacity: 1; } }
@keyframes colorFlicker { 0% { background: blanchedalmond; } 20% { background: black; } 35% { background: blanchedalmond; } 55% { background: black; } 70% { background: blanchedalmond; } 85% { background: black; } 100% { background: blanchedalmond; } }
@keyframes glitchSplitRed { 0% { transform: translate(0px, 0px); } 25% { transform: translate(3px, 0px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(2px, -1px); } 100% { transform: translate(0px, 0px); } }
@keyframes redFlash { 0% { opacity: 0; } 15% { opacity: 0.9; } 30% { opacity: 0; } 50% { opacity: 0.7; } 65% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes glitchSplitBlue { 0% { transform: translate(0px, 0px); } 25% { transform: translate(-3px, 0px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-2px, 1px); } 100% { transform: translate(0px, 0px); } }
@keyframes redactedHide { 0% { opacity: 1; } 69% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
.revealed-name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0; visibility: hidden; color: blanchedalmond; animation: nameReveal 3.5s steps(1) forwards; }
@keyframes nameReveal { 0% { opacity: 0; visibility: hidden; transform: translate(-50%, -50%); color: #ff69b4; } 69% { opacity: 0; visibility: hidden; transform: translate(-50%, -50%); color: #ff69b4; }
70% { opacity: 1; visibility: visible; transform: translate(calc(-50% - 60px), calc(-50% - 40px)); color: #ff69b4; } 70.13% { color: blanchedalmond; } 70.27% { color: #3bb8ff; }
70.4% { transform: translate(calc(-50% + 70px), calc(-50% + 30px)); color: black; } 70.53% { color: #ff69b4; } 70.67% { color: blanchedalmond; }
70.8% { transform: translate(calc(-50% - 40px), calc(-50% + 55px)); color: #3bb8ff; } 70.93% { color: black; } 71.07% { color: #ff69b4; }
71.2% { transform: translate(calc(-50% + 55px), calc(-50% - 50px)); color: blanchedalmond; } 71.33% { color: #3bb8ff; } 71.47% { color: black; }
71.6% { transform: translate(calc(-50% - 65px), calc(-50% - 10px)); color: #ff69b4; } 71.73% { color: blanchedalmond; } 71.87% { color: #3bb8ff; }
72% { transform: translate(calc(-50% + 35px), calc(-50% - 45px)); color: black; } 72.13% { color: #ff69b4; } 72.27% { color: blanchedalmond; }
72.4% { transform: translate(calc(-50% - 20px), calc(-50% + 40px)); color: #3bb8ff; } 72.53% { color: black; } 72.67% { color: #ff69b4; }
72.7% { transform: translate(calc(-50% + 15px), calc(-50% - 15px)); color: blanchedalmond; } 72.85% { color: #3bb8ff; }
73% { transform: translate(-50%, -50%); color: blanchedalmond; } 100% { opacity: 1; visibility: visible; transform: translate(-50%, -50%); color: blanchedalmond; } }
No characters