Shapes Hero

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Shape Hero
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion } from "motion/react";
14import { Pacifico } from "next/font/google";
15import { cn } from "@/lib/utils";
16 
17const pacifico = Pacifico({
18  subsets: ["latin"],
19  weight: ["400"],
20  variable: "--font-pacifico",
21});
22 
23function ElegantShape({
24  className,
25  delay = 0,
26  width = 400,
27  height = 100,
28  rotate = 0,
29  gradient = "from-white/[0.08]",
30  borderRadius = 16,
31}: {
32  className?: string;
33  delay?: number;
34  width?: number;
35  height?: number;
36  rotate?: number;
37  gradient?: string;
38  borderRadius?: number;
39}) {
40  return (
41    <motion.div
42      animate={{
43        opacity: 1,
44        y: 0,
45        rotate,
46      }}
47      className={cn("absolute", className)}
48      initial={{
49        opacity: 0,
50        y: -150,
51        rotate: rotate - 15,
52      }}
53      transition={{
54        duration: 2.4,
55        delay,
56        ease: [0.23, 0.86, 0.39, 0.96],
57        opacity: { duration: 1.2 },
58      }}
59    >
60      <motion.div
61        animate={{
62          y: [0, 15, 0],
63        }}
64        className="relative"
65        style={{
66          width,
67          height,
68        }}
69        transition={{
70          duration: 12,
71          repeat: Number.POSITIVE_INFINITY,
72          ease: "easeInOut",
73        }}
74      >
75        <div
76          className={cn(
77            "absolute inset-0",
78            "bg-linear-to-r to-transparent",
79            gradient,
80            "backdrop-blur-[1px]",
81            "ring-1 ring-white/[0.03] dark:ring-white/[0.02]",
82            "shadow-[0_2px_16px_-2px_rgba(255,255,255,0.04)]",
83            "after:absolute after:inset-0",
84            "after:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.12),transparent_70%)]",
85            "after:rounded-[inherit]"
86          )}
87          style={{ borderRadius }}
88        />
89      </motion.div>
90    </motion.div>
91  );
92}
93 
94export default function ShapeHero({
95  title1 = "Elevate Your",
96  title2 = "Digital Vision",
97}: {
98  title1?: string;
99  title2?: string;
100}) {
101  const fadeUpVariants = {
102    hidden: { opacity: 0, y: 30 },
103    visible: (i: number) => ({
104      opacity: 1,
105      y: 0,
106      transition: {
107        duration: 1,
108        delay: 0.5 + i * 0.2,
109        ease: [0.25, 0.4, 0.25, 1],
110      },
111    }),
112  };
113 
114  return (
115// … truncated