ParticleHero

import * as React from 'react';
import './particle-hero.css';
interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  radius: number;
  color: string;
}
class ParticleHero extends React.Component<{}, { particles: Particle[] }> {
  private canvasRef: React.RefObject<HTMLCanvasElement>;
  constructor(props: {}) {
    super(props);
    this.state = {
      particles: [],
    };
    this.canvasRef = React.createRef();
  }
  public componentDidMount(): void {
    const canvas = this.canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    for (let i = 0; i < 100; i++) {
      this.state.particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: Math.random() * 2 - 1,
        vy: Math.random() * 2 - 1,
        radius: Math.random() * 2,
        color: '#C9A84C',
      });
    }
    this.animate(ctx);
  }
  public render(): JSX.Element {
    return (
      <div className="particle-hero" style={{ backgroundColor: '#0A0A0A', height: '100vh', width: '100vw' }}>
        <canvas ref={this.canvasRef} width="100%" height="100%"/>
      </div>
    );
  }
  private animate(ctx: CanvasRenderingContext2D): void {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (let i = 0; i < this.state.particles.length; i++) {
      const particle = this.state.particles[i];
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2, false);
      ctx.fillStyle = particle.color;
      ctx.fill);
      particle.x += particle.vx;
      particle.y += particle.vx;
      if (particle.x < 0 || particle.x > ctx.canvas.width) {
        particle.vx = -particle.vx;
      }
      if (particle.y < 0 || particle.y > ctx.canvas.height) {
        particle.vy = -particle.vy;
      }
    }
    requestAnimationFrame(() => this.animate(ctx));
  }
}
export default ParticleHero;

Component info

Dependencies

About

ParticleHero is a premium React UI component that creates a stunning hero section with floating particles that react to mouse movement. The component uses gold particles on a dark black background, creating a luxurious and modern design. With its responsive and interactive design, ParticleHero is perfect for adding a touch of elegance to any website or application. The component is built using TypeScript and does not include any console logs, ensuring a seamless and efficient user experience. ParticleHero is a highly customizable component, allowing developers to easily integrate it into their projects and tailor it to their specific needs. Whether you're building a personal website, a business application, or a complex web platform, ParticleHero is an excellent choice for adding a sophisticated and engaging hero section. By leveraging the power of React and TypeScript, ParticleHero provides a robust and scalable solution for creating stunning visual effects and interactive user experiences. With its extensive range of features and customization options, ParticleHero is an ideal component for developers and designers looking to create a lasting impression on their users.