3D Pin

Interactive 3D pin container with perspective transforms and smooth hover animations. Perfect for React applications requiring stunning visual effects with Next.js integration and TypeScript support.

Framer Motion

Loading component...

"use client";import React, { useState } from "react";import { motion } from "motion/react";import { cn } from "@/lib/utils";export type PinContainerProps = {  children: React.ReactNode;  title?: string;  href?: string;  className?: string;  containerClassName?: string;};export const PinContainer = ({  children,  title,  href,  className,  containerClassName,}: PinContainerProps) => {  const [transform, setTransform] = useState(    "translate(-50%,-50%) rotateX(0deg)"  );  const onMouseEnter = () => {    setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)");  };  const onMouseLeave = () => {    setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)");  };  const handleClick = () => {    if (href) {      window.open(href, '_blank');    }  };  return (    <div      className={cn(        "relative group/pin z-50  cursor-pointer",        containerClassName      )}      onMouseEnter={onMouseEnter}      onMouseLeave={onMouseLeave}      onClick={handleClick}    >      <div        style={{          perspective: "1000px",          transform: "rotateX(70deg) translateZ(0deg)",        }}        className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"      >        <div          style={{            transform: transform,          }}          className="absolute left-1/2 p-4 top-1/2  flex justify-start items-start  rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] bg-black border border-white/[0.1] group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden"        >          <div className={cn(" relative z-50 ", className)}>{children}</div>        </div>      </div>      <PinPerspective title={title} href={href} />    </div>  );};export type PinPerspectiveProps = {  title?: string;  href?: string;};export const PinPerspective = ({  title,  href,}: PinPerspectiveProps) => {  return (    <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">      <div className=" w-full h-full -mt-7 flex-none  inset-0">        <div className="absolute top-0 inset-x-0  flex justify-center">          <a            href={href}            target={"_blank"}            className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 "          >            <span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">              {title}            </span>            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>          </a>        </div>        <div          style={{            perspective: "1000px",            transform: "rotateX(70deg) translateZ(0)",          }}          className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"        >          <>            <motion.div              initial={{                opacity: 0,                scale: 0,                x: "-50%",                y: "-50%",              }}              animate={{                opacity: [0, 1, 0.5, 0],                scale: 1,                z: 0,              }}              transition={{                duration: 6,                repeat: Infinity,                delay: 0,              }}              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"            ></motion.div>            <motion.div              initial={{                opacity: 0,                scale: 0,                x: "-50%",                y: "-50%",              }}              animate={{                opacity: [0, 1, 0.5, 0],                scale: 1,                z: 0,              }}              transition={{                duration: 6,                repeat: Infinity,                delay: 2,              }}              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"            ></motion.div>            <motion.div              initial={{                opacity: 0,                scale: 0,                x: "-50%",                y: "-50%",              }}              animate={{                opacity: [0, 1, 0.5, 0],                scale: 1,                z: 0,              }}              transition={{                duration: 6,                repeat: Infinity,                delay: 4,              }}              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"            ></motion.div>          </>        </div>        <>          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]" />          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  " />          <motion.div className="absolute right-1/2 translate-x-[1.5px] bottom-1/2 bg-cyan-600 translate-y-[14px] w-[4px] h-[4px] rounded-full z-40 blur-[3px]" />          <motion.div className="absolute right-1/2 translate-x-[0.5px] bottom-1/2 bg-cyan-300 translate-y-[14px] w-[2px] h-[2px] rounded-full z-40 " />        </>      </div>    </motion.div>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/3d-pin.json

npx shadcn@latest add https://www.shadcn.io/registry/3d-pin.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/3d-pin.json

bunx shadcn@latest add https://www.shadcn.io/registry/3d-pin.json

Features

Interactive 3D transforms with perspective-based mouse tracking and smooth rotations
Animated pin perspective using Framer Motion with layered depth effects
Customizable hover states with configurable title and href links
Responsive design with automatic scaling and proper z-index layering
TypeScript support with complete prop definitions and type safety
shadcn/ui integration using design tokens and consistent styling patterns

Examples

Interactive Variant Switcher

Loading component...

"use client";import { PinContainer } from '@/components/ui/shadcn-io/3d-pin';import { useState } from 'react';const examples = [  {    title: "/ui.shadcn.io",    href: "https://ui.shadcn.com",    name: "shadcn/ui",    description: "Beautifully designed components built with Radix UI and Tailwind CSS.",    gradient: "from-violet-500 via-purple-500 to-blue-500"  },  {    title: "/nextjs.org",    href: "https://nextjs.org",    name: "Next.js",    description: "The React Framework for Production with hybrid static & server rendering.",    gradient: "from-emerald-500 via-teal-500 to-cyan-500"  },  {    title: "/react.dev",    href: "https://react.dev",    name: "React",    description: "A JavaScript library for building user interfaces with components.",    gradient: "from-orange-500 via-red-500 to-pink-500"  }];export default function ThreeDPinInteractiveDemo() {  const [currentExample, setCurrentExample] = useState(0);  const example = examples[currentExample];  return (    <div className="flex flex-col items-center space-y-8">      <div className="flex space-x-2">        {examples.map((_, index) => (          <button            key={index}            onClick={() => setCurrentExample(index)}            className={`px-3 py-1 rounded-md text-sm transition-colors ${              currentExample === index                ? "bg-primary text-primary-foreground"                : "bg-muted text-muted-foreground hover:bg-muted/80"            }`}          >            Example {index + 1}          </button>        ))}      </div>            <div className="h-[40rem] w-full flex items-center justify-center">        <PinContainer          key={currentExample}          title={example.title}          href={example.href}        >          <div className="flex basis-full flex-col p-4 tracking-tight text-slate-100/50 sm:basis-1/2 w-[20rem] h-[20rem]">            <h3 className="max-w-xs !pb-2 !m-0 font-bold text-base text-slate-100">              {example.name}            </h3>            <div className="text-base !m-0 !p-0 font-normal">              <span className="text-slate-500">                {example.description}              </span>            </div>            <div className={`flex flex-1 w-full rounded-lg mt-4 bg-gradient-to-br ${example.gradient}`} />          </div>        </PinContainer>      </div>    </div>  );}

