React 3d Tilt Card With Rgb Glowing Border

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 04e912cff54b · 14 Oct 2026Report an issue or request a re-scan

• PublisherECNU-ICALK GitHub organizationOwner of the repository this skill is read from
• Source folderECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/react-3d-tilt-card-with-rgb-glowing-borderThe exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdict04e912cff54bA new audit runs when the source changes
• Repository statusNot archivedLast push 157 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: 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.

---
id: "e0cb2cc2-b366-40b4-9b38-eae2058c5ab0"
name: "React 3D Tilt Card with RGB Glowing Border"
description: "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."
version: "0.1.0"
tags:
  - "react"
  - "css"
  - "animation"
  - "3d-effect"
  - "hover"
  - "frontend"
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"
---

# 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

Excerpt, first 3,962 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/ECNU-ICALK/AutoSkill
git -C AutoSkill checkout 04e912cff54b

Works in

1. 2026-10-14
   ✓SAFE B 89 / 100

   first audit · source 04e912cff54b

Questions about React 3d Tilt Card With Rgb Glowing Border

• github.com/ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/en — the audited source at commit 04e912cff54b and every finding aboveObserved · 14 Oct 2026

Spotted something wrong? Report a correction · Methodology