GlitchButton

import React from 'react';
import { motion } from 'framer-motion';

interface GlitchButtonProps {
  children: React.ReactNode;
}

const GlitchButton: React.FC<GlitchButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{
        filter: 'url(#glitch)',
      }}
      transition={{ duration: 0.2 }}
      className='glitch-button'
    >
      {children}
    </motion.button>
  );
};

export default GlitchButton;

Component info

Dependencies

About

A React button component featuring an RGB split glitch effect on hover. The text briefly distorts for a short duration of 200ms, creating a futuristic and dynamic visual experience. This component is built with TypeScript and is designed to work seamlessly on dark backgrounds, such as #0A0A0A. With its unique and captivating design, the GlitchButton is perfect for adding a touch of innovation to your web applications. It can be used in a variety of contexts, from navigation menus to call-to-action buttons, and is sure to leave a lasting impression on your users. The component is highly customizable, allowing you to tailor its appearance to fit your specific needs. Whether you're building a website, a web application, or a mobile app, the GlitchButton is an excellent choice for adding a bit of flair to your UI.