bynana-ui 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blur-fade-effect/index.js +2 -0
- package/dist/blur-fade-effect/index.js.map +1 -0
- package/dist/blur-fade-effect/index.mjs +2 -0
- package/dist/blur-fade-effect/index.mjs.map +1 -0
- package/dist/file-upload/index.js +16 -0
- package/dist/file-upload/index.js.map +1 -0
- package/dist/file-upload/index.mjs +16 -0
- package/dist/file-upload/index.mjs.map +1 -0
- package/dist/index.js +36 -15
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +36 -15
- package/dist/index.mjs.map +1 -1
- package/dist/pixel-transition/index.js +23 -0
- package/dist/pixel-transition/index.js.map +1 -0
- package/dist/pixel-transition/index.mjs +23 -0
- package/dist/pixel-transition/index.mjs.map +1 -0
- package/dist/shape-hero/index.js +2 -0
- package/dist/shape-hero/index.js.map +1 -0
- package/dist/shape-hero/index.mjs +2 -0
- package/dist/shape-hero/index.mjs.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var y=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var y__namespace=/*#__PURE__*/_interopNamespace(y);var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(a,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of f(e))!u.call(a,r)&&r!==o&&h(a,r,{get:()=>e[r],enumerable:!(n=c(e,r))||n.enumerable});return a},b=(a,e,o)=>(g(a,e,"default"),o);var i={};b(i,y__namespace);function s(...a){return tailwindMerge.twMerge(clsx.clsx(a))}function d({className:a,delay:e=0,width:o=400,height:n=100,rotate:r=0,gradient:m="from-white/[0.08]",borderRadius:p=16}){return jsxRuntime.jsx(i.motion.div,{initial:{opacity:0,y:-150,rotate:r-15},animate:{opacity:1,y:0,rotate:r},transition:{duration:2.4,delay:e,ease:[.23,.86,.39,.96],opacity:{duration:1.2}},className:s("absolute",a),children:jsxRuntime.jsx(i.motion.div,{animate:{y:[0,15,0]},transition:{duration:12,repeat:1/0,ease:"easeInOut"},style:{width:o,height:n},className:"relative",children:jsxRuntime.jsx("div",{style:{borderRadius:p},className:s("absolute inset-0","bg-gradient-to-r to-transparent",m,"backdrop-blur-[1px]","ring-1 ring-white/[0.03] dark:ring-white/[0.02]","shadow-[0_2px_16px_-2px_rgba(255,255,255,0.04)]","after:absolute after:inset-0","after:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.12),transparent_70%)]","after:rounded-[inherit]")})})})}function k({title1:a="Elevate Your",title2:e="Digital Vision",subtitle:o="UI Components built with Tailwind CSS.",className:n}){let r={hidden:{opacity:0,y:30},visible:m=>({opacity:1,y:0,transition:{duration:1,delay:.5+m*.2,ease:[.25,.4,.25,1]}})};return jsxRuntime.jsxs("div",{className:s("relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-black dark:bg-[#030303]",n),children:[jsxRuntime.jsx("div",{className:"absolute inset-0 bg-gradient-to-br from-indigo-500/[0.02] via-transparent to-rose-500/[0.02] dark:from-indigo-500/[0.05] dark:via-transparent dark:to-rose-500/[0.05] blur-3xl"}),jsxRuntime.jsxs("div",{className:"absolute inset-0 overflow-hidden",children:[jsxRuntime.jsx(d,{delay:.3,width:300,height:500,rotate:-8,borderRadius:24,gradient:"from-indigo-500/[0.25] dark:from-indigo-500/[0.35]",className:"left-[-15%] top-[-10%]"}),jsxRuntime.jsx(d,{delay:.5,width:600,height:200,rotate:15,borderRadius:20,gradient:"from-rose-500/[0.25] dark:from-rose-500/[0.35]",className:"right-[-20%] bottom-[-5%]"}),jsxRuntime.jsx(d,{delay:.4,width:300,height:300,rotate:24,borderRadius:32,gradient:"from-violet-500/[0.25] dark:from-violet-500/[0.35]",className:"left-[-5%] top-[40%]"}),jsxRuntime.jsx(d,{delay:.6,width:250,height:100,rotate:-20,borderRadius:12,gradient:"from-amber-500/[0.25] dark:from-amber-500/[0.35]",className:"right-[10%] top-[5%]"}),jsxRuntime.jsx(d,{delay:.7,width:400,height:150,rotate:35,borderRadius:16,gradient:"from-emerald-500/[0.25] dark:from-emerald-500/[0.35]",className:"right-[-10%] top-[45%]"}),jsxRuntime.jsx(d,{delay:.2,width:200,height:200,rotate:-25,borderRadius:28,gradient:"from-blue-500/[0.25] dark:from-blue-500/[0.35]",className:"left-[20%] bottom-[10%]"}),jsxRuntime.jsx(d,{delay:.8,width:150,height:80,rotate:45,borderRadius:10,gradient:"from-purple-500/[0.25] dark:from-purple-500/[0.35]",className:"left-[40%] top-[15%]"}),jsxRuntime.jsx(d,{delay:.9,width:450,height:120,rotate:-12,borderRadius:18,gradient:"from-teal-500/[0.25] dark:from-teal-500/[0.35]",className:"left-[25%] top-[60%]"})]}),jsxRuntime.jsx("div",{className:"relative z-10 container mx-auto px-4 md:px-6",children:jsxRuntime.jsxs("div",{className:"max-w-3xl mx-auto text-center",children:[jsxRuntime.jsx(i.motion.div,{custom:1,variants:r,initial:"hidden",animate:"visible",children:jsxRuntime.jsxs("h1",{className:"text-4xl sm:text-6xl md:text-8xl font-bold mb-6 md:mb-8 tracking-tight",children:[jsxRuntime.jsx("span",{className:"bg-clip-text text-transparent bg-gradient-to-b from-black to-black/80 dark:from-white dark:to-white/80",children:a}),jsxRuntime.jsx("br",{}),jsxRuntime.jsx("span",{className:"bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 via-black/90 to-rose-300 dark:from-indigo-300 dark:via-white/90 dark:to-rose-300 font-serif italic",children:e})]})}),jsxRuntime.jsx(i.motion.div,{custom:2,variants:r,initial:"hidden",animate:"visible",children:jsxRuntime.jsx("p",{className:"text-base sm:text-lg md:text-xl text-white/60 dark:text-white/40 mb-8 leading-relaxed font-light tracking-wide max-w-xl mx-auto px-4",children:o})})]})}),jsxRuntime.jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-white via-transparent to-white/80 dark:from-[#030303] dark:via-transparent dark:to-[#030303]/80 pointer-events-none"})]})}var V=k;exports.ElegantShape=d;exports.ShapeHero=k;exports.default=V;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../node_modules/motion/dist/es/react.mjs","../../src/utils/cn.ts","../../src/shape-hero/index.tsx"],"names":["react_exports","__reExport","framer_motion_star","cn","inputs","twMerge","clsx","ElegantShape","className","delay","width","height","rotate","gradient","borderRadius","jsx","ShapeHero","title1","title2","subtitle","fadeUpVariants","i","jsxs","shape_hero_default"],"mappings":"s4BAAA,IAAAA,CAAAA,CAAA,EAAA,CAAAC,CAAAA,CAAAD,CAAAA,CAAAE,YAAAA,CAAAA,CCGO,SAASC,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCAA,SAASG,EAAa,CAClB,SAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CAAQ,CAAA,CACR,MAAAC,CAAAA,CAAQ,GAAA,CACR,MAAA,CAAAC,CAAAA,CAAS,GAAA,CACT,MAAA,CAAAC,CAAAA,CAAS,CAAA,CACT,QAAA,CAAAC,CAAAA,CAAW,mBAAA,CACX,YAAA,CAAAC,CAAAA,CAAe,EACnB,EAQG,CACC,OACIC,cAAAA,CAAC,CAAA,CAAA,MAAA,CAAO,GAAA,CAAP,CACG,QAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,IAAA,CAAM,MAAA,CAAQH,EAAS,EAAG,CAAA,CACpD,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,CAAA,CAAG,MAAA,CAAQA,CAAO,CAAA,CAC5C,UAAA,CAAY,CAAE,SAAU,GAAA,CAAK,KAAA,CAAAH,CAAAA,CAAO,IAAA,CAAM,CAAC,GAAA,CAAM,IAAM,GAAA,CAAM,GAAI,CAAA,CAAG,OAAA,CAAS,CAAE,QAAA,CAAU,GAAI,CAAE,CAAA,CAC/F,SAAA,CAAWN,CAAAA,CAAG,UAAA,CAAYK,CAAS,CAAA,CAEnC,QAAA,CAAAO,cAAAA,CAAC,CAAA,CAAA,MAAA,CAAO,GAAA,CAAP,CACG,OAAA,CAAS,CAAE,EAAG,CAAC,CAAA,CAAG,EAAA,CAAI,CAAC,CAAE,CAAA,CACzB,WAAY,CAAE,QAAA,CAAU,EAAA,CAAI,MAAA,CAAQ,CAAA,CAAA,CAAA,CAAU,IAAA,CAAM,WAAY,CAAA,CAChE,KAAA,CAAO,CAAE,KAAA,CAAAL,CAAAA,CAAO,MAAA,CAAAC,CAAO,CAAA,CACvB,SAAA,CAAU,UAAA,CAEV,QAAA,CAAAI,cAAAA,CAAC,KAAA,CAAA,CACG,MAAO,CAAE,YAAA,CAAAD,CAAa,CAAA,CACtB,SAAA,CAAWX,CAAAA,CACP,mBACA,iCAAA,CACAU,CAAAA,CACA,qBAAA,CACA,iDAAA,CACA,iDAAA,CACA,8BAAA,CACA,uFACA,yBACJ,CAAA,CACJ,CAAA,CACJ,CAAA,CACJ,CAER,CASA,SAASG,CAAAA,CAAU,CACf,MAAA,CAAAC,CAAAA,CAAS,cAAA,CACT,MAAA,CAAAC,CAAAA,CAAS,iBACT,QAAA,CAAAC,CAAAA,CAAW,wCAAA,CACX,SAAA,CAAAX,CACJ,CAAA,CAAmB,CACf,IAAMY,CAAAA,CAAiB,CACnB,MAAA,CAAQ,CAAE,OAAA,CAAS,EAAG,CAAA,CAAG,EAAG,CAAA,CAC5B,OAAA,CAAUC,CAAAA,GAAe,CACrB,OAAA,CAAS,CAAA,CACT,CAAA,CAAG,CAAA,CACH,UAAA,CAAY,CAAE,QAAA,CAAU,CAAA,CAAG,MAAO,EAAA,CAAMA,CAAAA,CAAI,EAAA,CAAK,IAAA,CAAM,CAAC,GAAA,CAAM,GAAK,GAAA,CAAM,CAAC,CAAE,CAChF,CAAA,CACJ,CAAA,CAEA,OACIC,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWnB,CAAAA,CAAG,0GAAA,CAA4GK,CAAS,CAAA,CACpI,QAAA,CAAA,CAAAO,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,gLAAA,CAAiL,CAAA,CAEhMO,eAAAA,CAAC,OAAI,SAAA,CAAU,kCAAA,CACX,QAAA,CAAA,CAAAP,cAAAA,CAACR,CAAAA,CAAA,CAAa,MAAO,EAAA,CAAK,KAAA,CAAO,GAAA,CAAK,MAAA,CAAQ,GAAA,CAAK,MAAA,CAAQ,GAAI,YAAA,CAAc,EAAA,CAAI,QAAA,CAAS,oDAAA,CAAqD,SAAA,CAAU,wBAAA,CAAyB,EAClLQ,cAAAA,CAACR,CAAAA,CAAA,CAAa,KAAA,CAAO,EAAA,CAAK,KAAA,CAAO,IAAK,MAAA,CAAQ,GAAA,CAAK,MAAA,CAAQ,EAAA,CAAI,YAAA,CAAc,EAAA,CAAI,SAAS,gDAAA,CAAiD,SAAA,CAAU,2BAAA,CAA4B,CAAA,CACjLQ,cAAAA,CAACR,CAAAA,CAAA,CAAa,KAAA,CAAO,EAAA,CAAK,KAAA,CAAO,GAAA,CAAK,MAAA,CAAQ,GAAA,CAAK,MAAA,CAAQ,EAAA,CAAI,YAAA,CAAc,EAAA,CAAI,QAAA,CAAS,oDAAA,CAAqD,SAAA,CAAU,sBAAA,CAAuB,EAChLQ,cAAAA,CAACR,CAAAA,CAAA,CAAa,KAAA,CAAO,EAAA,CAAK,KAAA,CAAO,IAAK,MAAA,CAAQ,GAAA,CAAK,MAAA,CAAQ,GAAA,CAAK,YAAA,CAAc,EAAA,CAAI,SAAS,kDAAA,CAAmD,SAAA,CAAU,sBAAA,CAAuB,CAAA,CAC/KQ,cAAAA,CAACR,CAAAA,CAAA,CAAa,KAAA,CAAO,EAAA,CAAK,KAAA,CAAO,GAAA,CAAK,MAAA,CAAQ,GAAA,CAAK,OAAQ,EAAA,CAAI,YAAA,CAAc,EAAA,CAAI,QAAA,CAAS,sDAAA,CAAuD,SAAA,CAAU,yBAAyB,CAAA,CACpLQ,cAAAA,CAACR,CAAAA,CAAA,CAAa,KAAA,CAAO,EAAA,CAAK,MAAO,GAAA,CAAK,MAAA,CAAQ,GAAA,CAAK,MAAA,CAAQ,GAAA,CAAK,YAAA,CAAc,EAAA,CAAI,QAAA,CAAS,gDAAA,CAAiD,SAAA,CAAU,yBAAA,CAA0B,CAAA,CAChLQ,cAAAA,CAACR,CAAAA,CAAA,CAAa,KAAA,CAAO,EAAA,CAAK,KAAA,CAAO,GAAA,CAAK,MAAA,CAAQ,EAAA,CAAI,OAAQ,EAAA,CAAI,YAAA,CAAc,EAAA,CAAI,QAAA,CAAS,oDAAA,CAAqD,SAAA,CAAU,uBAAuB,CAAA,CAC/KQ,cAAAA,CAACR,CAAAA,CAAA,CAAa,KAAA,CAAO,EAAA,CAAK,MAAO,GAAA,CAAK,MAAA,CAAQ,GAAA,CAAK,MAAA,CAAQ,GAAA,CAAK,YAAA,CAAc,GAAI,QAAA,CAAS,gDAAA,CAAiD,SAAA,CAAU,sBAAA,CAAuB,CAAA,CAAA,CACjL,CAAA,CAEAQ,eAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8CAAA,CACX,QAAA,CAAAO,eAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,+BAAA,CACX,QAAA,CAAA,CAAAP,cAAAA,CAAC,CAAA,CAAA,MAAA,CAAO,GAAA,CAAP,CAAW,MAAA,CAAQ,CAAA,CAAG,QAAA,CAAUK,CAAAA,CAAgB,OAAA,CAAQ,QAAA,CAAS,OAAA,CAAQ,SAAA,CACtE,SAAAE,eAAAA,CAAC,IAAA,CAAA,CAAG,SAAA,CAAU,wEAAA,CACV,QAAA,CAAA,CAAAP,cAAAA,CAAC,QAAK,SAAA,CAAU,wGAAA,CAA0G,QAAA,CAAAE,CAAAA,CAAO,CAAA,CACjIF,cAAAA,CAAC,OAAG,CAAA,CACJA,cAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,mKAAA,CAAqK,QAAA,CAAAG,CAAAA,CAAO,CAAA,CAAA,CAChM,CAAA,CACJ,CAAA,CACAH,cAAAA,CAAC,CAAA,CAAA,MAAA,CAAO,GAAA,CAAP,CAAW,OAAQ,CAAA,CAAG,QAAA,CAAUK,CAAAA,CAAgB,OAAA,CAAQ,QAAA,CAAS,OAAA,CAAQ,UACtE,QAAA,CAAAL,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,sIAAA,CAAwI,QAAA,CAAAI,EAAS,CAAA,CAClK,CAAA,CAAA,CACJ,CAAA,CACJ,CAAA,CAEAJ,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,4JAAA,CAA6J,CAAA,CAAA,CAChL,CAER,CAGA,IAAOQ,CAAAA,CAAQP","file":"index.js","sourcesContent":["export * from 'framer-motion';\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { motion } from \"motion/react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nfunction ElegantShape({\r\n className,\r\n delay = 0,\r\n width = 400,\r\n height = 100,\r\n rotate = 0,\r\n gradient = \"from-white/[0.08]\",\r\n borderRadius = 16,\r\n}: {\r\n className?: string;\r\n delay?: number;\r\n width?: number;\r\n height?: number;\r\n rotate?: number;\r\n gradient?: string;\r\n borderRadius?: number;\r\n}) {\r\n return (\r\n <motion.div\r\n initial={{ opacity: 0, y: -150, rotate: rotate - 15 }}\r\n animate={{ opacity: 1, y: 0, rotate: rotate }}\r\n transition={{ duration: 2.4, delay, ease: [0.23, 0.86, 0.39, 0.96], opacity: { duration: 1.2 } }}\r\n className={cn(\"absolute\", className)}\r\n >\r\n <motion.div\r\n animate={{ y: [0, 15, 0] }}\r\n transition={{ duration: 12, repeat: Infinity, ease: \"easeInOut\" }}\r\n style={{ width, height }}\r\n className=\"relative\"\r\n >\r\n <div\r\n style={{ borderRadius }}\r\n className={cn(\r\n \"absolute inset-0\",\r\n \"bg-gradient-to-r to-transparent\",\r\n gradient,\r\n \"backdrop-blur-[1px]\",\r\n \"ring-1 ring-white/[0.03] dark:ring-white/[0.02]\",\r\n \"shadow-[0_2px_16px_-2px_rgba(255,255,255,0.04)]\",\r\n \"after:absolute after:inset-0\",\r\n \"after:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.12),transparent_70%)]\",\r\n \"after:rounded-[inherit]\"\r\n )}\r\n />\r\n </motion.div>\r\n </motion.div>\r\n );\r\n}\r\n\r\ninterface ShapeHeroProps {\r\n title1?: string;\r\n title2?: string;\r\n subtitle?: string;\r\n className?: string;\r\n}\r\n\r\nfunction ShapeHero({\r\n title1 = \"Elevate Your\",\r\n title2 = \"Digital Vision\",\r\n subtitle = \"UI Components built with Tailwind CSS.\",\r\n className,\r\n}: ShapeHeroProps) {\r\n const fadeUpVariants = {\r\n hidden: { opacity: 0, y: 30 },\r\n visible: (i: number) => ({\r\n opacity: 1,\r\n y: 0,\r\n transition: { duration: 1, delay: 0.5 + i * 0.2, ease: [0.25, 0.4, 0.25, 1] },\r\n }),\r\n };\r\n\r\n return (\r\n <div className={cn(\"relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-black dark:bg-[#030303]\", className)}>\r\n <div className=\"absolute inset-0 bg-gradient-to-br from-indigo-500/[0.02] via-transparent to-rose-500/[0.02] dark:from-indigo-500/[0.05] dark:via-transparent dark:to-rose-500/[0.05] blur-3xl\" />\r\n\r\n <div className=\"absolute inset-0 overflow-hidden\">\r\n <ElegantShape delay={0.3} width={300} height={500} rotate={-8} borderRadius={24} gradient=\"from-indigo-500/[0.25] dark:from-indigo-500/[0.35]\" className=\"left-[-15%] top-[-10%]\" />\r\n <ElegantShape delay={0.5} width={600} height={200} rotate={15} borderRadius={20} gradient=\"from-rose-500/[0.25] dark:from-rose-500/[0.35]\" className=\"right-[-20%] bottom-[-5%]\" />\r\n <ElegantShape delay={0.4} width={300} height={300} rotate={24} borderRadius={32} gradient=\"from-violet-500/[0.25] dark:from-violet-500/[0.35]\" className=\"left-[-5%] top-[40%]\" />\r\n <ElegantShape delay={0.6} width={250} height={100} rotate={-20} borderRadius={12} gradient=\"from-amber-500/[0.25] dark:from-amber-500/[0.35]\" className=\"right-[10%] top-[5%]\" />\r\n <ElegantShape delay={0.7} width={400} height={150} rotate={35} borderRadius={16} gradient=\"from-emerald-500/[0.25] dark:from-emerald-500/[0.35]\" className=\"right-[-10%] top-[45%]\" />\r\n <ElegantShape delay={0.2} width={200} height={200} rotate={-25} borderRadius={28} gradient=\"from-blue-500/[0.25] dark:from-blue-500/[0.35]\" className=\"left-[20%] bottom-[10%]\" />\r\n <ElegantShape delay={0.8} width={150} height={80} rotate={45} borderRadius={10} gradient=\"from-purple-500/[0.25] dark:from-purple-500/[0.35]\" className=\"left-[40%] top-[15%]\" />\r\n <ElegantShape delay={0.9} width={450} height={120} rotate={-12} borderRadius={18} gradient=\"from-teal-500/[0.25] dark:from-teal-500/[0.35]\" className=\"left-[25%] top-[60%]\" />\r\n </div>\r\n\r\n <div className=\"relative z-10 container mx-auto px-4 md:px-6\">\r\n <div className=\"max-w-3xl mx-auto text-center\">\r\n <motion.div custom={1} variants={fadeUpVariants} initial=\"hidden\" animate=\"visible\">\r\n <h1 className=\"text-4xl sm:text-6xl md:text-8xl font-bold mb-6 md:mb-8 tracking-tight\">\r\n <span className=\"bg-clip-text text-transparent bg-gradient-to-b from-black to-black/80 dark:from-white dark:to-white/80\">{title1}</span>\r\n <br />\r\n <span className=\"bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 via-black/90 to-rose-300 dark:from-indigo-300 dark:via-white/90 dark:to-rose-300 font-serif italic\">{title2}</span>\r\n </h1>\r\n </motion.div>\r\n <motion.div custom={2} variants={fadeUpVariants} initial=\"hidden\" animate=\"visible\">\r\n <p className=\"text-base sm:text-lg md:text-xl text-white/60 dark:text-white/40 mb-8 leading-relaxed font-light tracking-wide max-w-xl mx-auto px-4\">{subtitle}</p>\r\n </motion.div>\r\n </div>\r\n </div>\r\n\r\n <div className=\"absolute inset-0 bg-gradient-to-t from-white via-transparent to-white/80 dark:from-[#030303] dark:via-transparent dark:to-[#030303]/80 pointer-events-none\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport { ShapeHero, ElegantShape };\r\nexport default ShapeHero;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as y from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(a,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of f(e))!u.call(a,r)&&r!==o&&h(a,r,{get:()=>e[r],enumerable:!(n=c(e,r))||n.enumerable});return a},b=(a,e,o)=>(g(a,e,"default"),o);var i={};b(i,y);function s(...a){return twMerge(clsx(a))}function d({className:a,delay:e=0,width:o=400,height:n=100,rotate:r=0,gradient:m="from-white/[0.08]",borderRadius:p=16}){return jsx(i.motion.div,{initial:{opacity:0,y:-150,rotate:r-15},animate:{opacity:1,y:0,rotate:r},transition:{duration:2.4,delay:e,ease:[.23,.86,.39,.96],opacity:{duration:1.2}},className:s("absolute",a),children:jsx(i.motion.div,{animate:{y:[0,15,0]},transition:{duration:12,repeat:1/0,ease:"easeInOut"},style:{width:o,height:n},className:"relative",children:jsx("div",{style:{borderRadius:p},className:s("absolute inset-0","bg-gradient-to-r to-transparent",m,"backdrop-blur-[1px]","ring-1 ring-white/[0.03] dark:ring-white/[0.02]","shadow-[0_2px_16px_-2px_rgba(255,255,255,0.04)]","after:absolute after:inset-0","after:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.12),transparent_70%)]","after:rounded-[inherit]")})})})}function k({title1:a="Elevate Your",title2:e="Digital Vision",subtitle:o="UI Components built with Tailwind CSS.",className:n}){let r={hidden:{opacity:0,y:30},visible:m=>({opacity:1,y:0,transition:{duration:1,delay:.5+m*.2,ease:[.25,.4,.25,1]}})};return jsxs("div",{className:s("relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-black dark:bg-[#030303]",n),children:[jsx("div",{className:"absolute inset-0 bg-gradient-to-br from-indigo-500/[0.02] via-transparent to-rose-500/[0.02] dark:from-indigo-500/[0.05] dark:via-transparent dark:to-rose-500/[0.05] blur-3xl"}),jsxs("div",{className:"absolute inset-0 overflow-hidden",children:[jsx(d,{delay:.3,width:300,height:500,rotate:-8,borderRadius:24,gradient:"from-indigo-500/[0.25] dark:from-indigo-500/[0.35]",className:"left-[-15%] top-[-10%]"}),jsx(d,{delay:.5,width:600,height:200,rotate:15,borderRadius:20,gradient:"from-rose-500/[0.25] dark:from-rose-500/[0.35]",className:"right-[-20%] bottom-[-5%]"}),jsx(d,{delay:.4,width:300,height:300,rotate:24,borderRadius:32,gradient:"from-violet-500/[0.25] dark:from-violet-500/[0.35]",className:"left-[-5%] top-[40%]"}),jsx(d,{delay:.6,width:250,height:100,rotate:-20,borderRadius:12,gradient:"from-amber-500/[0.25] dark:from-amber-500/[0.35]",className:"right-[10%] top-[5%]"}),jsx(d,{delay:.7,width:400,height:150,rotate:35,borderRadius:16,gradient:"from-emerald-500/[0.25] dark:from-emerald-500/[0.35]",className:"right-[-10%] top-[45%]"}),jsx(d,{delay:.2,width:200,height:200,rotate:-25,borderRadius:28,gradient:"from-blue-500/[0.25] dark:from-blue-500/[0.35]",className:"left-[20%] bottom-[10%]"}),jsx(d,{delay:.8,width:150,height:80,rotate:45,borderRadius:10,gradient:"from-purple-500/[0.25] dark:from-purple-500/[0.35]",className:"left-[40%] top-[15%]"}),jsx(d,{delay:.9,width:450,height:120,rotate:-12,borderRadius:18,gradient:"from-teal-500/[0.25] dark:from-teal-500/[0.35]",className:"left-[25%] top-[60%]"})]}),jsx("div",{className:"relative z-10 container mx-auto px-4 md:px-6",children:jsxs("div",{className:"max-w-3xl mx-auto text-center",children:[jsx(i.motion.div,{custom:1,variants:r,initial:"hidden",animate:"visible",children:jsxs("h1",{className:"text-4xl sm:text-6xl md:text-8xl font-bold mb-6 md:mb-8 tracking-tight",children:[jsx("span",{className:"bg-clip-text text-transparent bg-gradient-to-b from-black to-black/80 dark:from-white dark:to-white/80",children:a}),jsx("br",{}),jsx("span",{className:"bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 via-black/90 to-rose-300 dark:from-indigo-300 dark:via-white/90 dark:to-rose-300 font-serif italic",children:e})]})}),jsx(i.motion.div,{custom:2,variants:r,initial:"hidden",animate:"visible",children:jsx("p",{className:"text-base sm:text-lg md:text-xl text-white/60 dark:text-white/40 mb-8 leading-relaxed font-light tracking-wide max-w-xl mx-auto px-4",children:o})})]})}),jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-white via-transparent to-white/80 dark:from-[#030303] dark:via-transparent dark:to-[#030303]/80 pointer-events-none"})]})}var V=k;export{d as ElegantShape,k as ShapeHero,V as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../node_modules/motion/dist/es/react.mjs","../../src/utils/cn.ts","../../src/shape-hero/index.tsx"],"names":["react_exports","__reExport","framer_motion_star","cn","inputs","twMerge","clsx","ElegantShape","className","delay","width","height","rotate","gradient","borderRadius","jsx","ShapeHero","title1","title2","subtitle","fadeUpVariants","i","jsxs","shape_hero_default"],"mappings":"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","file":"index.mjs","sourcesContent":["export * from 'framer-motion';\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { motion } from \"motion/react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nfunction ElegantShape({\r\n className,\r\n delay = 0,\r\n width = 400,\r\n height = 100,\r\n rotate = 0,\r\n gradient = \"from-white/[0.08]\",\r\n borderRadius = 16,\r\n}: {\r\n className?: string;\r\n delay?: number;\r\n width?: number;\r\n height?: number;\r\n rotate?: number;\r\n gradient?: string;\r\n borderRadius?: number;\r\n}) {\r\n return (\r\n <motion.div\r\n initial={{ opacity: 0, y: -150, rotate: rotate - 15 }}\r\n animate={{ opacity: 1, y: 0, rotate: rotate }}\r\n transition={{ duration: 2.4, delay, ease: [0.23, 0.86, 0.39, 0.96], opacity: { duration: 1.2 } }}\r\n className={cn(\"absolute\", className)}\r\n >\r\n <motion.div\r\n animate={{ y: [0, 15, 0] }}\r\n transition={{ duration: 12, repeat: Infinity, ease: \"easeInOut\" }}\r\n style={{ width, height }}\r\n className=\"relative\"\r\n >\r\n <div\r\n style={{ borderRadius }}\r\n className={cn(\r\n \"absolute inset-0\",\r\n \"bg-gradient-to-r to-transparent\",\r\n gradient,\r\n \"backdrop-blur-[1px]\",\r\n \"ring-1 ring-white/[0.03] dark:ring-white/[0.02]\",\r\n \"shadow-[0_2px_16px_-2px_rgba(255,255,255,0.04)]\",\r\n \"after:absolute after:inset-0\",\r\n \"after:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.12),transparent_70%)]\",\r\n \"after:rounded-[inherit]\"\r\n )}\r\n />\r\n </motion.div>\r\n </motion.div>\r\n );\r\n}\r\n\r\ninterface ShapeHeroProps {\r\n title1?: string;\r\n title2?: string;\r\n subtitle?: string;\r\n className?: string;\r\n}\r\n\r\nfunction ShapeHero({\r\n title1 = \"Elevate Your\",\r\n title2 = \"Digital Vision\",\r\n subtitle = \"UI Components built with Tailwind CSS.\",\r\n className,\r\n}: ShapeHeroProps) {\r\n const fadeUpVariants = {\r\n hidden: { opacity: 0, y: 30 },\r\n visible: (i: number) => ({\r\n opacity: 1,\r\n y: 0,\r\n transition: { duration: 1, delay: 0.5 + i * 0.2, ease: [0.25, 0.4, 0.25, 1] },\r\n }),\r\n };\r\n\r\n return (\r\n <div className={cn(\"relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-black dark:bg-[#030303]\", className)}>\r\n <div className=\"absolute inset-0 bg-gradient-to-br from-indigo-500/[0.02] via-transparent to-rose-500/[0.02] dark:from-indigo-500/[0.05] dark:via-transparent dark:to-rose-500/[0.05] blur-3xl\" />\r\n\r\n <div className=\"absolute inset-0 overflow-hidden\">\r\n <ElegantShape delay={0.3} width={300} height={500} rotate={-8} borderRadius={24} gradient=\"from-indigo-500/[0.25] dark:from-indigo-500/[0.35]\" className=\"left-[-15%] top-[-10%]\" />\r\n <ElegantShape delay={0.5} width={600} height={200} rotate={15} borderRadius={20} gradient=\"from-rose-500/[0.25] dark:from-rose-500/[0.35]\" className=\"right-[-20%] bottom-[-5%]\" />\r\n <ElegantShape delay={0.4} width={300} height={300} rotate={24} borderRadius={32} gradient=\"from-violet-500/[0.25] dark:from-violet-500/[0.35]\" className=\"left-[-5%] top-[40%]\" />\r\n <ElegantShape delay={0.6} width={250} height={100} rotate={-20} borderRadius={12} gradient=\"from-amber-500/[0.25] dark:from-amber-500/[0.35]\" className=\"right-[10%] top-[5%]\" />\r\n <ElegantShape delay={0.7} width={400} height={150} rotate={35} borderRadius={16} gradient=\"from-emerald-500/[0.25] dark:from-emerald-500/[0.35]\" className=\"right-[-10%] top-[45%]\" />\r\n <ElegantShape delay={0.2} width={200} height={200} rotate={-25} borderRadius={28} gradient=\"from-blue-500/[0.25] dark:from-blue-500/[0.35]\" className=\"left-[20%] bottom-[10%]\" />\r\n <ElegantShape delay={0.8} width={150} height={80} rotate={45} borderRadius={10} gradient=\"from-purple-500/[0.25] dark:from-purple-500/[0.35]\" className=\"left-[40%] top-[15%]\" />\r\n <ElegantShape delay={0.9} width={450} height={120} rotate={-12} borderRadius={18} gradient=\"from-teal-500/[0.25] dark:from-teal-500/[0.35]\" className=\"left-[25%] top-[60%]\" />\r\n </div>\r\n\r\n <div className=\"relative z-10 container mx-auto px-4 md:px-6\">\r\n <div className=\"max-w-3xl mx-auto text-center\">\r\n <motion.div custom={1} variants={fadeUpVariants} initial=\"hidden\" animate=\"visible\">\r\n <h1 className=\"text-4xl sm:text-6xl md:text-8xl font-bold mb-6 md:mb-8 tracking-tight\">\r\n <span className=\"bg-clip-text text-transparent bg-gradient-to-b from-black to-black/80 dark:from-white dark:to-white/80\">{title1}</span>\r\n <br />\r\n <span className=\"bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 via-black/90 to-rose-300 dark:from-indigo-300 dark:via-white/90 dark:to-rose-300 font-serif italic\">{title2}</span>\r\n </h1>\r\n </motion.div>\r\n <motion.div custom={2} variants={fadeUpVariants} initial=\"hidden\" animate=\"visible\">\r\n <p className=\"text-base sm:text-lg md:text-xl text-white/60 dark:text-white/40 mb-8 leading-relaxed font-light tracking-wide max-w-xl mx-auto px-4\">{subtitle}</p>\r\n </motion.div>\r\n </div>\r\n </div>\r\n\r\n <div className=\"absolute inset-0 bg-gradient-to-t from-white via-transparent to-white/80 dark:from-[#030303] dark:via-transparent dark:to-[#030303]/80 pointer-events-none\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport { ShapeHero, ElegantShape };\r\nexport default ShapeHero;\r\n"]}
|