Holographic Referral Card

A dark invite card that tilts in 3D with the pointer. A holographic glow follows. Touch stays still. Tab for a quiet glow.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/holographic-referral-card

npx layro-cli add @iurvish/holographic-referral-card

npx layro-cli add @iurvish/holographic-referral-card

bunx layro-cli add @iurvish/holographic-referral-card

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

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useReducedMotion,
  useSpring,
} from "motion/react";
import type { PointerEvent, ReactNode } from "react";

const INVITE_BACKGROUND_URL =
  "https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg";