esengine/docs/.vitepress/theme/components/ParticleHeroEn.vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const canvasRef = ref(null)
let animationId = null
let particles = []
let animationStartTime = null
let glowStartTime = null

// ESEngine particle colors - VS Code style colors (unified with editor)
const colors = ['#569CD6', '#4EC9B0', '#9CDCFE', '#C586C0', '#DCDCAA']

class Particle {
  constructor(x, y, targetX, targetY) {
    this.x = x
    this.y = y
    this.targetX = targetX
    this.targetY = targetY
    this.size = Math.random() * 2 + 1.5
    this.alpha = Math.random() * 0.5 + 0.5
    this.color = colors[Math.floor(Math.random() * colors.length)]
  }
}

function createParticles(canvas, text, fontSize) {
  const tempCanvas = document.createElement('canvas')
  const tempCtx = tempCanvas.getContext('2d')
  if (!tempCtx) return []

  tempCtx.font = `bold ${fontSize}px "Segoe UI", Arial, sans-serif`
  const textMetrics = tempCtx.measureText(text)
  const textWidth = textMetrics.width
  const textHeight = fontSize

  tempCanvas.width = textWidth + 40
  tempCanvas.height = textHeight + 40
  tempCtx.font = `bold ${fontSize}px "Segoe UI", Arial, sans-serif`
  tempCtx.textAlign = 'center'
  tempCtx.textBaseline = 'middle'
  tempCtx.fillStyle = '#ffffff'
  tempCtx.fillText(text, tempCanvas.width / 2, tempCanvas.height / 2)

  const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height)
  const pixels = imageData.data
  const newParticles = []
  const gap = 3

  const width = canvas.width / (window.devicePixelRatio || 1)
  const height = canvas.height / (window.devicePixelRatio || 1)
  const offsetX = (width - tempCanvas.width) / 2
  const offsetY = (height - tempCanvas.height) / 2

  for (let y = 0; y < tempCanvas.height; y += gap) {
    for (let x = 0; x < tempCanvas.width; x += gap) {
      const index = (y * tempCanvas.width + x) * 4
      const alpha = pixels[index + 3] || 0

      if (alpha > 128) {
        const angle = Math.random() * Math.PI * 2
        const distance = Math.random() * Math.max(width, height)

        newParticles.push(new Particle(
          width / 2 + Math.cos(angle) * distance,
          height / 2 + Math.sin(angle) * distance,
          offsetX + x,
          offsetY + y
        ))
      }
    }
  }

  return newParticles
}

function easeOutQuart(t) {
  return 1 - Math.pow(1 - t, 4)
}

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3)
}

function animate(canvas, ctx) {
  const dpr = window.devicePixelRatio || 1
  const width = canvas.width / dpr
  const height = canvas.height / dpr

  const currentTime = performance.now()
  const duration = 2500
  const glowDuration = 600

  const elapsed = currentTime - animationStartTime
  const progress = Math.min(elapsed / duration, 1)
  const easedProgress = easeOutQuart(progress)

  // Transparent background
  ctx.clearRect(0, 0, width, height)

  // Calculate glow progress
  let glowProgress = 0
  if (progress >= 1) {
    if (glowStartTime === null) {
      glowStartTime = currentTime
    }
    glowProgress = Math.min((currentTime - glowStartTime) / glowDuration, 1)
    glowProgress = easeOutCubic(glowProgress)
  }

  const text = 'ESEngine'
  const fontSize = Math.min(width / 4, height / 3, 80)
  const textY = height / 2

  for (const particle of particles) {
    const moveProgress = Math.min(easedProgress * 1.2, 1)
    const currentX = particle.x + (particle.targetX - particle.x) * moveProgress
    const currentY = particle.y + (particle.targetY - particle.y) * moveProgress

    ctx.beginPath()
    ctx.arc(currentX, currentY, particle.size, 0, Math.PI * 2)
    ctx.fillStyle = particle.color
    ctx.globalAlpha = particle.alpha * (1 - glowProgress * 0.3)
    ctx.fill()
  }

  ctx.globalAlpha = 1

  if (glowProgress > 0) {
    ctx.save()
    ctx.shadowColor = '#3b9eff'
    ctx.shadowBlur = 30 * glowProgress
    ctx.fillStyle = `rgba(255, 255, 255, ${glowProgress})`
    ctx.font = `bold ${fontSize}px "Segoe UI", Arial, sans-serif`
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(text, width / 2, textY)
    ctx.restore()
  }

  if (glowProgress >= 1) {
    const breathe = 0.8 + Math.sin(currentTime / 1000) * 0.2
    ctx.save()
    ctx.shadowColor = '#3b9eff'
    ctx.shadowBlur = 20 * breathe
    ctx.fillStyle = '#ffffff'
    ctx.font = `bold ${fontSize}px "Segoe UI", Arial, sans-serif`
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(text, width / 2, textY)
    ctx.restore()
  }

  animationId = requestAnimationFrame(() => animate(canvas, ctx))
}

