3D Pin

Source: Aceternity UI ↗
Author: Aceternity UI
Licence: Aceternity UI licence (free component)

Loading…

On hover the card tips back into a pin with a title, a beam and pulsing rings.

Code

"use client";
import React from "react";
import { PinContainer } from "@/lab/aceternity/ui/3d-pin";
import { Fit } from "./_fit";

export default function AnimatedPinDemo() {
  return (
    <Fit width={560} height={500}>
      <div className="h-full w-full flex items-center justify-center">
        <PinContainer title="/ui.aceternity.com">
          <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">Aceternity UI</h3>
            <div className="text-base !m-0 !p-0 font-normal">
              <span className="text-slate-500">Customizable Tailwind CSS and Framer Motion Components.</span>
            </div>
            <div className="flex flex-1 w-full rounded-lg mt-4 bg-gradient-to-br from-violet-500 via-purple-500 to-blue-500" />
          </div>
        </PinContainer>
      </div>
    </Fit>
  );
}

Prompt

Build "3D Pin", a 3d animation. What it does: On hover the card tips back into a pin with a title, a beam and pulsing rings. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: the Motion library. It sits on a dark background, in a square frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/3d-pin (Aceternity UI, Aceternity UI licence (free component)).