Back to projects
Nov 17, 2025
2 min read

Pixi React

A Pixi React Graphics Practice Project

Description:

A collection of interactive visual effects and animations built with Pixi.js and React, demonstrating the integration of WebGL-powered graphics in modern web applications.

🎨 Features

  • Multiple Interactive Scenes: Switch between different visual demonstrations including:

    • Hello World: Interactive sprite animation with pointer tracking and blur effects
    • Meteor: Dynamic particle system with customizable path following, blur layers, and GSAP animations
  • Advanced Graphics Utilities:

    • Path generation for circles and rounded rectangles
    • Custom equation-based point generation
    • Multi-layer blur effects with Kawase filters
    • HSL-based color transitions for smooth visual effects
  • Responsive Design: Automatically adapts to viewport size changes, including mobile virtual keyboard detection

  • Developer Controls: Interactive Leva controls for real-time parameter adjustments (blur strength, animation speed, layer count, etc.)