function initCanvas() {
  const canvas = canvasRef.value
  if (!canvas) return

  const ctx = canvas.getContext('2d')
  if (!ctx) return

  const dpr = window.devicePixelRatio || 1
  const container = canvas.parentElement
  const width = container.offsetWidth
  const height = container.offsetHeight

  canvas.width = width * dpr
  canvas.height = height * dpr
  canvas.style.width = `${width}px`
  canvas.style.height = `${height}px`
  ctx.scale(dpr, dpr)

  const text = 'ESEngine'
  const fontSize = Math.min(width / 4, height / 3, 80)

  particles = createParticles(canvas, text, fontSize)
  animationStartTime = performance.now()
  glowStartTime = null

  if (animationId) {
    cancelAnimationFrame(animationId)
  }

  animate(canvas, ctx)
}

onMounted(() => {
  initCanvas()
  window.addEventListener('resize', initCanvas)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', initCanvas)
})
</script>

<template>
  <section class="hero-section">
    <div class="hero-container">
      <!-- Left text area -->
      <div class="hero-text">
        <div class="hero-logo">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="16" r="14" stroke="#9147ff" stroke-width="2"/>
            <path d="M10 10h8v2h-6v3h5v2h-5v3h6v2h-8v-12z" fill="#9147ff"/>
          </svg>
          <span>ESENGINE</span>
        </div>
        <h1 class="hero-title">
          We build the framework.<br/>
          You create the game.
        </h1>
        <p class="hero-description">
          ESEngine is a high-performance TypeScript ECS framework for game developers.
          Whether 2D or 3D games, it helps you build scalable game architecture quickly.
        </p>
        <div class="hero-actions">
          <a href="/en/guide/getting-started" class="btn-primary">Get Started</a>
          <a href="https://github.com/esengine/esengine" class="btn-secondary" target="_blank">Learn More</a>
        </div>
      </div>

      <!-- Right particle animation area -->
      <div class="hero-visual">
        <div class="visual-container">
          <canvas ref="canvasRef" class="particle-canvas"></canvas>
          <div class="visual-label">
            <span class="label-title">Entity Component System</span>
            <span class="label-subtitle">High Performance Framework</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.hero-section {
  background: #0d0d0d;
  padding: 80px 0;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
}

.hero-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}

/* Left text */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

.hero-description {
  font-size: 1.125rem;
  color: #707070;
  line-height: 1.7;
  margin: 0;
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #3b9eff;
  color: #ffffff;
  border: 1px solid #3b9eff;
  border-radius: 6px;
}

.btn-primary:hover {
  background: #5aadff;
  border-color: #5aadff;
}

.btn-secondary {
  background: #1a1a1a;
  color: #a0a0a0;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
}

.btn-secondary:hover {
  background: #252525;
  color: #ffffff;
}

.hero-visual {
  display: flex;
  justify-content: center;
}

.visual-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #1a2a3a 0%, #1a1a1a 50%, #0d0d0d 100%);
  border-radius: 12px;
  border: 1px solid #2a2a2a;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(59, 158, 255, 0.1);
}

.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.visual-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

.label-subtitle {
  font-size: 0.875rem;
  color: #737373;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 24px;
  }

  .hero-section {
    padding: 48px 0;
    min-height: auto;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .visual-container {
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 1.75rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}
</style>