NoisyCard

import React from 'react';
import { useEffect, useState } from 'react';

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNoise] = useState<string>('');
  const [animation, setAnimation] = useState<string>('animate-pulse');

  useEffect(() => {
    const noiseCanvas = document.createElement('canvas');
    noiseCanvas.width = 100;
    noiseCanvas.height = 100;
    const noiseCtx = noiseCanvas.getContext('2d');
    if (noiseCtx) {
      for (let i = 0; i < 100; i++) {
        for (let j = 0; j < 100; j++) {
          const noiseValue = Math.random() * 255;
          noiseCtx.fillStyle = `rgb(${noiseValue}, ${noiseValue}, ${noiseValue})`;
          noiseCtx.fillRect(i, j, 1, 1);
        }
      }
      setNoise(noiseCanvas.toDataURL());
    }
  }, []);

  return (
    <div
      className={`${className} bg-[#0A0A0A] p-4 relative overflow-hidden rounded-md`}
    >
      <div
        className={`${animation} absolute inset-0 bg-[#0A0A0A] opacity-50 z-0`}
        style={{
         backgroundImage: `url(${noise})`,
          backgroundSize: '100px 100px',
        }}
      ></div>
      {children}
    </div>
  );
};

export default NoisyCard;

Component info

Dependencies

About

Elevate your UI design with the NoisyCard component, a premium dark card featuring a subtle grain and noise texture overlay with a hint of animation. Perfect for adding depth and visual interest to your application's cards, panels, or sections. Built with React 18 and TypeScript, this component ensures a seamless and efficient user experience. With its dark background and sophisticated design, the NoisyCard is ideal for applications that require a premium look and feel. The component is fully customizable, allowing you to tailor its appearance to fit your specific needs. Whether you're building a dashboard, a profile page, or a settings panel, the NoisyCard is a versatile and stylish solution.