Holographic Card

A card with a holographic gradient and tilt effect. It reacts to mouse movement with a visual tilt and shows images and text. Use it for interactive product or content displays.

byMudunuri bhaskara karthikeya varma from Eldoraui

Installation

terminal

pnpm dlx layro-cli add @karthikmudunuri/holographic-card

npx layro-cli add @karthikmudunuri/holographic-card

npx layro-cli add @karthikmudunuri/holographic-card

bunx layro-cli add @karthikmudunuri/holographic-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, { useRef, useState } from "react"
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useSpring,
  useTransform,
} from "motion/react"

// ==========================================
// ==== Component Interface ================
// ==========================================