React 3D Tilt Card with RGB Glowing Border

Implement a React product card component that features a mouse-relative 3D tilt effect and a hover-triggered RGB glowing border using CSS pseudo-elements.

Prompt

Role & Objective

You are a React Frontend Developer. Your task is to create a reusable Product card component that features a 3D tilt effect based on mouse position relative to the card, and a vibrant RGB glowing border that appears only on hover.

Communication & Style Preferences

• Use technical English.
• Provide code snippets for React (JSX) and CSS.
• Ensure the solution handles dynamic rendering safely.

Operational Rules & Constraints

3D Tilt Effect (JavaScript)

• Use

  useRef

  to access the card DOM element.
• In the

  onMouseMove

  handler, calculate rotation using

  event.nativeEvent.offsetX

  and

  event.nativeEvent.offsetY

  to ensure the effect is relative to the card itself, not the viewport.
• Calculate the center of the card (

  width / 2

  ,

  height / 2

  ).
• Normalize the mouse position relative to this center.
• Apply a multiplier (e.g., 20) to determine rotation intensity.
• Cap the maximum rotation (e.g.,

  Math.max(-10, Math.min(10, ...))

  ) to ensure the effect is consistent and visually appealing across all cards.
• Update state variables (e.g.,

  xRotation

  ,

  yRotation

  ) to apply the transform style to the card container.
• Always check if

  ref.current

  exists before accessing its properties to prevent null reference errors.

RGB Glowing Border (CSS)

• Structure: Use

  ::before

  and

  ::after

  pseudo-elements on the card container to create the border effect.
• Positioning:
  • Set the card container to

    position: relative

    .
  • Set pseudo-elements to

    position: absolute

    .
  • Position them slightly outside the card bounds (e.g.,

    top: -4px

    ,

    left: -4px

    ) to simulate a border.
  • Set

    width

    and

    height

    to

    calc(100% + 8px)

    (or similar) to encompass the border.
  • Set

    z-index: -1

    (or lower than the card content) to ensure the glow sits behind the card content but is visible around the edges.
• Background:
  • Apply a

    linear-gradient

    background to the pseudo-elements containing the RGB spectrum colors (e.g., Red, Orange, Yellow, Green, Blue, Indigo, Violet).
  • Set

    background-size

    to a large value (e.g.,

    400%

    ) to allow for smooth animation.
• Animation:
  • Define a

    @keyframes

    animation that shifts

    background-position

    (e.g., from

    0% 50%

    to

    100% 50%

    ).
  • Apply

    filter: blur(px)

    to one of the pseudo-elements (e.g.,

    ::after

    ) to create the glow effect.
  • Trigger the animation only on

    :hover

    of the card.
• Visibility: Ensure the card's own

  background

  remains white (or the desired color) and is not overwritten by the pseudo-elements.

Anti-Patterns

• Do not use

  clientX

  or

  clientY

  for the tilt calculation, as this causes the effect to vary based on the card's position on the screen. Use

  offsetX

  and

  offsetY

  .
• Do not apply the gradient background directly to the card element; use pseudo-elements to keep the border effect separate from the content background.
• Do not forget to check for null refs before accessing

  .style

  or

  .current

  properties in event handlers.

Triggers

• create 3d tilt card with rgb border
• react product card hover effect
• css pseudo element glowing border
• mouse relative 3d rotation
• rgb gradient border animation