Também essa concept art da Rihana e da Opal, que eram pra ser um casal, mas como uma mina que inspirei o sobrenome Mallen me bloqueou por causa de besteira, eu desisti da ideia e fiz a Opal se tornando maligna.Também tem essa concept art do que era pra ser a Sofia Mariele, e comparando aqui... eu me sinto tipo aquele meme do personagem final ser muito mais simples que o do concept art.
- O episódio que introduz Julia e Sofia caso queiram saber: [clique aqui]
- Sofia morre nesse episódio, na temporada 18: [clique aqui]
Também achei esse meme aqui, e... me lembra a Julie e a Isabella, exceto que a Isabella dorme pelada (eu tinha um desenho disso mas eu perdi o desenho, se eu achar eu mostro em atualização).
2020: Tem esse desenho de uma personagem negra com cabelo de pomponzinhos tipo orelha de Mickey, e com uma roupa ou bodypaint tipo carnaval que lembra umas OCs atuais minhas.2019: Tem essa concept art antiga que... admito que tá bem-feitinha pra uma arte de criatura monstruosa e de slime, só não sei se fiz esse bicho pra ser um personagem ou só pra testar design.Também achei fotos de uma chácara que eu e minha família visitamos pra um aniversário de aguém que eu não lembro, é no mesmo ano, mas não lembro nada dali além do bolo de morango com chantili que tinha lá.Foto 1
Foto 2Foto 3Uma OC que eu desenhei com base no bolo (parando pra pensar, ela é até que possível no PD atual considerando o planeta Megno).
Achei essa foto acima também, de uma cortina vermelha que brilhava dum jeito muito foda no meu quarto dependendo do horário.
Sabe o que eu falei sobre ter dado um upgrade enorme só nesse site, mas eu quis dar uma tunada a mais, afinal, esse site já tá fazendo 9 anos, né? Então me baseei naquele site do Tumblr que falei do mesmo post, então pesquisei pra saber como eu poderia fazer o mesmo efeito, de fazer um textinho acompanhando o cursor caso você esteja lendo aqui pelo PC.
Abaixo uns códigos que fui usando, seja pesquisando o molde pra isso ou pedindo ajuda pro Chat GPT (afinal eu quis fazer isso praticamente pra ontem, e eu fui também testando os códigos que o GPT ia falando).
Primeiro Javascript
<script>
const letters = "THEFATDRAGONS2017";
document.addEventListener("mousemove", (e) => {
const trail = document.createElement("div");
trail.className = "trail";
const randomLetter = letters[Math.floor(Math.random() * letters.length)];
trail.innerText = randomLetter;
// Offset do cursor
trail.style.left = (e.pageX + 10) + "px";
trail.style.top = (e.pageY + 25) + "px";
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 800);
});
</script>
Primeiro CSS
<style>
.trail {
position: absolute;
pointer-events: none;
color: #d40f0f;
font-size: 12px;
font-family: Arial, sans-serif;
animation: fadeOut 0.8s linear forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px) scale(1);
}
100% {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
}
</style>
HTML (otimizado)
<script>
const letters = "THEFATDRAGONS2017";
const colors = ["#d40f0f", "#ff4d4d", "#ff9999"];
document.addEventListener("mousemove", (e) => {
const trail = document.createElement("div");
trail.className = "trail";
const randomLetter = letters[Math.floor(Math.random() * letters.length)];
trail.innerText = randomLetter;
// posição com leve variação
const offsetX = Math.random() * 20 - 10;
const offsetY = Math.random() * 20 - 10;
trail.style.left = (e.pageX + offsetX) + "px";
trail.style.top = (e.pageY + offsetY) + "px";
// variações visuais
trail.style.fontSize = (10 + Math.random() * 10) + "px";
trail.style.color = colors[Math.floor(Math.random() * colors.length)];
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 800);
});
</script>
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
animation: fadeOut 0.8s ease-out forwards;
will-change: transform, opacity;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px) scale(1) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(30px) scale(0.6) rotate(20deg);
}
}
</style>
HTML segunda otimização
<!-- Dragon Trail -->
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
animation: fadeOut 0.8s ease-out forwards;
will-change: transform, opacity;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px) scale(1) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(30px) scale(0.6) rotate(20deg);
}
}
</style>
<script>
const letters = "THE FAT DRAGONS 2017";
const colors = ["#d40f0f", "#0044a4", "#00b934"];
document.addEventListener("mousemove", (e) => {
const trail = document.createElement("div");
trail.className = "trail";
const randomLetter = letters[Math.floor(Math.random() * letters.length)];
trail.innerText = randomLetter;
const offsetX = Math.random() * 20 - 10;
const offsetY = Math.random() * 20 - 10;
trail.style.left = (e.pageX + offsetX) + "px";
trail.style.top = (e.pageY + offsetY) + "px";
trail.style.fontSize = (10 + Math.random() * 10) + "px";
trail.style.color = colors[Math.floor(Math.random() * colors.length)];
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 800);
});
</script>
HTML terceira otimização
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
font-weight: bold;
animation: fadeOut 0.6s linear forwards;
white-space: nowrap;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
</style>
<script>
trail.innerText = text[index];
index = (index + 1) % text.length;
trail.style.left = e.pageX + "px";
trail.style.top = e.pageY + "px";
trail.style.fontSize = "14px";
trail.style.color = colors[index % colors.length];
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 600);
lastX = e.pageX;
lastY = e.pageY;
}
});
</script>
[16:26]
Mano, eu ouvi o Estabilizador estalando, na minha cabeça tocou essa cena do Homem-Aranha:
Esse código até que deu certo, mas... ficou uma bosta, eram os textos só "derretendo" do cursor, e quando acompanhavam a setinha parecia um foguinho de letras, e bem, eu até tentei tirar um print disso mas infelizmente não explicou direito o que eu quis fazer.
Se quiserem fazer o próprio, só tirar os comentários dos "//" e também trocar o título entre aspas e o hexadecimal da cor, etc., pra algo próprio de vocês.
HTML quarta otimização
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
font-weight: bold;
animation: fadeOut 0.6s linear forwards;
white-space: nowrap;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
</style>
<script>
const text = "The Fat Dragons 2017 ";
let index = 0;
let lastX = 0;
let lastY = 0;
document.addEventListener("mousemove", (e) => {
const dx = e.pageX - lastX;
const dy = e.pageY - lastY;
const distance = Math.sqrt(dx * dx + dy * dy);
// controla o espaçamento das letras
if (distance > 8) {
const trail = document.createElement("div");
trail.className = "trail";
trail.innerText = text[index];
index = (index + 1) % text.length;
trail.style.left = e.pageX + "px";
trail.style.top = e.pageY + "px";
trail.style.fontSize = "14px";
trail.style.color = "#da0f0f";
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 600);
lastX = e.pageX;
lastY = e.pageY;
}
});
</script>
[Esse até que funciona bem, mas não é o suficiente]
HTML com maior comprimento e duração
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
font-weight: bold;
animation: fadeOut 1.5s linear forwards; /* aumentei */
white-space: nowrap;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px) scale(1);
}
100% {
opacity: 0;
transform: translateY(15px) scale(0.8);
}
}
</style>
<script>
const text = "The Fat Dragons 2017 • The Fat Dragons 2017 • ";
let index = 0;
let lastX = 0;
let lastY = 0;
// ou, como testei e ficou ainda melhor...
const text = "THE FAT DRAGONS 2017";
const colors = ["#d40f0f", "#0044a4", "#00b934"]
let index = 0;
let lastX = 0;
let lastY = 0;
document.addEventListener("mousemove", (e) => {
const dx = e.pageX - lastX;
const dy = e.pageY - lastY;
const distance = Math.sqrt(dx * dx + dy * dy);
// menor distância = mais letras = rastro mais longo
if (distance > 4) {
const trail = document.createElement("div");
trail.className = "trail";
trail.innerText = text[index];
index = (index + 1) % text.length;
trail.style.left = e.pageX + "px";
trail.style.top = e.pageY + "px";
trail.style.fontSize = "14px";
trail.style.color = "#da0f0f";
document.body.appendChild(trail);
// maior tempo = rastro mais longo
setTimeout(() => {
trail.remove();
}, 1500);
lastX = e.pageX;
lastY = e.pageY;
}
});
</script>
O print desse não ficou bom, mas é uma versão que já me deixou super satisfeito pra falar a verdade, então já é tudo pra mim.
Até mais!
Skin 1:
Skin 2:
Skin 3:
Skin 4:
Skin 5, 6, 7 e 8:
Skin 9:
Skin 10:
Skin 11:
Skin 12 (minha favorita, btw):
Skin 13:
Skin 14:
Skin 15:
Skin 16:
Skin 17:
Skin 18:
Skin 19:
Skin 20:
Skin 21:
Skin 22:
Skin 23:
Skin 24:
Skin 25:
Achei esse meme kkkkkkkkkkk Triple Fatass.
Achei uns memes de TF2 num grupo do Face, e também umas concept arts feitas no SFM.
---
