Components
Starting preview...
A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/cursor"use client";
import { useRef, useState, SVGProps } from "react";
import { Cursor } from "@/components/ui/cursor";
import { AnimatePresence, motion } from "framer-motion";
import { PlusIcon, } from "lucide-react";
const MouseIcon = (props: SVGProps<SVGSVGElement>) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={26}
height={31}
fill="none"
{...props}
>
<g clipPath="url(#a)">
<path
fill={"#22c55e"}
fillRule="evenodd"
stroke={"#fff"}
strokeLinecap="square"
strokeWidth={2}
d="M21.993 14.425 2.549 2.935l4.444 23.108 4.653-10.002z"
clipRule="evenodd"
/>
</g>
<defs>
<clipPath id="a">
<path fill={"#22c55e"} d="M0 0h26v31H0z" />
</clipPath>
</defs>
</svg>
);
};
export function CursorWithSpring() {
return (
<div>
<div className="p-4">
<Cursor
attachToParent
variants={{
initial: { height: 0, opacity: 0, scale: 0.3 },
animate: { height: "auto", opacity: 1, scale: 1 },
exit: { height: 0, opacity: 0, scale: 0.3 },
}}
transition={{
type: "spring",
duration: 0.3,
bounce: 0.1,
}}
className="overflow-hidden"
springConfig={{
bounce: 0.01,
}}
>
<img
src="https://i.pinimg.com/564x/4c/95/69/4c9569ab2928e5ae400a6a34e7c537a0.jpg"
alt="Christian Church, Eastern Europe"
className="h-40 w-40"
/>
</Cursor>
Christian Church, Eastern Europe
</div>
</div>
);
}
export { CursorWithSpring };