淡い月 - Awaitsuki

7/9/26 - Cursor Star Trail Script

A magical star trail that follows your cursor! This script creates beautiful stars that drift softly like fairy dust.

How to Install

Copy the code block below.
Paste it into your website's HTML, right before the closing </body> tag (or inside a custom HTML/Javascript widget in your blog's layout).

const style = document.createElement('style');
    style.textContent = `
      .magic-spark {
        position: absolute; pointer-events: none; font-size: 15px; user-select: none; line-height: 1; z-index: 99999;
        transition: transform 3.5s cubic-bezier(0.1, 0.4, 0.2, 1), opacity 3.5s ease-out;
        opacity: 1; transform: translate(-50%, -50%) scale(1);
      }
    `;
    document.head.appendChild(style);

document.addEventListener('mousemove', (e) => {
      const now = Date.now();
      if (now - lastMove > 60) { 
        createSpark(e.pageX, e.pageY);
        lastMove = now;
      }
    });

function createSpark(x, y) {
      const spark = document.createElement('div');
      spark.className = 'magic-spark';
      spark.innerHTML = '\u2605'; 
      spark.style.color = colors[Math.floor(Math.random() * colors.length)];
      spark.style.left = `${x + 5}px`;
      spark.style.top = `${y}px`;
      document.body.appendChild(spark);

const baseAngle = Math.PI; 
      const angleVar = (Math.PI / 180) * 20;   
      const angle = baseAngle + (Math.random() - 0.5) * angleVar;
      
      const distance = Math.random() * 50 + 30; 
      const moveX = Math.cos(angle) * distance;
      const moveY = Math.sin(angle) * distance; 
      const rotation = (Math.random() - 0.5) * 450;

requestAnimationFrame(() => {
        spark.style.transform = `translate(calc(-50% + ${moveX}px), calc(-50% + ${moveY}px)) scale(0.1) rotate(${rotation}deg)`;
        spark.style.opacity = '0';
      });

setTimeout(() => spark.remove(), 3500);
    }
  })();
</script>

How to Customize the Colors

Look at the very beginning of the script for this line:

const colors = ['#ff80c0', '#ff59ac', '#ff0080', '#ff3399', '#ff66cc', '#7ce7ff', '#b388ff', '#ffe0b2'];

Simply replace those HEX codes with your own color codes (e.g., #ffffff for white, #000000 for black, etc.).

You can add as many or as few colors as you want, just make sure they are enclosed in single quotes and separated by commas!

Click on "Read More" to see the effect!

7/8/26 - Template: Simple Cherry and Simple Berry

I’m not a big fan of minimalism, but I thought I could bring an elegant and simple template. Maybe it could be useful to someone. That’s how we came up with 'Simple Cherry' and 'Simple Berry'. It’s the same layout, just in two different colors. Click on 'Read More' for more important information. If you experience any issues, questions, or bugs with the layout, please contact me by leaving a comment on the post below, and I will do my best to help you fix it.

Simple Cherry

PREVIEW | DOWNLOAD XML

Simple Berry

PREVIEW | DOWNLOAD XML

7/7/26 - Template: Sakura Card Captors

This is a new template, with a Cardcaptor Sakura theme. If you experience any issues, questions, or bugs with the layout, please contact me by leaving a comment on the post below, and I will do my best to help you fix it.

Sakura Card Captors

PREVIEW | DOWNLOAD XML | DOWNLOAD IMAGES

7/6/26 - Hello Kitty Gifs

As you can probably guess, I absolutely love Hello Kitty and Sanrio characters. These Hello Kitty GIFs are so cute and honestly pretty funny. There are also a few with Charmmy Kitty,

7/4/26 - Falling Things on Screen Script

This is a script that makes emojis or characters fall down the screen like leaves in the wind.
You can customize it with whatever emoji or special character you want. Just a heads-up: colors only change for special characters, like a ♥, for example. To add it to your blog, you can either paste the code below right before the </body> tag, or create an HTML/JavaScript Widget and paste it there.

.falling-emoji {
    display: inline-block;
    animation: sway ease-in-out infinite alternate;
    will-change: transform;
    
/* CHANGE COLOR HERE (ONLY WORKS WITH TEXT CHARACTERS) */

color: #FFFFFF;

filter: hue-rotate(320deg) saturate(2); 
  }

@keyframes fall {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0; }
  }

@keyframes sway {
    0% { transform: translateX(-20px) rotate(-15deg); }
    100% { transform: translateX(20px) rotate(15deg); }
  }
</style>

/* CHANGE THE CHARACTER / EMOJI CODES HERE */
  const emojis = ['\u2764', '\u{1F338}', '\u2606'];

const frequencia = 450;

function createEmoji() {
    const container = document.createElement('div');
    container.classList.add('falling-container');
    container.style.left = Math.random() * 100 + 'vw';
    
    const emojiElement = document.createElement('div');
    emojiElement.classList.add('falling-emoji');
    emojiElement.innerText = emojis[Math.floor(Math.random() * emojis.length)];
    emojiElement.style.fontSize = Math.random() * 10 + 14 + 'px';
    
    const fallDuration = Math.random() * 3 + 6;
    container.style.animationDuration = fallDuration + 's';
    
    emojiElement.style.animationDuration = (Math.random() * 1.5 + 2) + 's';
    emojiElement.style.animationDelay = (Math.random() * -2) + 's'; 
    
    container.appendChild(emojiElement);
    document.body.appendChild(container);
    
    setTimeout(() => { container.remove(); }, fallDuration * 1000);
  }

setInterval(createEmoji, frequencia);
  </script>

Click 'Read More' for the live preview and to get the character/emoji code.