"use client";import React, { useState } from "react";import { motion } from "motion/react";import { cn } from "@/lib/utils";export type PinContainerProps = {  children: React.ReactNode;  title?: string;  href?: string;  className?: string;  containerClassName?: string;};export const PinContainer = ({  children,  title,  href,  className,  containerClassName,}: PinContainerProps) => {  const [transform, setTransform] = useState(    "translate(-50%,-50%) rotateX(0deg)"  );  const onMouseEnter = () => {    setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)");  };  const onMouseLeave = () => {    setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)");  };  const handleClick = () => {    if (href) {      window.open(href, '_blank');    }  };  return (    <div      className={cn(        "relative group/pin z-50  cursor-pointer",        containerClassName      )}      onMouseEnter={onMouseEnter}      onMouseLeave={onMouseLeave}      onClick={handleClick}    >      <div        style={{          perspective: "1000px",          transform: "rotateX(70deg) translateZ(0deg)",        }}        className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"      >        <div          style={{            transform: transform,          }}          className="absolute left-1/2 p-4 top-1/2  flex justify-start items-start  rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] bg-black border border-white/[0.1] group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden"        >          <div className={cn(" relative z-50 ", className)}>{children}</div>        </div>      </div>      <PinPerspective title={title} href={href} />    </div>  );};export type PinPerspectiveProps = {  title?: string;  href?: string;};export const PinPerspective = ({  title,  href,}: PinPerspectiveProps) => {  return (    <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">      <div className=" w-full h-full -mt-7 flex-none  inset-0">        <div className="absolute top-0 inset-x-0  flex justify-center">          <a            href={href}            target={"_blank"}            className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 "          >            <span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">              {title}            </span>            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>          </a>        </div>        <div          style={{            perspective: "1000px",            transform: "rotateX(70deg) translateZ(0)",          }}          className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"        >          <>            <motion.div              initial={{                opacity: 0,                scale: 0,                x: "-50%",                y: "-50%",              }}              animate={{                opacity: [0, 1, 0.5, 0],                scale: 1,                z: 0,              }}              transition={{                duration: 6,                repeat: Infinity,                delay: 0,              }}              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"            ></motion.div>            <motion.div              initial={{                opacity: 0,                scale: 0,                x: "-50%",                y: "-50%",              }}              animate={{                opacity: [0, 1, 0.5, 0],                scale: 1,                z: 0,              }}              transition={{                duration: 6,                repeat: Infinity,                delay: 2,              }}              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"            ></motion.div>            <motion.div              initial={{                opacity: 0,                scale: 0,                x: "-50%",                y: "-50%",              }}              animate={{                opacity: [0, 1, 0.5, 0],                scale: 1,                z: 0,              }}              transition={{                duration: 6,                repeat: Infinity,                delay: 4,              }}              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"            ></motion.div>          </>        </div>        <>          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]" />          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  " />          <motion.div className="absolute right-1/2 translate-x-[1.5px] bottom-1/2 bg-cyan-600 translate-y-[14px] w-[4px] h-[4px] rounded-full z-40 blur-[3px]" />          <motion.div className="absolute right-1/2 translate-x-[0.5px] bottom-1/2 bg-cyan-300 translate-y-[14px] w-[2px] h-[2px] rounded-full z-40 " />        </>      </div>    </motion.div>  );};

Demonstrates different content configurations with smooth transitions between examples.

Use Cases

This free open source React component works well for:

Portfolio showcases - Project pins with interactive 3D effects built with Next.js
Product displays - Feature pins with engaging hover animations using TypeScript
Link previews - Enhanced navigation pins with Tailwind CSS styling
Landing pages - Eye-catching hero sections with 3D perspective transforms
Dashboard pins - Interactive data containers with professional visual appeal

API Reference

PinContainer

Prop	Type	Default	Description
`children`	`React.ReactNode`	required	Content to display inside the pin container
`title`	`string`	`undefined`	Title text shown on hover in the perspective overlay
`href`	`string`	`"/"`	URL to navigate to when clicked
`className`	`string`	`undefined`	Additional CSS classes for the inner content
`containerClassName`	`string`	`undefined`	Additional CSS classes for the outer container

PinPerspective

Prop	Type	Default	Description
`title`	`string`	`undefined`	Title text for the hover overlay link
`href`	`string`	`undefined`	URL for the overlay link target

Implementation Notes

Component requires motion library for smooth animations and transforms
Place within a container with sufficient height (recommended: 40rem minimum)
Uses CSS transforms and perspective for 3D effects - avoid conflicting transform styles
Hover states trigger automatic rotation and scaling animations
Links open in new tabs by default for external URLs
Compatible with both light and dark themes through design tokens

React3d-pin

React3d-pin

On this page