feat: add support for resizing emoji particles

[eriknson]

Enhance Emoji Particle Sizing

Description

This PR improves the handling of emoji and text character particles in the cool-mode component by implementing proper scaling. Previously, when using emojis as particles, they didn't scale properly with the size prop, making them difficult to see at smaller sizes.

Changes

• Added specific handling for emoji/text characters (distinguishing them from image URLs)
• Implemented a 3x size multiplier to make emojis more visible
• Added proper CSS positioning with flexbox to center emojis in their container
• Used CSS transform for smooth scaling that maintains emoji quality

Before

if (particleType === "circle") {
  // Circle SVG code...
  
  particle.appendChild(circleSVG);
} else {
  particle.innerHTML = `<img src="${particleType}" width="${size}" height="${size}" style="border-radius: 50%">`;
}

After

if (particleType === "circle") {
  // Circle SVG code...
  
  particle.appendChild(circleSVG);
} else if (particleType.startsWith("http") || particleType.startsWith("/")) {
  // Handle URL-based images
  particle.innerHTML = `<img src="${particleType}" width="${size}" height="${size}" style="border-radius: 50%">`;
} else {
  // Handle emoji or text characters
  const fontSizeMultiplier = 3; // Make emojis 3x bigger
  const emojiSize = size * fontSizeMultiplier;
  particle.innerHTML = `<div style="font-size: ${emojiSize}px; line-height: 1; text-align: center; width: ${size}px; height: ${size}px; display: flex; align-items: center; justify-content: center; transform: scale(${fontSizeMultiplier}); transform-origin: center;">${particleType}</div>`;
}

Usage Example

This allows for emoji particles to be properly sized when using the component:

<CoolMode options={{ 
  particleCount: 15, 
  speedHorz: 6, 
  speedUp: 15,
  size: 30,
  particle: "🌤️" // Weather emoji now displays 3x larger (90px)
}}>
  <main>
    {/* Content */}
  </main>
</CoolMode>

Benefits

• Emojis now scale properly with the size prop, just like circle and image particles
• Better visual impact when using emoji particles
• Improved user experience with more visible cursor effects

[vercel]

@eriknson is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.