Components
Loading preview...
• Smooth cursor movement using spring • Configurable cursor variants "customCursorVariants" • Change cursor variant and text with "useSetCursorVariant()" hook • Change variant with "setCursorVariant()" • Change text with "setCursorText()"
@YoucefBnm
npx shadcn@latest add https://21st.dev/r/youcefbnm/custom-cursor"use client"
import { Button } from "@/components/ui/button"
import { CustomCursor, useSetCursorVariant } from "@/components/ui/custom-cursor"
export function CustomCursorDemo () {
const { cursorVariant, setCursorVariant, cursorText, setCursorText } = useSetCursorVariant()
return (
<>
<CustomCursor variant={cursorVariant} text={cursorText} />
<div className="bg-zinc-900 px-6 py-12 md:px-8 xl:px-12">
<div className="md:grid-cols-2 grid grid-cols-1 grid-flow-row items-center gap-8">
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4">
<h1 className="text-5xl font-medium text-white">
Crafting{" "}
<span className="text-teal-500">Digital Experiences</span>{" "}
Through Design
</h1>
<p className="tracking-tight text-muted/80">
Leading web design agency, dedicated to crafting exceptional
online experiences for businisses worldwide with passion for
crativity and a commitment to excellence, We specialize in
transforming visions into reality.
</p>
</div>
<div className="my-8">
<Button
onMouseEnter={() => setCursorVariant("sm")}
onMouseLeave={() => setCursorVariant("default")}
className="rounded-full"
size="lg"
variant={"secondary"}
>
Start your project
</Button>
</div>
</div>
<div
className="aspect-square rounded-md bg-muted size-40 md:size-auto"
onMouseEnter={() => setCursorText("View Project")}
onMouseLeave={() => setCursorText("")}
/>
</div>
</div>
</>
)
}