HolographicCard

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

interface HolographicCardProps {
  children: React.ReactNode;
}

const HolographicCard: React.FC<HolographicCardProps> = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [cardRef, setCardRef] = useState<HTMLDivElement | null>(null);

  useEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      if (cardRef) {
        const rect = cardRef.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        setMousePosition({ x, y });
      }
    };

    document.addEventListener('mousemove', handleMouseMove);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, [cardRef]);

  return (
    <div
      ref={setCardRef}
      className='holographic-card'
      style={{
        transform: `perspective(1000px) rotateX(${mousePosition.y / 10}deg) rotateY(${mousePosition.x / 10}deg)`,
      }}
    >
      {children}
    </div>
  );
};

export default HolographicCard;

Component info

Dependencies

About

A premium React component that showcases an iridescent rainbow sheen effect. The sheen shifts with the mouse position, creating a mesmerizing visual experience. Built with TypeScript and CSS transforms, this component is perfect for adding a touch of futurism to your application. With its dark background and rainbow colors, it's sure to grab the user's attention. The component is fully customizable and can be easily integrated into your existing project. Whether you're building a website, a web application, or a mobile app, the HolographicCard component is a great way to add some visual flair. The component uses the latest version of React and is optimized for performance, ensuring a seamless user experience. The code is well-organized, readable, and follows best practices, making it easy to maintain and update. The HolographicCard component is a great example of how CSS transforms can be used to create complex and visually appealing effects. By leveraging the power of CSS, the component achieves a high level of customization and flexibility, making it a valuable addition to any project. With its unique blend of style and functionality, the HolographicCard component is sure to elevate your application to the next level. The component is also fully compatible with the Empire UI palette, featuring the signature black, gold, and off-white colors. The Empire UI palette is a carefully crafted collection of colors that are designed to work together in harmony, creating a visually appealing and consistent design language. The HolographicCard component is a great way to incorporate the Empire UI palette into your project, adding a touch of sophistication and elegance to your application.