/**
* Zepa UI — hand-unicorn
* https://zepa.design/components/hand-unicorn
* Free to use in your projects. Please don't republish or resell as your own.
*/
/**
* This Zepa scene is created with: Unicorn Studio
* My Remix scene: https://unicorn.studio/remix/uADuQdbYY5O9WTN5LucV
* React implementation: zepa
* Used with permission.
*/
"use client";
import { motion } from "framer-motion";
import type { Transition } from "framer-motion";
import UnicornScene from "unicornstudio-react/next";
const fadeUp = (delay: number) => ({
initial: { opacity: 0, filter: "blur(12px)", y: 20 },
animate: { opacity: 1, filter: "blur(0px)", y: 0 },
transition: { duration: 1.1, ease: "easeOut", delay } as Transition,
});
export default function HandUnicorn() {
return (
<div className="relative w-full h-screen">
<UnicornScene
jsonFilePath="/unicorn/hand-unicorn.json"
sdkUrl="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.5/dist/unicornStudio.umd.js"
width="100%"
height="100%"
lazyLoad={true}
/>
{/* Logo + tagline — top right */}
<div className="absolute top-16 right-16 flex flex-col items-end gap-1 pointer-events-none select-none">
<motion.img
src="https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png"
alt="Zepa"
className="h-20 w-auto object-contain"
{...fadeUp(0.2)}
/>
</div>
{/* Text overlay — bottom left */}
<div className="absolute bottom-20 left-20 flex flex-col gap-1 pointer-events-none select-none">
<motion.p
className="text-white text-6xl font-semibold tracking-[0.15em] uppercase"
{...fadeUp(0.3)}
>
zepa hand
</motion.p>
<motion.p
className="text-white/50 text-base font-medium max-w-sm leading-snug"
{...fadeUp(0.5)}
>
growing react and next components , curated ui library and built for developers who care about details.
</motion.p>
</div>
</div>
);
}
export const __demoId = "4c9d29be5ef8"