PixelPilot: Instructions file for GitHub Copilot

UI/UX Visual Effects 2026

Parallax scrolling, mouse-following glow, typing animations, confetti celebrations, and Lottie animation usage.

---

1. PARALLAX SCROLLING (Advanced GSAP)

Rule: Use GSAP + ScrollTrigger for smooth, high-performance parallax. Never use background-attachment: fixed.

// GSAP Parallax Example
gsap.registerPlugin(ScrollTrigger);

gsap.to('.parallax-bg', {
  scrollTrigger: {
    trigger: '.parallax-section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
  yPercent: 20,
  ease: 'none',
});

gsap.to('.parallax-content', {
  scrollTrigger: {
    trigger: '.parallax-section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: 0.5,
  },
  yPercent: -10,
  ease: 'none',
});

---

2. MOUSE-FOLLOWING GLOW / SPOTLIGHT

<div class="glow-card" id="glow-card">
  <div class="glow-card__content">...</div>
  <div class="glow-card__spotlight"></div>
</div>

.glow-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.glow-card__spotlight {
  position: absolute; inset: 0;
  background: radial-gradient(circle 200px at var(--x, 50%) var(--y, 50%), 
              color-mix(in srgb, var(--accent) 15%, transparent), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.glow-card:hover .glow-card__spotlight { opacity: 1; }

// Spotlight Logic
const card = document.getElementById('glow-card');
card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const x = ((e.clientX - rect.left) / rect.width) * 100;
  const y = ((e.clientY - rect.top) / rect.height) * 100;
  card.style.setProperty('--x', `${x}%`);
  card.style.setProperty('--y', `${y}%`);
});

---

3. TYPING ANIMATION (Typewriter Effect)

<h1 class="typing-text" id="typing-text"></h1>

// Typewriter Logic
const text = "Designing the future of UI/UX.";
const el = document.getElementById('typing-text');
let i = 0;

function type() {
  if (i < text.length) {
    el.textContent += text.charAt(i);
    i++;
    setTimeout(type, 50);
  }
}
type();