bynana-ui 1.7.0 → 1.9.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/ai-text-loading/index.js +2 -0
- package/dist/ai-text-loading/index.js.map +1 -0
- package/dist/ai-text-loading/index.mjs +2 -0
- package/dist/ai-text-loading/index.mjs.map +1 -0
- package/dist/ai-voice/index.js +3 -0
- package/dist/ai-voice/index.js.map +1 -0
- package/dist/ai-voice/index.mjs +3 -0
- package/dist/ai-voice/index.mjs.map +1 -0
- package/dist/background-paths/index.js +2 -0
- package/dist/background-paths/index.js.map +1 -0
- package/dist/background-paths/index.mjs +2 -0
- package/dist/background-paths/index.mjs.map +1 -0
- package/dist/floating-paths/index.js +2 -0
- package/dist/floating-paths/index.js.map +1 -0
- package/dist/floating-paths/index.mjs +2 -0
- package/dist/floating-paths/index.mjs.map +1 -0
- package/dist/folder/index.js +2 -0
- package/dist/folder/index.js.map +1 -0
- package/dist/folder/index.mjs +2 -0
- package/dist/folder/index.mjs.map +1 -0
- package/dist/glare-hover/index.js +32 -0
- package/dist/glare-hover/index.js.map +1 -0
- package/dist/glare-hover/index.mjs +32 -0
- package/dist/glare-hover/index.mjs.map +1 -0
- package/dist/index.js +44 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +44 -14
- package/dist/index.mjs.map +1 -1
- package/dist/logo-loop/index.js +2 -0
- package/dist/logo-loop/index.js.map +1 -0
- package/dist/logo-loop/index.mjs +2 -0
- package/dist/logo-loop/index.mjs.map +1 -0
- package/dist/magnet/index.js +2 -0
- package/dist/magnet/index.js.map +1 -0
- package/dist/magnet/index.mjs +2 -0
- package/dist/magnet/index.mjs.map +1 -0
- package/dist/magnet-lines/index.js +2 -0
- package/dist/magnet-lines/index.js.map +1 -0
- package/dist/magnet-lines/index.mjs +2 -0
- package/dist/magnet-lines/index.mjs.map +1 -0
- package/dist/team-selector/index.js +3 -0
- package/dist/team-selector/index.js.map +1 -0
- package/dist/team-selector/index.mjs +3 -0
- package/dist/team-selector/index.mjs.map +1 -0
- package/dist/testimonials-stars/index.js +3 -0
- package/dist/testimonials-stars/index.js.map +1 -0
- package/dist/testimonials-stars/index.mjs +3 -0
- package/dist/testimonials-stars/index.mjs.map +1 -0
- package/dist/text-type/index.js +2 -0
- package/dist/text-type/index.js.map +1 -0
- package/dist/text-type/index.mjs +2 -0
- package/dist/text-type/index.mjs.map +1 -0
- package/dist/tooltip-interactive/index.js +2 -0
- package/dist/tooltip-interactive/index.js.map +1 -0
- package/dist/tooltip-interactive/index.mjs +2 -0
- package/dist/tooltip-interactive/index.mjs.map +1 -0
- package/dist/tooltip-magnetic/index.js +2 -0
- package/dist/tooltip-magnetic/index.js.map +1 -0
- package/dist/tooltip-magnetic/index.mjs +2 -0
- package/dist/tooltip-magnetic/index.mjs.map +1 -0
- package/dist/tooltip-rich/index.js +2 -0
- package/dist/tooltip-rich/index.js.map +1 -0
- package/dist/tooltip-rich/index.mjs +2 -0
- package/dist/tooltip-rich/index.mjs.map +1 -0
- package/package.json +17 -2
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),framerMotion=require('framer-motion'),react=require('react'),jsxRuntime=require('react/jsx-runtime');function r(...t){return tailwindMerge.twMerge(clsx.clsx(t))}function g({texts:t=["Thinking...","Processing...","Analyzing...","Computing...","Almost..."],className:o,interval:n=1500}){let[i,s]=react.useState(0);return react.useEffect(()=>{let l=setInterval(()=>{s(c=>(c+1)%t.length);},n);return ()=>clearInterval(l)},[n,t.length]),jsxRuntime.jsx("div",{className:"flex items-center justify-center p-8",children:jsxRuntime.jsx(framerMotion.motion.div,{className:"relative px-4 py-2 w-full",initial:{opacity:0},animate:{opacity:1},transition:{duration:.4},children:jsxRuntime.jsx(framerMotion.AnimatePresence,{mode:"wait",children:jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0,backgroundPosition:["200% center","-200% center"]},exit:{opacity:0,y:-20},transition:{opacity:{duration:.3},y:{duration:.3},backgroundPosition:{duration:2.5,ease:"linear",repeat:1/0}},className:r("flex justify-center text-3xl font-bold bg-gradient-to-r from-neutral-950 via-neutral-400 to-neutral-950 dark:from-white dark:via-neutral-600 dark:to-white bg-[length:200%_100%] bg-clip-text text-transparent whitespace-nowrap min-w-max",o),children:t[i]},i)})})})}var h=g;exports.AITextLoading=g;exports.default=h;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/ai-text-loading/index.tsx"],"names":["cn","inputs","twMerge","clsx","AITextLoading","texts","className","interval","currentTextIndex","setCurrentTextIndex","useState","useEffect","timer","prevIndex","jsx","motion","AnimatePresence","ai_text_loading_default"],"mappings":"4OAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,UAAKF,CAAM,CAAC,CAC7B,CCOO,SAASG,EAAc,CAC5B,KAAA,CAAAC,EAAQ,CACN,aAAA,CACA,gBACA,cAAA,CACA,cAAA,CACA,WACF,CAAA,CACA,SAAA,CAAAC,CAAAA,CACA,SAAAC,CAAAA,CAAW,IACb,EAAuB,CACrB,GAAM,CAACC,CAAAA,CAAkBC,CAAmB,EAAIC,cAAAA,CAAS,CAAC,EAE1D,OAAAC,eAAAA,CAAU,IAAM,CACd,IAAMC,EAAQ,WAAA,CAAY,IAAM,CAC9BH,CAAAA,CAAqBI,CAAAA,EAAAA,CAAeA,EAAY,CAAA,EAAKR,CAAAA,CAAM,MAAM,EACnE,CAAA,CAAGE,CAAQ,CAAA,CAEX,OAAO,IAAM,aAAA,CAAcK,CAAK,CAClC,CAAA,CAAG,CAACL,EAAUF,CAAAA,CAAM,MAAM,CAAC,CAAA,CAGzBS,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,sCAAA,CACb,QAAA,CAAAA,eAACC,mBAAAA,CAAO,GAAA,CAAP,CACC,SAAA,CAAU,2BAAA,CACV,QAAS,CAAE,OAAA,CAAS,CAAE,CAAA,CACtB,OAAA,CAAS,CAAE,OAAA,CAAS,CAAE,EACtB,UAAA,CAAY,CAAE,SAAU,EAAI,CAAA,CAE5B,SAAAD,cAAAA,CAACE,4BAAAA,CAAA,CAAgB,IAAA,CAAK,MAAA,CACpB,SAAAF,cAAAA,CAACC,mBAAAA,CAAO,IAAP,CAEC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,EAAG,CAAA,CAC7B,QAAS,CACP,OAAA,CAAS,EACT,CAAA,CAAG,CAAA,CACH,kBAAA,CAAoB,CAAC,aAAA,CAAe,cAAc,CACpD,CAAA,CACA,IAAA,CAAM,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,GAAI,CAAA,CAC3B,WAAY,CACV,OAAA,CAAS,CAAE,QAAA,CAAU,EAAI,EACzB,CAAA,CAAG,CAAE,SAAU,EAAI,CAAA,CACnB,mBAAoB,CAClB,QAAA,CAAU,IACV,IAAA,CAAM,QAAA,CACN,OAAQ,CAAA,CAAA,CACV,CACF,EACA,SAAA,CAAWf,CAAAA,CACT,6OACAM,CACF,CAAA,CAEC,SAAAD,CAAAA,CAAMG,CAAgB,GAtBlBA,CAuBP,CAAA,CACF,EACF,CAAA,CACF,CAEJ,CAEA,IAAOS,CAAAA,CAAQb","file":"index.js","sourcesContent":["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 { cn } from \"../utils/cn\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\ninterface AITextLoadingProps {\r\n texts?: string[];\r\n className?: string;\r\n interval?: number;\r\n}\r\n\r\nexport function AITextLoading({\r\n texts = [\r\n \"Thinking...\",\r\n \"Processing...\",\r\n \"Analyzing...\",\r\n \"Computing...\",\r\n \"Almost...\",\r\n ],\r\n className,\r\n interval = 1500,\r\n}: AITextLoadingProps) {\r\n const [currentTextIndex, setCurrentTextIndex] = useState(0);\r\n\r\n useEffect(() => {\r\n const timer = setInterval(() => {\r\n setCurrentTextIndex((prevIndex) => (prevIndex + 1) % texts.length);\r\n }, interval);\r\n\r\n return () => clearInterval(timer);\r\n }, [interval, texts.length]);\r\n\r\n return (\r\n <div className=\"flex items-center justify-center p-8\">\r\n <motion.div\r\n className=\"relative px-4 py-2 w-full\"\r\n initial={{ opacity: 0 }}\r\n animate={{ opacity: 1 }}\r\n transition={{ duration: 0.4 }}\r\n >\r\n <AnimatePresence mode=\"wait\">\r\n <motion.div\r\n key={currentTextIndex}\r\n initial={{ opacity: 0, y: 20 }}\r\n animate={{\r\n opacity: 1,\r\n y: 0,\r\n backgroundPosition: [\"200% center\", \"-200% center\"],\r\n }}\r\n exit={{ opacity: 0, y: -20 }}\r\n transition={{\r\n opacity: { duration: 0.3 },\r\n y: { duration: 0.3 },\r\n backgroundPosition: {\r\n duration: 2.5,\r\n ease: \"linear\",\r\n repeat: Infinity,\r\n },\r\n }}\r\n className={cn(\r\n \"flex justify-center text-3xl font-bold bg-gradient-to-r from-neutral-950 via-neutral-400 to-neutral-950 dark:from-white dark:via-neutral-600 dark:to-white bg-[length:200%_100%] bg-clip-text text-transparent whitespace-nowrap min-w-max\",\r\n className\r\n )}\r\n >\r\n {texts[currentTextIndex]}\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default AITextLoading;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {motion,AnimatePresence}from'framer-motion';import {useState,useEffect}from'react';import {jsx}from'react/jsx-runtime';function r(...t){return twMerge(clsx(t))}function g({texts:t=["Thinking...","Processing...","Analyzing...","Computing...","Almost..."],className:o,interval:n=1500}){let[i,s]=useState(0);return useEffect(()=>{let l=setInterval(()=>{s(c=>(c+1)%t.length);},n);return ()=>clearInterval(l)},[n,t.length]),jsx("div",{className:"flex items-center justify-center p-8",children:jsx(motion.div,{className:"relative px-4 py-2 w-full",initial:{opacity:0},animate:{opacity:1},transition:{duration:.4},children:jsx(AnimatePresence,{mode:"wait",children:jsx(motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0,backgroundPosition:["200% center","-200% center"]},exit:{opacity:0,y:-20},transition:{opacity:{duration:.3},y:{duration:.3},backgroundPosition:{duration:2.5,ease:"linear",repeat:1/0}},className:r("flex justify-center text-3xl font-bold bg-gradient-to-r from-neutral-950 via-neutral-400 to-neutral-950 dark:from-white dark:via-neutral-600 dark:to-white bg-[length:200%_100%] bg-clip-text text-transparent whitespace-nowrap min-w-max",o),children:t[i]},i)})})})}var h=g;export{g as AITextLoading,h as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/ai-text-loading/index.tsx"],"names":["cn","inputs","twMerge","clsx","AITextLoading","texts","className","interval","currentTextIndex","setCurrentTextIndex","useState","useEffect","timer","prevIndex","jsx","motion","AnimatePresence","ai_text_loading_default"],"mappings":"2LAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,KAAKF,CAAM,CAAC,CAC7B,CCOO,SAASG,EAAc,CAC5B,KAAA,CAAAC,EAAQ,CACN,aAAA,CACA,gBACA,cAAA,CACA,cAAA,CACA,WACF,CAAA,CACA,SAAA,CAAAC,CAAAA,CACA,SAAAC,CAAAA,CAAW,IACb,EAAuB,CACrB,GAAM,CAACC,CAAAA,CAAkBC,CAAmB,EAAIC,QAAAA,CAAS,CAAC,EAE1D,OAAAC,SAAAA,CAAU,IAAM,CACd,IAAMC,EAAQ,WAAA,CAAY,IAAM,CAC9BH,CAAAA,CAAqBI,CAAAA,EAAAA,CAAeA,EAAY,CAAA,EAAKR,CAAAA,CAAM,MAAM,EACnE,CAAA,CAAGE,CAAQ,CAAA,CAEX,OAAO,IAAM,aAAA,CAAcK,CAAK,CAClC,CAAA,CAAG,CAACL,EAAUF,CAAAA,CAAM,MAAM,CAAC,CAAA,CAGzBS,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,sCAAA,CACb,QAAA,CAAAA,IAACC,MAAAA,CAAO,GAAA,CAAP,CACC,SAAA,CAAU,2BAAA,CACV,QAAS,CAAE,OAAA,CAAS,CAAE,CAAA,CACtB,OAAA,CAAS,CAAE,OAAA,CAAS,CAAE,EACtB,UAAA,CAAY,CAAE,SAAU,EAAI,CAAA,CAE5B,SAAAD,GAAAA,CAACE,eAAAA,CAAA,CAAgB,IAAA,CAAK,MAAA,CACpB,SAAAF,GAAAA,CAACC,MAAAA,CAAO,IAAP,CAEC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,EAAG,CAAA,CAC7B,QAAS,CACP,OAAA,CAAS,EACT,CAAA,CAAG,CAAA,CACH,kBAAA,CAAoB,CAAC,aAAA,CAAe,cAAc,CACpD,CAAA,CACA,IAAA,CAAM,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,GAAI,CAAA,CAC3B,WAAY,CACV,OAAA,CAAS,CAAE,QAAA,CAAU,EAAI,EACzB,CAAA,CAAG,CAAE,SAAU,EAAI,CAAA,CACnB,mBAAoB,CAClB,QAAA,CAAU,IACV,IAAA,CAAM,QAAA,CACN,OAAQ,CAAA,CAAA,CACV,CACF,EACA,SAAA,CAAWf,CAAAA,CACT,6OACAM,CACF,CAAA,CAEC,SAAAD,CAAAA,CAAMG,CAAgB,GAtBlBA,CAuBP,CAAA,CACF,EACF,CAAA,CACF,CAEJ,CAEA,IAAOS,CAAAA,CAAQb","file":"index.mjs","sourcesContent":["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 { cn } from \"../utils/cn\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\ninterface AITextLoadingProps {\r\n texts?: string[];\r\n className?: string;\r\n interval?: number;\r\n}\r\n\r\nexport function AITextLoading({\r\n texts = [\r\n \"Thinking...\",\r\n \"Processing...\",\r\n \"Analyzing...\",\r\n \"Computing...\",\r\n \"Almost...\",\r\n ],\r\n className,\r\n interval = 1500,\r\n}: AITextLoadingProps) {\r\n const [currentTextIndex, setCurrentTextIndex] = useState(0);\r\n\r\n useEffect(() => {\r\n const timer = setInterval(() => {\r\n setCurrentTextIndex((prevIndex) => (prevIndex + 1) % texts.length);\r\n }, interval);\r\n\r\n return () => clearInterval(timer);\r\n }, [interval, texts.length]);\r\n\r\n return (\r\n <div className=\"flex items-center justify-center p-8\">\r\n <motion.div\r\n className=\"relative px-4 py-2 w-full\"\r\n initial={{ opacity: 0 }}\r\n animate={{ opacity: 1 }}\r\n transition={{ duration: 0.4 }}\r\n >\r\n <AnimatePresence mode=\"wait\">\r\n <motion.div\r\n key={currentTextIndex}\r\n initial={{ opacity: 0, y: 20 }}\r\n animate={{\r\n opacity: 1,\r\n y: 0,\r\n backgroundPosition: [\"200% center\", \"-200% center\"],\r\n }}\r\n exit={{ opacity: 0, y: -20 }}\r\n transition={{\r\n opacity: { duration: 0.3 },\r\n y: { duration: 0.3 },\r\n backgroundPosition: {\r\n duration: 2.5,\r\n ease: \"linear\",\r\n repeat: Infinity,\r\n },\r\n }}\r\n className={cn(\r\n \"flex justify-center text-3xl font-bold bg-gradient-to-r from-neutral-950 via-neutral-400 to-neutral-950 dark:from-white dark:via-neutral-600 dark:to-white bg-[length:200%_100%] bg-clip-text text-transparent whitespace-nowrap min-w-max\",\r\n className\r\n )}\r\n >\r\n {texts[currentTextIndex]}\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default AITextLoading;\r\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function s(...o){return tailwindMerge.twMerge(clsx.clsx(o))}var y=({className:o})=>jsxRuntime.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o,children:[jsxRuntime.jsx("path",{d:"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"}),jsxRuntime.jsx("path",{d:"M19 10v2a7 7 0 0 1-14 0v-2"}),jsxRuntime.jsx("line",{x1:"12",x2:"12",y1:"19",y2:"22"})]});function I({className:o,autoDemo:p=true,onListeningChange:u}){let[a,n]=react.useState(false),[h,d]=react.useState(0),[b,g]=react.useState(false),[c,x]=react.useState(p);react.useEffect(()=>{g(true);},[]),react.useEffect(()=>{let t;return a?t=setInterval(()=>{d(i=>i+1);},1e3):d(0),()=>clearInterval(t)},[a]),react.useEffect(()=>{u?.(a);},[a,u]);let k=t=>{let i=Math.floor(t/60),m=t%60;return `${i.toString().padStart(2,"0")}:${m.toString().padStart(2,"0")}`};react.useEffect(()=>{if(!c)return;let t,i=()=>{n(true),t=setTimeout(()=>{n(false),t=setTimeout(i,1e3);},3e3);},m=setTimeout(i,100);return ()=>{clearTimeout(t),clearTimeout(m);}},[c]);let v=()=>{c?(x(false),n(false)):n(t=>!t);};return jsxRuntime.jsx("div",{className:s("w-full py-4",o),children:jsxRuntime.jsxs("div",{className:"relative max-w-xl w-full mx-auto flex items-center flex-col gap-2",children:[jsxRuntime.jsx("button",{className:s("group w-16 h-16 rounded-xl flex items-center justify-center transition-colors",a?"bg-none":"bg-none hover:bg-black/5 dark:hover:bg-white/5"),type:"button",onClick:v,children:a?jsxRuntime.jsx("div",{className:"w-6 h-6 rounded-sm animate-spin bg-black dark:bg-white cursor-pointer pointer-events-auto",style:{animationDuration:"3s"}}):jsxRuntime.jsx(y,{className:"w-6 h-6 text-black/90 dark:text-white/90"})}),jsxRuntime.jsx("span",{className:s("font-mono text-sm transition-opacity duration-300",a?"text-black/70 dark:text-white/70":"text-black/30 dark:text-white/30"),children:k(h)}),jsxRuntime.jsx("div",{className:"h-4 w-64 flex items-center justify-center gap-0.5",children:[...Array(48)].map((t,i)=>jsxRuntime.jsx("div",{className:s("w-0.5 rounded-full transition-all duration-300",a?"bg-black/50 dark:bg-white/50 animate-pulse":"bg-black/10 dark:bg-white/10 h-1"),style:a&&b?{height:`${20+Math.random()*80}%`,animationDelay:`${i*.05}s`}:void 0},i))}),jsxRuntime.jsx("p",{className:"h-4 text-xs text-black/70 dark:text-white/70",children:a?"Listening...":"Click to speak"})]})})}var A=I;
|
|
2
|
+
exports.AIVoice=I;exports.default=A;//# sourceMappingURL=index.js.map
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/ai-voice/index.tsx"],"names":["cn","inputs","twMerge","clsx","MicIcon","className","jsxs","jsx","AIVoice","autoDemo","onListeningChange","submitted","setSubmitted","useState","time","setTime","isClient","setIsClient","isDemo","setIsDemo","useEffect","intervalId","t","formatTime","seconds","mins","secs","timeoutId","runAnimation","initialTimeout","handleClick","prev","_","ai_voice_default"],"mappings":"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","file":"index.js","sourcesContent":["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 { useState, useEffect } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface AIVoiceProps {\r\n className?: string;\r\n autoDemo?: boolean;\r\n onListeningChange?: (isListening: boolean) => void;\r\n}\r\n\r\nconst MicIcon = ({ className }: { className?: string }) => (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n className={className}\r\n >\r\n <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\" />\r\n <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" />\r\n <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\" />\r\n </svg>\r\n);\r\n\r\nexport function AIVoice({\r\n className,\r\n autoDemo = true,\r\n onListeningChange,\r\n}: AIVoiceProps) {\r\n const [submitted, setSubmitted] = useState(false);\r\n const [time, setTime] = useState(0);\r\n const [isClient, setIsClient] = useState(false);\r\n const [isDemo, setIsDemo] = useState(autoDemo);\r\n\r\n useEffect(() => {\r\n setIsClient(true);\r\n }, []);\r\n\r\n useEffect(() => {\r\n let intervalId: NodeJS.Timeout;\r\n\r\n if (submitted) {\r\n intervalId = setInterval(() => {\r\n setTime((t) => t + 1);\r\n }, 1000);\r\n } else {\r\n setTime(0);\r\n }\r\n\r\n return () => clearInterval(intervalId);\r\n }, [submitted]);\r\n\r\n useEffect(() => {\r\n onListeningChange?.(submitted);\r\n }, [submitted, onListeningChange]);\r\n\r\n const formatTime = (seconds: number) => {\r\n const mins = Math.floor(seconds / 60);\r\n const secs = seconds % 60;\r\n return `${mins.toString().padStart(2, \"0\")}:${secs.toString().padStart(2, \"0\")}`;\r\n };\r\n\r\n useEffect(() => {\r\n if (!isDemo) return;\r\n\r\n let timeoutId: NodeJS.Timeout;\r\n const runAnimation = () => {\r\n setSubmitted(true);\r\n timeoutId = setTimeout(() => {\r\n setSubmitted(false);\r\n timeoutId = setTimeout(runAnimation, 1000);\r\n }, 3000);\r\n };\r\n\r\n const initialTimeout = setTimeout(runAnimation, 100);\r\n return () => {\r\n clearTimeout(timeoutId);\r\n clearTimeout(initialTimeout);\r\n };\r\n }, [isDemo]);\r\n\r\n const handleClick = () => {\r\n if (isDemo) {\r\n setIsDemo(false);\r\n setSubmitted(false);\r\n } else {\r\n setSubmitted((prev) => !prev);\r\n }\r\n };\r\n\r\n return (\r\n <div className={cn(\"w-full py-4\", className)}>\r\n <div className=\"relative max-w-xl w-full mx-auto flex items-center flex-col gap-2\">\r\n <button\r\n className={cn(\r\n \"group w-16 h-16 rounded-xl flex items-center justify-center transition-colors\",\r\n submitted\r\n ? \"bg-none\"\r\n : \"bg-none hover:bg-black/5 dark:hover:bg-white/5\"\r\n )}\r\n type=\"button\"\r\n onClick={handleClick}\r\n >\r\n {submitted ? (\r\n <div\r\n className=\"w-6 h-6 rounded-sm animate-spin bg-black dark:bg-white cursor-pointer pointer-events-auto\"\r\n style={{ animationDuration: \"3s\" }}\r\n />\r\n ) : (\r\n <MicIcon className=\"w-6 h-6 text-black/90 dark:text-white/90\" />\r\n )}\r\n </button>\r\n\r\n <span\r\n className={cn(\r\n \"font-mono text-sm transition-opacity duration-300\",\r\n submitted\r\n ? \"text-black/70 dark:text-white/70\"\r\n : \"text-black/30 dark:text-white/30\"\r\n )}\r\n >\r\n {formatTime(time)}\r\n </span>\r\n\r\n <div className=\"h-4 w-64 flex items-center justify-center gap-0.5\">\r\n {[...Array(48)].map((_, i) => (\r\n <div\r\n key={i}\r\n className={cn(\r\n \"w-0.5 rounded-full transition-all duration-300\",\r\n submitted\r\n ? \"bg-black/50 dark:bg-white/50 animate-pulse\"\r\n : \"bg-black/10 dark:bg-white/10 h-1\"\r\n )}\r\n style={\r\n submitted && isClient\r\n ? {\r\n height: `${20 + Math.random() * 80}%`,\r\n animationDelay: `${i * 0.05}s`,\r\n }\r\n : undefined\r\n }\r\n />\r\n ))}\r\n </div>\r\n\r\n <p className=\"h-4 text-xs text-black/70 dark:text-white/70\">\r\n {submitted ? \"Listening...\" : \"Click to speak\"}\r\n </p>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default AIVoice;\r\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import {useState,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';function s(...o){return twMerge(clsx(o))}var y=({className:o})=>jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o,children:[jsx("path",{d:"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"}),jsx("path",{d:"M19 10v2a7 7 0 0 1-14 0v-2"}),jsx("line",{x1:"12",x2:"12",y1:"19",y2:"22"})]});function I({className:o,autoDemo:p=true,onListeningChange:u}){let[a,n]=useState(false),[h,d]=useState(0),[b,g]=useState(false),[c,x]=useState(p);useEffect(()=>{g(true);},[]),useEffect(()=>{let t;return a?t=setInterval(()=>{d(i=>i+1);},1e3):d(0),()=>clearInterval(t)},[a]),useEffect(()=>{u?.(a);},[a,u]);let k=t=>{let i=Math.floor(t/60),m=t%60;return `${i.toString().padStart(2,"0")}:${m.toString().padStart(2,"0")}`};useEffect(()=>{if(!c)return;let t,i=()=>{n(true),t=setTimeout(()=>{n(false),t=setTimeout(i,1e3);},3e3);},m=setTimeout(i,100);return ()=>{clearTimeout(t),clearTimeout(m);}},[c]);let v=()=>{c?(x(false),n(false)):n(t=>!t);};return jsx("div",{className:s("w-full py-4",o),children:jsxs("div",{className:"relative max-w-xl w-full mx-auto flex items-center flex-col gap-2",children:[jsx("button",{className:s("group w-16 h-16 rounded-xl flex items-center justify-center transition-colors",a?"bg-none":"bg-none hover:bg-black/5 dark:hover:bg-white/5"),type:"button",onClick:v,children:a?jsx("div",{className:"w-6 h-6 rounded-sm animate-spin bg-black dark:bg-white cursor-pointer pointer-events-auto",style:{animationDuration:"3s"}}):jsx(y,{className:"w-6 h-6 text-black/90 dark:text-white/90"})}),jsx("span",{className:s("font-mono text-sm transition-opacity duration-300",a?"text-black/70 dark:text-white/70":"text-black/30 dark:text-white/30"),children:k(h)}),jsx("div",{className:"h-4 w-64 flex items-center justify-center gap-0.5",children:[...Array(48)].map((t,i)=>jsx("div",{className:s("w-0.5 rounded-full transition-all duration-300",a?"bg-black/50 dark:bg-white/50 animate-pulse":"bg-black/10 dark:bg-white/10 h-1"),style:a&&b?{height:`${20+Math.random()*80}%`,animationDelay:`${i*.05}s`}:void 0},i))}),jsx("p",{className:"h-4 text-xs text-black/70 dark:text-white/70",children:a?"Listening...":"Click to speak"})]})})}var A=I;
|
|
2
|
+
export{I as AIVoice,A as default};//# sourceMappingURL=index.mjs.map
|
|
3
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/ai-voice/index.tsx"],"names":["cn","inputs","twMerge","clsx","MicIcon","className","jsxs","jsx","AIVoice","autoDemo","onListeningChange","submitted","setSubmitted","useState","time","setTime","isClient","setIsClient","isDemo","setIsDemo","useEffect","intervalId","t","formatTime","seconds","mins","secs","timeoutId","runAnimation","initialTimeout","handleClick","prev","_","ai_voice_default"],"mappings":"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","file":"index.mjs","sourcesContent":["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 { useState, useEffect } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface AIVoiceProps {\r\n className?: string;\r\n autoDemo?: boolean;\r\n onListeningChange?: (isListening: boolean) => void;\r\n}\r\n\r\nconst MicIcon = ({ className }: { className?: string }) => (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n className={className}\r\n >\r\n <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\" />\r\n <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" />\r\n <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\" />\r\n </svg>\r\n);\r\n\r\nexport function AIVoice({\r\n className,\r\n autoDemo = true,\r\n onListeningChange,\r\n}: AIVoiceProps) {\r\n const [submitted, setSubmitted] = useState(false);\r\n const [time, setTime] = useState(0);\r\n const [isClient, setIsClient] = useState(false);\r\n const [isDemo, setIsDemo] = useState(autoDemo);\r\n\r\n useEffect(() => {\r\n setIsClient(true);\r\n }, []);\r\n\r\n useEffect(() => {\r\n let intervalId: NodeJS.Timeout;\r\n\r\n if (submitted) {\r\n intervalId = setInterval(() => {\r\n setTime((t) => t + 1);\r\n }, 1000);\r\n } else {\r\n setTime(0);\r\n }\r\n\r\n return () => clearInterval(intervalId);\r\n }, [submitted]);\r\n\r\n useEffect(() => {\r\n onListeningChange?.(submitted);\r\n }, [submitted, onListeningChange]);\r\n\r\n const formatTime = (seconds: number) => {\r\n const mins = Math.floor(seconds / 60);\r\n const secs = seconds % 60;\r\n return `${mins.toString().padStart(2, \"0\")}:${secs.toString().padStart(2, \"0\")}`;\r\n };\r\n\r\n useEffect(() => {\r\n if (!isDemo) return;\r\n\r\n let timeoutId: NodeJS.Timeout;\r\n const runAnimation = () => {\r\n setSubmitted(true);\r\n timeoutId = setTimeout(() => {\r\n setSubmitted(false);\r\n timeoutId = setTimeout(runAnimation, 1000);\r\n }, 3000);\r\n };\r\n\r\n const initialTimeout = setTimeout(runAnimation, 100);\r\n return () => {\r\n clearTimeout(timeoutId);\r\n clearTimeout(initialTimeout);\r\n };\r\n }, [isDemo]);\r\n\r\n const handleClick = () => {\r\n if (isDemo) {\r\n setIsDemo(false);\r\n setSubmitted(false);\r\n } else {\r\n setSubmitted((prev) => !prev);\r\n }\r\n };\r\n\r\n return (\r\n <div className={cn(\"w-full py-4\", className)}>\r\n <div className=\"relative max-w-xl w-full mx-auto flex items-center flex-col gap-2\">\r\n <button\r\n className={cn(\r\n \"group w-16 h-16 rounded-xl flex items-center justify-center transition-colors\",\r\n submitted\r\n ? \"bg-none\"\r\n : \"bg-none hover:bg-black/5 dark:hover:bg-white/5\"\r\n )}\r\n type=\"button\"\r\n onClick={handleClick}\r\n >\r\n {submitted ? (\r\n <div\r\n className=\"w-6 h-6 rounded-sm animate-spin bg-black dark:bg-white cursor-pointer pointer-events-auto\"\r\n style={{ animationDuration: \"3s\" }}\r\n />\r\n ) : (\r\n <MicIcon className=\"w-6 h-6 text-black/90 dark:text-white/90\" />\r\n )}\r\n </button>\r\n\r\n <span\r\n className={cn(\r\n \"font-mono text-sm transition-opacity duration-300\",\r\n submitted\r\n ? \"text-black/70 dark:text-white/70\"\r\n : \"text-black/30 dark:text-white/30\"\r\n )}\r\n >\r\n {formatTime(time)}\r\n </span>\r\n\r\n <div className=\"h-4 w-64 flex items-center justify-center gap-0.5\">\r\n {[...Array(48)].map((_, i) => (\r\n <div\r\n key={i}\r\n className={cn(\r\n \"w-0.5 rounded-full transition-all duration-300\",\r\n submitted\r\n ? \"bg-black/50 dark:bg-white/50 animate-pulse\"\r\n : \"bg-black/10 dark:bg-white/10 h-1\"\r\n )}\r\n style={\r\n submitted && isClient\r\n ? {\r\n height: `${20 + Math.random() * 80}%`,\r\n animationDelay: `${i * 0.05}s`,\r\n }\r\n : undefined\r\n }\r\n />\r\n ))}\r\n </div>\r\n\r\n <p className=\"h-4 text-xs text-black/70 dark:text-white/70\">\r\n {submitted ? \"Listening...\" : \"Click to speak\"}\r\n </p>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default AIVoice;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),jsxRuntime=require('react/jsx-runtime');function v(c,n,o){let l=o==="primary"?150:o==="secondary"?100:60,y=c*.2,i=[],t=o==="primary"?10:o==="secondary"?8:6,a=2400,w=800,M=-2400,N=-800+c*25;for(let r=0;r<=t;r++){let d=r/t,s=1-(1-d)**2,p=a+(M-a)*s,h=w+(N-w)*s,m=1-s*.3,g=Math.sin(d*Math.PI*3+y)*(l*.7*m),f=Math.cos(d*Math.PI*4+y)*(l*.3*m),$=Math.sin(d*Math.PI*2+y)*(l*.2*m);i.push({x:p*n,y:h+g+f+$});}return i.map((r,d)=>{if(d===0)return `M ${r.x} ${r.y}`;let s=i[d-1],p=.4,h=s.x+(r.x-s.x)*p,m=s.y,g=s.x+(r.x-s.x)*(1-p),f=r.y;return `C ${h} ${m}, ${g} ${f}, ${r.x} ${r.y}`}).join(" ")}var b=c=>`${c}-${Math.random().toString(36).substr(2,9)}`,I=react.memo(function({position:n}){let o=react.useMemo(()=>Array.from({length:12},(t,a)=>({id:b("primary"),d:v(a,n,"primary"),opacity:.15+a*.02,width:4+a*.3,duration:25,delay:0})),[n]),l=react.useMemo(()=>Array.from({length:15},(t,a)=>({id:b("secondary"),d:v(a,n,"secondary"),opacity:.12+a*.015,width:3+a*.25,duration:20,delay:0})),[n]),y=react.useMemo(()=>Array.from({length:10},(t,a)=>({id:b("accent"),d:v(a,n,"accent"),opacity:.08+a*.12,width:2+a*.2,duration:15,delay:0})),[n]),i={opacity:1,scale:1,transition:{opacity:{duration:1},scale:{duration:1}}};return jsxRuntime.jsx("div",{className:"absolute inset-0 pointer-events-none overflow-hidden",children:jsxRuntime.jsxs("svg",{className:"w-full h-full text-slate-950/40 dark:text-white/40",viewBox:"-2400 -800 4800 1600",fill:"none",preserveAspectRatio:"xMidYMid slice",children:[jsxRuntime.jsx("title",{children:"Background Paths"}),jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:"sharedGradient",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[jsxRuntime.jsx("stop",{offset:"0%",stopColor:"rgba(147, 51, 234, 0.5)"}),jsxRuntime.jsx("stop",{offset:"50%",stopColor:"rgba(236, 72, 153, 0.5)"}),jsxRuntime.jsx("stop",{offset:"100%",stopColor:"rgba(59, 130, 246, 0.5)"})]})}),jsxRuntime.jsx("g",{className:"primary-waves",children:o.map(t=>jsxRuntime.jsx(framerMotion.motion.path,{d:t.d,stroke:"url(#sharedGradient)",strokeWidth:t.width,strokeLinecap:"round",initial:{opacity:0,scale:.8},animate:{...i,y:[0,-15,0]},transition:{...i.transition,y:{duration:8,repeat:1/0,ease:"easeInOut",repeatType:"reverse"}},style:{opacity:t.opacity}},t.id))}),jsxRuntime.jsx("g",{className:"secondary-waves",style:{opacity:.8},children:l.map(t=>jsxRuntime.jsx(framerMotion.motion.path,{d:t.d,stroke:"url(#sharedGradient)",strokeWidth:t.width,strokeLinecap:"round",initial:{opacity:0,scale:.9},animate:{...i,y:[0,-10,0]},transition:{...i.transition,y:{duration:6,repeat:1/0,ease:"easeInOut",repeatType:"reverse"}},style:{opacity:t.opacity}},t.id))}),jsxRuntime.jsx("g",{className:"accent-waves",style:{opacity:.6},children:y.map(t=>jsxRuntime.jsx(framerMotion.motion.path,{d:t.d,stroke:"url(#sharedGradient)",strokeWidth:t.width,strokeLinecap:"round",initial:{opacity:0,scale:.95},animate:{...i,y:[0,-5,0]},transition:{...i.transition,y:{duration:4,repeat:1/0,ease:"easeInOut",repeatType:"reverse"}},style:{opacity:t.opacity}},t.id))})]})})}),A=react.memo(function({title:n}){return jsxRuntime.jsx(framerMotion.motion.h1,{className:"text-3xl sm:text-5xl md:text-5xl font-bold mb-8 tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-neutral-800/90 to-neutral-600/90 dark:from-white/90 dark:to-white/70",initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:1.2,ease:[.2,.65,.3,.9]},children:n})}),B=react.memo(function({title:n="Background Paths",className:o}){return jsxRuntime.jsxs("div",{className:`relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-black dark:bg-neutral-950 ${o||""}`,children:[jsxRuntime.jsx("div",{className:"absolute inset-0",children:jsxRuntime.jsx(I,{position:1})}),jsxRuntime.jsx("div",{className:"relative z-10 container mx-auto px-4 md:px-6 text-center",children:jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:2},className:"max-w-4xl mx-auto",children:jsxRuntime.jsx(A,{title:n})})})]})}),D=B;exports.BackgroundPaths=B;exports.default=D;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/background-paths/index.tsx"],"names":["generateAestheticPath","index","position","type","baseAmplitude","phase","points","segments","startX","startY","endX","endY","i","progress","eased","baseX","baseY","amplitudeFactor","wave1","wave2","wave3","point","prevPoint","tension","cp1x","cp1y","cp2x","cp2y","generateUniqueId","prefix","FloatingPaths","memo","primaryPaths","useMemo","_","secondaryPaths","accentPaths","sharedAnimationProps","jsx","jsxs","path","motion","AnimatedTitle","title","BackgroundPaths","className","background_paths_default"],"mappings":"+KAmBA,SAASA,CAAAA,CACPC,EACAC,CAAAA,CACAC,CAAAA,CACQ,CACR,IAAMC,CAAAA,CACJD,IAAS,SAAA,CAAY,GAAA,CAAMA,IAAS,WAAA,CAAc,GAAA,CAAM,GACpDE,CAAAA,CAAQJ,CAAAA,CAAQ,GAChBK,CAAAA,CAAkB,GAClBC,CAAAA,CAAWJ,CAAAA,GAAS,UAAY,EAAA,CAAKA,CAAAA,GAAS,YAAc,CAAA,CAAI,CAAA,CAEhEK,EAAS,IAAA,CACTC,CAAAA,CAAS,IACTC,CAAAA,CAAO,KAAA,CACPC,EAAO,IAAA,CAAOV,CAAAA,CAAQ,GAE5B,IAAA,IAASW,CAAAA,CAAI,EAAGA,CAAAA,EAAKL,CAAAA,CAAUK,IAAK,CAClC,IAAMC,EAAWD,CAAAA,CAAIL,CAAAA,CACfO,EAAQ,CAAA,CAAA,CAAK,CAAA,CAAID,IAAa,CAAA,CAE9BE,CAAAA,CAAQP,GAAUE,CAAAA,CAAOF,CAAAA,EAAUM,EACnCE,CAAAA,CAAQP,CAAAA,CAAAA,CAAUE,EAAOF,CAAAA,EAAUK,CAAAA,CAEnCG,EAAkB,CAAA,CAAIH,CAAAA,CAAQ,GAC9BI,CAAAA,CACJ,IAAA,CAAK,IAAIL,CAAAA,CAAW,IAAA,CAAK,GAAK,CAAA,CAAIR,CAAK,GACtCD,CAAAA,CAAgB,EAAA,CAAMa,GACnBE,CAAAA,CACJ,IAAA,CAAK,IAAIN,CAAAA,CAAW,IAAA,CAAK,GAAK,CAAA,CAAIR,CAAK,GACtCD,CAAAA,CAAgB,EAAA,CAAMa,GACnBG,CAAAA,CACJ,IAAA,CAAK,IAAIP,CAAAA,CAAW,IAAA,CAAK,GAAK,CAAA,CAAIR,CAAK,GACtCD,CAAAA,CAAgB,EAAA,CAAMa,GAEzBX,CAAAA,CAAO,IAAA,CAAK,CACV,CAAA,CAAGS,CAAAA,CAAQb,EACX,CAAA,CAAGc,CAAAA,CAAQE,EAAQC,CAAAA,CAAQC,CAC7B,CAAC,EACH,CAaA,OAXqBd,CAAAA,CAAO,GAAA,CAAI,CAACe,CAAAA,CAAcT,CAAAA,GAAc,CAC3D,GAAIA,CAAAA,GAAM,EAAG,OAAO,CAAA,EAAA,EAAKS,EAAM,CAAC,CAAA,CAAA,EAAIA,EAAM,CAAC,CAAA,CAAA,CAC3C,IAAMC,CAAAA,CAAYhB,CAAAA,CAAOM,EAAI,CAAC,CAAA,CACxBW,EAAU,EAAA,CACVC,CAAAA,CAAOF,EAAU,CAAA,CAAA,CAAKD,CAAAA,CAAM,EAAIC,CAAAA,CAAU,CAAA,EAAKC,EAC/CE,CAAAA,CAAOH,CAAAA,CAAU,EACjBI,CAAAA,CAAOJ,CAAAA,CAAU,GAAKD,CAAAA,CAAM,CAAA,CAAIC,EAAU,CAAA,GAAM,CAAA,CAAIC,GACpDI,CAAAA,CAAON,CAAAA,CAAM,EACnB,OAAO,CAAA,EAAA,EAAKG,CAAI,CAAA,CAAA,EAAIC,CAAI,KAAKC,CAAI,CAAA,CAAA,EAAIC,CAAI,CAAA,EAAA,EAAKN,CAAAA,CAAM,CAAC,CAAA,CAAA,EAAIA,CAAAA,CAAM,CAAC,CAAA,CAClE,CAAC,EAEmB,IAAA,CAAK,GAAG,CAC9B,CAEA,IAAMO,EAAoBC,CAAAA,EACxB,CAAA,EAAGA,CAAM,CAAA,CAAA,EAAI,IAAA,CAAK,QAAO,CAAE,QAAA,CAAS,EAAE,CAAA,CAAE,MAAA,CAAO,EAAG,CAAC,CAAC,GAEhDC,CAAAA,CAAgBC,UAAAA,CAAK,SAAuB,CAChD,QAAA,CAAA7B,CACF,CAAA,CAEG,CACD,IAAM8B,CAAAA,CAA2BC,aAAAA,CAC/B,IACE,KAAA,CAAM,IAAA,CAAK,CAAE,MAAA,CAAQ,EAAG,EAAG,CAACC,CAAAA,CAAGtB,KAAO,CACpC,EAAA,CAAIgB,EAAiB,SAAS,CAAA,CAC9B,EAAG5B,CAAAA,CAAsBY,CAAAA,CAAGV,EAAU,SAAS,CAAA,CAC/C,QAAS,GAAA,CAAOU,CAAAA,CAAI,IACpB,KAAA,CAAO,CAAA,CAAIA,EAAI,EAAA,CACf,QAAA,CAAU,GACV,KAAA,CAAO,CACT,EAAE,CAAA,CACJ,CAACV,CAAQ,CACX,CAAA,CAEMiC,EAA6BF,aAAAA,CACjC,IACE,MAAM,IAAA,CAAK,CAAE,OAAQ,EAAG,CAAA,CAAG,CAACC,CAAAA,CAAGtB,CAAAA,IAAO,CACpC,EAAA,CAAIgB,CAAAA,CAAiB,WAAW,CAAA,CAChC,CAAA,CAAG5B,EAAsBY,CAAAA,CAAGV,CAAAA,CAAU,WAAW,CAAA,CACjD,OAAA,CAAS,IAAOU,CAAAA,CAAI,IAAA,CACpB,MAAO,CAAA,CAAIA,CAAAA,CAAI,IACf,QAAA,CAAU,EAAA,CACV,MAAO,CACT,CAAA,CAAE,EACJ,CAACV,CAAQ,CACX,CAAA,CAEMkC,CAAAA,CAA0BH,cAC9B,IACE,KAAA,CAAM,KAAK,CAAE,MAAA,CAAQ,EAAG,CAAA,CAAG,CAACC,EAAGtB,CAAAA,IAAO,CACpC,GAAIgB,CAAAA,CAAiB,QAAQ,EAC7B,CAAA,CAAG5B,CAAAA,CAAsBY,EAAGV,CAAAA,CAAU,QAAQ,EAC9C,OAAA,CAAS,GAAA,CAAOU,EAAI,GAAA,CACpB,KAAA,CAAO,EAAIA,CAAAA,CAAI,EAAA,CACf,SAAU,EAAA,CACV,KAAA,CAAO,CACT,CAAA,CAAE,CAAA,CACJ,CAACV,CAAQ,CACX,EAEMmC,CAAAA,CAAuB,CAC3B,QAAS,CAAA,CACT,KAAA,CAAO,EACP,UAAA,CAAY,CACV,QAAS,CAAE,QAAA,CAAU,CAAE,CAAA,CACvB,KAAA,CAAO,CAAE,QAAA,CAAU,CAAE,CACvB,CACF,CAAA,CAEA,OACEC,cAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,sDAAA,CACb,QAAA,CAAAC,eAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAU,oDAAA,CACV,QAAQ,sBAAA,CACR,IAAA,CAAK,OACL,mBAAA,CAAoB,gBAAA,CAEpB,UAAAD,cAAAA,CAAC,OAAA,CAAA,CAAM,4BAAgB,CAAA,CACvBA,cAAAA,CAAC,QACC,QAAA,CAAAC,eAAAA,CAAC,kBACC,EAAA,CAAG,gBAAA,CACH,GAAG,IAAA,CACH,EAAA,CAAG,KACH,EAAA,CAAG,MAAA,CACH,GAAG,IAAA,CAEH,QAAA,CAAA,CAAAD,eAAC,MAAA,CAAA,CAAK,MAAA,CAAO,KAAK,SAAA,CAAU,yBAAA,CAA0B,EACtDA,cAAAA,CAAC,MAAA,CAAA,CAAK,OAAO,KAAA,CAAM,SAAA,CAAU,0BAA0B,CAAA,CACvDA,cAAAA,CAAC,QAAK,MAAA,CAAO,MAAA,CAAO,UAAU,yBAAA,CAA0B,CAAA,CAAA,CAC1D,EACF,CAAA,CAEAA,cAAAA,CAAC,KAAE,SAAA,CAAU,eAAA,CACV,SAAAN,CAAAA,CAAa,GAAA,CAAKQ,GACjBF,cAAAA,CAACG,mBAAAA,CAAO,KAAP,CAEC,CAAA,CAAGD,EAAK,CAAA,CACR,MAAA,CAAO,uBACP,WAAA,CAAaA,CAAAA,CAAK,MAClB,aAAA,CAAc,OAAA,CACd,QAAS,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,EAAI,EAClC,OAAA,CAAS,CACP,GAAGH,CAAAA,CACH,CAAA,CAAG,CAAC,CAAA,CAAG,GAAA,CAAK,CAAC,CACf,CAAA,CACA,WAAY,CACV,GAAGA,EAAqB,UAAA,CACxB,CAAA,CAAG,CACD,QAAA,CAAU,CAAA,CACV,OAAQ,CAAA,CAAA,CAAA,CACR,IAAA,CAAM,YACN,UAAA,CAAY,SACd,CACF,CAAA,CACA,KAAA,CAAO,CAAE,OAAA,CAASG,CAAAA,CAAK,OAAQ,CAAA,CAAA,CAnB1BA,CAAAA,CAAK,EAoBZ,CACD,CAAA,CACH,EAEAF,cAAAA,CAAC,GAAA,CAAA,CAAE,UAAU,iBAAA,CAAkB,KAAA,CAAO,CAAE,OAAA,CAAS,EAAI,EAClD,QAAA,CAAAH,CAAAA,CAAe,IAAKK,CAAAA,EACnBF,cAAAA,CAACG,oBAAO,IAAA,CAAP,CAEC,EAAGD,CAAAA,CAAK,CAAA,CACR,OAAO,sBAAA,CACP,WAAA,CAAaA,EAAK,KAAA,CAClB,aAAA,CAAc,QACd,OAAA,CAAS,CAAE,QAAS,CAAA,CAAG,KAAA,CAAO,EAAI,CAAA,CAClC,OAAA,CAAS,CACP,GAAGH,CAAAA,CACH,EAAG,CAAC,CAAA,CAAG,IAAK,CAAC,CACf,EACA,UAAA,CAAY,CACV,GAAGA,CAAAA,CAAqB,UAAA,CACxB,EAAG,CACD,QAAA,CAAU,EACV,MAAA,CAAQ,CAAA,CAAA,CAAA,CACR,KAAM,WAAA,CACN,UAAA,CAAY,SACd,CACF,CAAA,CACA,MAAO,CAAE,OAAA,CAASG,EAAK,OAAQ,CAAA,CAAA,CAnB1BA,EAAK,EAoBZ,CACD,CAAA,CACH,CAAA,CAEAF,cAAAA,CAAC,GAAA,CAAA,CAAE,UAAU,cAAA,CAAe,KAAA,CAAO,CAAE,OAAA,CAAS,EAAI,EAC/C,QAAA,CAAAF,CAAAA,CAAY,IAAKI,CAAAA,EAChBF,cAAAA,CAACG,oBAAO,IAAA,CAAP,CAEC,EAAGD,CAAAA,CAAK,CAAA,CACR,OAAO,sBAAA,CACP,WAAA,CAAaA,EAAK,KAAA,CAClB,aAAA,CAAc,QACd,OAAA,CAAS,CAAE,QAAS,CAAA,CAAG,KAAA,CAAO,GAAK,CAAA,CACnC,OAAA,CAAS,CACP,GAAGH,CAAAA,CACH,EAAG,CAAC,CAAA,CAAG,GAAI,CAAC,CACd,EACA,UAAA,CAAY,CACV,GAAGA,CAAAA,CAAqB,UAAA,CACxB,EAAG,CACD,QAAA,CAAU,EACV,MAAA,CAAQ,CAAA,CAAA,CAAA,CACR,KAAM,WAAA,CACN,UAAA,CAAY,SACd,CACF,CAAA,CACA,MAAO,CAAE,OAAA,CAASG,EAAK,OAAQ,CAAA,CAAA,CAnB1BA,EAAK,EAoBZ,CACD,EACH,CAAA,CAAA,CACF,CAAA,CACF,CAEJ,CAAC,CAAA,CAEKE,EAAgBX,UAAAA,CAAK,SAAuB,CAChD,KAAA,CAAAY,CACF,EAEG,CACD,OACEL,eAACG,mBAAAA,CAAO,EAAA,CAAP,CACC,SAAA,CAAU,2LAAA,CACV,QAAS,CAAE,OAAA,CAAS,EAAG,CAAA,CAAG,EAAG,EAC7B,OAAA,CAAS,CAAE,QAAS,CAAA,CAAG,CAAA,CAAG,CAAE,CAAA,CAC5B,UAAA,CAAY,CACV,QAAA,CAAU,GAAA,CACV,KAAM,CAAC,EAAA,CAAK,IAAM,EAAA,CAAK,EAAG,CAC5B,CAAA,CAEC,QAAA,CAAAE,EACH,CAEJ,CAAC,EAOYC,CAAAA,CAAkBb,UAAAA,CAAK,SAAyB,CAC3D,KAAA,CAAAY,EAAQ,kBAAA,CACR,SAAA,CAAAE,CACF,CAAA,CAAyB,CACvB,OACEN,eAAAA,CAAC,KAAA,CAAA,CAAI,UAAW,CAAA,2GAAA,EAA8GM,CAAAA,EAAa,EAAE,CAAA,CAAA,CAC3I,QAAA,CAAA,CAAAP,eAAC,KAAA,CAAA,CAAI,SAAA,CAAU,mBACb,QAAA,CAAAA,cAAAA,CAACR,EAAA,CAAc,QAAA,CAAU,EAAG,CAAA,CAC9B,CAAA,CAEAQ,eAAC,KAAA,CAAA,CAAI,SAAA,CAAU,2DACb,QAAA,CAAAA,cAAAA,CAACG,oBAAO,GAAA,CAAP,CACC,QAAS,CAAE,OAAA,CAAS,CAAE,CAAA,CACtB,OAAA,CAAS,CAAE,OAAA,CAAS,CAAE,EACtB,UAAA,CAAY,CAAE,SAAU,CAAE,CAAA,CAC1B,UAAU,mBAAA,CAEV,QAAA,CAAAH,eAACI,CAAAA,CAAA,CAAc,MAAOC,CAAAA,CAAO,CAAA,CAC/B,EACF,CAAA,CAAA,CACF,CAEJ,CAAC,CAAA,CAEMG,CAAAA,CAAQF","file":"index.js","sourcesContent":["\"use client\";\r\n\r\nimport { memo, useMemo } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\n\r\ninterface Point {\r\n x: number;\r\n y: number;\r\n}\r\n\r\ninterface PathData {\r\n id: string;\r\n d: string;\r\n opacity: number;\r\n width: number;\r\n duration: number;\r\n delay: number;\r\n}\r\n\r\nfunction generateAestheticPath(\r\n index: number,\r\n position: number,\r\n type: \"primary\" | \"secondary\" | \"accent\"\r\n): string {\r\n const baseAmplitude =\r\n type === \"primary\" ? 150 : type === \"secondary\" ? 100 : 60;\r\n const phase = index * 0.2;\r\n const points: Point[] = [];\r\n const segments = type === \"primary\" ? 10 : type === \"secondary\" ? 8 : 6;\r\n\r\n const startX = 2400;\r\n const startY = 800;\r\n const endX = -2400;\r\n const endY = -800 + index * 25;\r\n\r\n for (let i = 0; i <= segments; i++) {\r\n const progress = i / segments;\r\n const eased = 1 - (1 - progress) ** 2;\r\n\r\n const baseX = startX + (endX - startX) * eased;\r\n const baseY = startY + (endY - startY) * eased;\r\n\r\n const amplitudeFactor = 1 - eased * 0.3;\r\n const wave1 =\r\n Math.sin(progress * Math.PI * 3 + phase) *\r\n (baseAmplitude * 0.7 * amplitudeFactor);\r\n const wave2 =\r\n Math.cos(progress * Math.PI * 4 + phase) *\r\n (baseAmplitude * 0.3 * amplitudeFactor);\r\n const wave3 =\r\n Math.sin(progress * Math.PI * 2 + phase) *\r\n (baseAmplitude * 0.2 * amplitudeFactor);\r\n\r\n points.push({\r\n x: baseX * position,\r\n y: baseY + wave1 + wave2 + wave3,\r\n });\r\n }\r\n\r\n const pathCommands = points.map((point: Point, i: number) => {\r\n if (i === 0) return `M ${point.x} ${point.y}`;\r\n const prevPoint = points[i - 1];\r\n const tension = 0.4;\r\n const cp1x = prevPoint.x + (point.x - prevPoint.x) * tension;\r\n const cp1y = prevPoint.y;\r\n const cp2x = prevPoint.x + (point.x - prevPoint.x) * (1 - tension);\r\n const cp2y = point.y;\r\n return `C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${point.x} ${point.y}`;\r\n });\r\n\r\n return pathCommands.join(\" \");\r\n}\r\n\r\nconst generateUniqueId = (prefix: string): string =>\r\n `${prefix}-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\nconst FloatingPaths = memo(function FloatingPaths({\r\n position,\r\n}: {\r\n position: number;\r\n}) {\r\n const primaryPaths: PathData[] = useMemo(\r\n () =>\r\n Array.from({ length: 12 }, (_, i) => ({\r\n id: generateUniqueId(\"primary\"),\r\n d: generateAestheticPath(i, position, \"primary\"),\r\n opacity: 0.15 + i * 0.02,\r\n width: 4 + i * 0.3,\r\n duration: 25,\r\n delay: 0,\r\n })),\r\n [position]\r\n );\r\n\r\n const secondaryPaths: PathData[] = useMemo(\r\n () =>\r\n Array.from({ length: 15 }, (_, i) => ({\r\n id: generateUniqueId(\"secondary\"),\r\n d: generateAestheticPath(i, position, \"secondary\"),\r\n opacity: 0.12 + i * 0.015,\r\n width: 3 + i * 0.25,\r\n duration: 20,\r\n delay: 0,\r\n })),\r\n [position]\r\n );\r\n\r\n const accentPaths: PathData[] = useMemo(\r\n () =>\r\n Array.from({ length: 10 }, (_, i) => ({\r\n id: generateUniqueId(\"accent\"),\r\n d: generateAestheticPath(i, position, \"accent\"),\r\n opacity: 0.08 + i * 0.12,\r\n width: 2 + i * 0.2,\r\n duration: 15,\r\n delay: 0,\r\n })),\r\n [position]\r\n );\r\n\r\n const sharedAnimationProps = {\r\n opacity: 1,\r\n scale: 1,\r\n transition: {\r\n opacity: { duration: 1 },\r\n scale: { duration: 1 },\r\n },\r\n };\r\n\r\n return (\r\n <div className=\"absolute inset-0 pointer-events-none overflow-hidden\">\r\n <svg\r\n className=\"w-full h-full text-slate-950/40 dark:text-white/40\"\r\n viewBox=\"-2400 -800 4800 1600\"\r\n fill=\"none\"\r\n preserveAspectRatio=\"xMidYMid slice\"\r\n >\r\n <title>Background Paths</title>\r\n <defs>\r\n <linearGradient\r\n id=\"sharedGradient\"\r\n x1=\"0%\"\r\n y1=\"0%\"\r\n x2=\"100%\"\r\n y2=\"0%\"\r\n >\r\n <stop offset=\"0%\" stopColor=\"rgba(147, 51, 234, 0.5)\" />\r\n <stop offset=\"50%\" stopColor=\"rgba(236, 72, 153, 0.5)\" />\r\n <stop offset=\"100%\" stopColor=\"rgba(59, 130, 246, 0.5)\" />\r\n </linearGradient>\r\n </defs>\r\n\r\n <g className=\"primary-waves\">\r\n {primaryPaths.map((path) => (\r\n <motion.path\r\n key={path.id}\r\n d={path.d}\r\n stroke=\"url(#sharedGradient)\"\r\n strokeWidth={path.width}\r\n strokeLinecap=\"round\"\r\n initial={{ opacity: 0, scale: 0.8 }}\r\n animate={{\r\n ...sharedAnimationProps,\r\n y: [0, -15, 0],\r\n }}\r\n transition={{\r\n ...sharedAnimationProps.transition,\r\n y: {\r\n duration: 8,\r\n repeat: Infinity,\r\n ease: \"easeInOut\",\r\n repeatType: \"reverse\",\r\n },\r\n }}\r\n style={{ opacity: path.opacity }}\r\n />\r\n ))}\r\n </g>\r\n\r\n <g className=\"secondary-waves\" style={{ opacity: 0.8 }}>\r\n {secondaryPaths.map((path) => (\r\n <motion.path\r\n key={path.id}\r\n d={path.d}\r\n stroke=\"url(#sharedGradient)\"\r\n strokeWidth={path.width}\r\n strokeLinecap=\"round\"\r\n initial={{ opacity: 0, scale: 0.9 }}\r\n animate={{\r\n ...sharedAnimationProps,\r\n y: [0, -10, 0],\r\n }}\r\n transition={{\r\n ...sharedAnimationProps.transition,\r\n y: {\r\n duration: 6,\r\n repeat: Infinity,\r\n ease: \"easeInOut\",\r\n repeatType: \"reverse\",\r\n },\r\n }}\r\n style={{ opacity: path.opacity }}\r\n />\r\n ))}\r\n </g>\r\n\r\n <g className=\"accent-waves\" style={{ opacity: 0.6 }}>\r\n {accentPaths.map((path) => (\r\n <motion.path\r\n key={path.id}\r\n d={path.d}\r\n stroke=\"url(#sharedGradient)\"\r\n strokeWidth={path.width}\r\n strokeLinecap=\"round\"\r\n initial={{ opacity: 0, scale: 0.95 }}\r\n animate={{\r\n ...sharedAnimationProps,\r\n y: [0, -5, 0],\r\n }}\r\n transition={{\r\n ...sharedAnimationProps.transition,\r\n y: {\r\n duration: 4,\r\n repeat: Infinity,\r\n ease: \"easeInOut\",\r\n repeatType: \"reverse\",\r\n },\r\n }}\r\n style={{ opacity: path.opacity }}\r\n />\r\n ))}\r\n </g>\r\n </svg>\r\n </div>\r\n );\r\n});\r\n\r\nconst AnimatedTitle = memo(function AnimatedTitle({\r\n title,\r\n}: {\r\n title: string;\r\n}) {\r\n return (\r\n <motion.h1\r\n className=\"text-3xl sm:text-5xl md:text-5xl font-bold mb-8 tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-neutral-800/90 to-neutral-600/90 dark:from-white/90 dark:to-white/70\"\r\n initial={{ opacity: 0, y: 20 }}\r\n animate={{ opacity: 1, y: 0 }}\r\n transition={{\r\n duration: 1.2,\r\n ease: [0.2, 0.65, 0.3, 0.9],\r\n }}\r\n >\r\n {title}\r\n </motion.h1>\r\n );\r\n});\r\n\r\nexport interface BackgroundPathsProps {\r\n title?: string;\r\n className?: string;\r\n}\r\n\r\nexport const BackgroundPaths = memo(function BackgroundPaths({\r\n title = \"Background Paths\",\r\n className,\r\n}: BackgroundPathsProps) {\r\n return (\r\n <div className={`relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-black dark:bg-neutral-950 ${className || \"\"}`}>\r\n <div className=\"absolute inset-0\">\r\n <FloatingPaths position={1} />\r\n </div>\r\n\r\n <div className=\"relative z-10 container mx-auto px-4 md:px-6 text-center\">\r\n <motion.div\r\n initial={{ opacity: 0 }}\r\n animate={{ opacity: 1 }}\r\n transition={{ duration: 2 }}\r\n className=\"max-w-4xl mx-auto\"\r\n >\r\n <AnimatedTitle title={title} />\r\n </motion.div>\r\n </div>\r\n </div>\r\n );\r\n});\r\n\r\nexport default BackgroundPaths;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {memo,useMemo}from'react';import {motion}from'framer-motion';import {jsx,jsxs}from'react/jsx-runtime';function v(c,n,o){let l=o==="primary"?150:o==="secondary"?100:60,y=c*.2,i=[],t=o==="primary"?10:o==="secondary"?8:6,a=2400,w=800,M=-2400,N=-800+c*25;for(let r=0;r<=t;r++){let d=r/t,s=1-(1-d)**2,p=a+(M-a)*s,h=w+(N-w)*s,m=1-s*.3,g=Math.sin(d*Math.PI*3+y)*(l*.7*m),f=Math.cos(d*Math.PI*4+y)*(l*.3*m),$=Math.sin(d*Math.PI*2+y)*(l*.2*m);i.push({x:p*n,y:h+g+f+$});}return i.map((r,d)=>{if(d===0)return `M ${r.x} ${r.y}`;let s=i[d-1],p=.4,h=s.x+(r.x-s.x)*p,m=s.y,g=s.x+(r.x-s.x)*(1-p),f=r.y;return `C ${h} ${m}, ${g} ${f}, ${r.x} ${r.y}`}).join(" ")}var b=c=>`${c}-${Math.random().toString(36).substr(2,9)}`,I=memo(function({position:n}){let o=useMemo(()=>Array.from({length:12},(t,a)=>({id:b("primary"),d:v(a,n,"primary"),opacity:.15+a*.02,width:4+a*.3,duration:25,delay:0})),[n]),l=useMemo(()=>Array.from({length:15},(t,a)=>({id:b("secondary"),d:v(a,n,"secondary"),opacity:.12+a*.015,width:3+a*.25,duration:20,delay:0})),[n]),y=useMemo(()=>Array.from({length:10},(t,a)=>({id:b("accent"),d:v(a,n,"accent"),opacity:.08+a*.12,width:2+a*.2,duration:15,delay:0})),[n]),i={opacity:1,scale:1,transition:{opacity:{duration:1},scale:{duration:1}}};return jsx("div",{className:"absolute inset-0 pointer-events-none overflow-hidden",children:jsxs("svg",{className:"w-full h-full text-slate-950/40 dark:text-white/40",viewBox:"-2400 -800 4800 1600",fill:"none",preserveAspectRatio:"xMidYMid slice",children:[jsx("title",{children:"Background Paths"}),jsx("defs",{children:jsxs("linearGradient",{id:"sharedGradient",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[jsx("stop",{offset:"0%",stopColor:"rgba(147, 51, 234, 0.5)"}),jsx("stop",{offset:"50%",stopColor:"rgba(236, 72, 153, 0.5)"}),jsx("stop",{offset:"100%",stopColor:"rgba(59, 130, 246, 0.5)"})]})}),jsx("g",{className:"primary-waves",children:o.map(t=>jsx(motion.path,{d:t.d,stroke:"url(#sharedGradient)",strokeWidth:t.width,strokeLinecap:"round",initial:{opacity:0,scale:.8},animate:{...i,y:[0,-15,0]},transition:{...i.transition,y:{duration:8,repeat:1/0,ease:"easeInOut",repeatType:"reverse"}},style:{opacity:t.opacity}},t.id))}),jsx("g",{className:"secondary-waves",style:{opacity:.8},children:l.map(t=>jsx(motion.path,{d:t.d,stroke:"url(#sharedGradient)",strokeWidth:t.width,strokeLinecap:"round",initial:{opacity:0,scale:.9},animate:{...i,y:[0,-10,0]},transition:{...i.transition,y:{duration:6,repeat:1/0,ease:"easeInOut",repeatType:"reverse"}},style:{opacity:t.opacity}},t.id))}),jsx("g",{className:"accent-waves",style:{opacity:.6},children:y.map(t=>jsx(motion.path,{d:t.d,stroke:"url(#sharedGradient)",strokeWidth:t.width,strokeLinecap:"round",initial:{opacity:0,scale:.95},animate:{...i,y:[0,-5,0]},transition:{...i.transition,y:{duration:4,repeat:1/0,ease:"easeInOut",repeatType:"reverse"}},style:{opacity:t.opacity}},t.id))})]})})}),A=memo(function({title:n}){return jsx(motion.h1,{className:"text-3xl sm:text-5xl md:text-5xl font-bold mb-8 tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-neutral-800/90 to-neutral-600/90 dark:from-white/90 dark:to-white/70",initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:1.2,ease:[.2,.65,.3,.9]},children:n})}),B=memo(function({title:n="Background Paths",className:o}){return jsxs("div",{className:`relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-black dark:bg-neutral-950 ${o||""}`,children:[jsx("div",{className:"absolute inset-0",children:jsx(I,{position:1})}),jsx("div",{className:"relative z-10 container mx-auto px-4 md:px-6 text-center",children:jsx(motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:2},className:"max-w-4xl mx-auto",children:jsx(A,{title:n})})})]})}),D=B;export{B as BackgroundPaths,D as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/background-paths/index.tsx"],"names":["generateAestheticPath","index","position","type","baseAmplitude","phase","points","segments","startX","startY","endX","endY","i","progress","eased","baseX","baseY","amplitudeFactor","wave1","wave2","wave3","point","prevPoint","tension","cp1x","cp1y","cp2x","cp2y","generateUniqueId","prefix","FloatingPaths","memo","primaryPaths","useMemo","_","secondaryPaths","accentPaths","sharedAnimationProps","jsx","jsxs","path","motion","AnimatedTitle","title","BackgroundPaths","className","background_paths_default"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\";\r\n\r\nimport { memo, useMemo } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\n\r\ninterface Point {\r\n x: number;\r\n y: number;\r\n}\r\n\r\ninterface PathData {\r\n id: string;\r\n d: string;\r\n opacity: number;\r\n width: number;\r\n duration: number;\r\n delay: number;\r\n}\r\n\r\nfunction generateAestheticPath(\r\n index: number,\r\n position: number,\r\n type: \"primary\" | \"secondary\" | \"accent\"\r\n): string {\r\n const baseAmplitude =\r\n type === \"primary\" ? 150 : type === \"secondary\" ? 100 : 60;\r\n const phase = index * 0.2;\r\n const points: Point[] = [];\r\n const segments = type === \"primary\" ? 10 : type === \"secondary\" ? 8 : 6;\r\n\r\n const startX = 2400;\r\n const startY = 800;\r\n const endX = -2400;\r\n const endY = -800 + index * 25;\r\n\r\n for (let i = 0; i <= segments; i++) {\r\n const progress = i / segments;\r\n const eased = 1 - (1 - progress) ** 2;\r\n\r\n const baseX = startX + (endX - startX) * eased;\r\n const baseY = startY + (endY - startY) * eased;\r\n\r\n const amplitudeFactor = 1 - eased * 0.3;\r\n const wave1 =\r\n Math.sin(progress * Math.PI * 3 + phase) *\r\n (baseAmplitude * 0.7 * amplitudeFactor);\r\n const wave2 =\r\n Math.cos(progress * Math.PI * 4 + phase) *\r\n (baseAmplitude * 0.3 * amplitudeFactor);\r\n const wave3 =\r\n Math.sin(progress * Math.PI * 2 + phase) *\r\n (baseAmplitude * 0.2 * amplitudeFactor);\r\n\r\n points.push({\r\n x: baseX * position,\r\n y: baseY + wave1 + wave2 + wave3,\r\n });\r\n }\r\n\r\n const pathCommands = points.map((point: Point, i: number) => {\r\n if (i === 0) return `M ${point.x} ${point.y}`;\r\n const prevPoint = points[i - 1];\r\n const tension = 0.4;\r\n const cp1x = prevPoint.x + (point.x - prevPoint.x) * tension;\r\n const cp1y = prevPoint.y;\r\n const cp2x = prevPoint.x + (point.x - prevPoint.x) * (1 - tension);\r\n const cp2y = point.y;\r\n return `C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${point.x} ${point.y}`;\r\n });\r\n\r\n return pathCommands.join(\" \");\r\n}\r\n\r\nconst generateUniqueId = (prefix: string): string =>\r\n `${prefix}-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\nconst FloatingPaths = memo(function FloatingPaths({\r\n position,\r\n}: {\r\n position: number;\r\n}) {\r\n const primaryPaths: PathData[] = useMemo(\r\n () =>\r\n Array.from({ length: 12 }, (_, i) => ({\r\n id: generateUniqueId(\"primary\"),\r\n d: generateAestheticPath(i, position, \"primary\"),\r\n opacity: 0.15 + i * 0.02,\r\n width: 4 + i * 0.3,\r\n duration: 25,\r\n delay: 0,\r\n })),\r\n [position]\r\n );\r\n\r\n const secondaryPaths: PathData[] = useMemo(\r\n () =>\r\n Array.from({ length: 15 }, (_, i) => ({\r\n id: generateUniqueId(\"secondary\"),\r\n d: generateAestheticPath(i, position, \"secondary\"),\r\n opacity: 0.12 + i * 0.015,\r\n width: 3 + i * 0.25,\r\n duration: 20,\r\n delay: 0,\r\n })),\r\n [position]\r\n );\r\n\r\n const accentPaths: PathData[] = useMemo(\r\n () =>\r\n Array.from({ length: 10 }, (_, i) => ({\r\n id: generateUniqueId(\"accent\"),\r\n d: generateAestheticPath(i, position, \"accent\"),\r\n opacity: 0.08 + i * 0.12,\r\n width: 2 + i * 0.2,\r\n duration: 15,\r\n delay: 0,\r\n })),\r\n [position]\r\n );\r\n\r\n const sharedAnimationProps = {\r\n opacity: 1,\r\n scale: 1,\r\n transition: {\r\n opacity: { duration: 1 },\r\n scale: { duration: 1 },\r\n },\r\n };\r\n\r\n return (\r\n <div className=\"absolute inset-0 pointer-events-none overflow-hidden\">\r\n <svg\r\n className=\"w-full h-full text-slate-950/40 dark:text-white/40\"\r\n viewBox=\"-2400 -800 4800 1600\"\r\n fill=\"none\"\r\n preserveAspectRatio=\"xMidYMid slice\"\r\n >\r\n <title>Background Paths</title>\r\n <defs>\r\n <linearGradient\r\n id=\"sharedGradient\"\r\n x1=\"0%\"\r\n y1=\"0%\"\r\n x2=\"100%\"\r\n y2=\"0%\"\r\n >\r\n <stop offset=\"0%\" stopColor=\"rgba(147, 51, 234, 0.5)\" />\r\n <stop offset=\"50%\" stopColor=\"rgba(236, 72, 153, 0.5)\" />\r\n <stop offset=\"100%\" stopColor=\"rgba(59, 130, 246, 0.5)\" />\r\n </linearGradient>\r\n </defs>\r\n\r\n <g className=\"primary-waves\">\r\n {primaryPaths.map((path) => (\r\n <motion.path\r\n key={path.id}\r\n d={path.d}\r\n stroke=\"url(#sharedGradient)\"\r\n strokeWidth={path.width}\r\n strokeLinecap=\"round\"\r\n initial={{ opacity: 0, scale: 0.8 }}\r\n animate={{\r\n ...sharedAnimationProps,\r\n y: [0, -15, 0],\r\n }}\r\n transition={{\r\n ...sharedAnimationProps.transition,\r\n y: {\r\n duration: 8,\r\n repeat: Infinity,\r\n ease: \"easeInOut\",\r\n repeatType: \"reverse\",\r\n },\r\n }}\r\n style={{ opacity: path.opacity }}\r\n />\r\n ))}\r\n </g>\r\n\r\n <g className=\"secondary-waves\" style={{ opacity: 0.8 }}>\r\n {secondaryPaths.map((path) => (\r\n <motion.path\r\n key={path.id}\r\n d={path.d}\r\n stroke=\"url(#sharedGradient)\"\r\n strokeWidth={path.width}\r\n strokeLinecap=\"round\"\r\n initial={{ opacity: 0, scale: 0.9 }}\r\n animate={{\r\n ...sharedAnimationProps,\r\n y: [0, -10, 0],\r\n }}\r\n transition={{\r\n ...sharedAnimationProps.transition,\r\n y: {\r\n duration: 6,\r\n repeat: Infinity,\r\n ease: \"easeInOut\",\r\n repeatType: \"reverse\",\r\n },\r\n }}\r\n style={{ opacity: path.opacity }}\r\n />\r\n ))}\r\n </g>\r\n\r\n <g className=\"accent-waves\" style={{ opacity: 0.6 }}>\r\n {accentPaths.map((path) => (\r\n <motion.path\r\n key={path.id}\r\n d={path.d}\r\n stroke=\"url(#sharedGradient)\"\r\n strokeWidth={path.width}\r\n strokeLinecap=\"round\"\r\n initial={{ opacity: 0, scale: 0.95 }}\r\n animate={{\r\n ...sharedAnimationProps,\r\n y: [0, -5, 0],\r\n }}\r\n transition={{\r\n ...sharedAnimationProps.transition,\r\n y: {\r\n duration: 4,\r\n repeat: Infinity,\r\n ease: \"easeInOut\",\r\n repeatType: \"reverse\",\r\n },\r\n }}\r\n style={{ opacity: path.opacity }}\r\n />\r\n ))}\r\n </g>\r\n </svg>\r\n </div>\r\n );\r\n});\r\n\r\nconst AnimatedTitle = memo(function AnimatedTitle({\r\n title,\r\n}: {\r\n title: string;\r\n}) {\r\n return (\r\n <motion.h1\r\n className=\"text-3xl sm:text-5xl md:text-5xl font-bold mb-8 tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-neutral-800/90 to-neutral-600/90 dark:from-white/90 dark:to-white/70\"\r\n initial={{ opacity: 0, y: 20 }}\r\n animate={{ opacity: 1, y: 0 }}\r\n transition={{\r\n duration: 1.2,\r\n ease: [0.2, 0.65, 0.3, 0.9],\r\n }}\r\n >\r\n {title}\r\n </motion.h1>\r\n );\r\n});\r\n\r\nexport interface BackgroundPathsProps {\r\n title?: string;\r\n className?: string;\r\n}\r\n\r\nexport const BackgroundPaths = memo(function BackgroundPaths({\r\n title = \"Background Paths\",\r\n className,\r\n}: BackgroundPathsProps) {\r\n return (\r\n <div className={`relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-black dark:bg-neutral-950 ${className || \"\"}`}>\r\n <div className=\"absolute inset-0\">\r\n <FloatingPaths position={1} />\r\n </div>\r\n\r\n <div className=\"relative z-10 container mx-auto px-4 md:px-6 text-center\">\r\n <motion.div\r\n initial={{ opacity: 0 }}\r\n animate={{ opacity: 1 }}\r\n transition={{ duration: 2 }}\r\n className=\"max-w-4xl mx-auto\"\r\n >\r\n <AnimatedTitle title={title} />\r\n </motion.div>\r\n </div>\r\n </div>\r\n );\r\n});\r\n\r\nexport default BackgroundPaths;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var framerMotion=require('framer-motion'),jsxRuntime=require('react/jsx-runtime');function s({position:e=1,className:n}){let l=Array.from({length:36},(a,t)=>({id:t,d:`M-${380-t*5*e} -${189+t*6}C-${380-t*5*e} -${189+t*6} -${312-t*5*e} ${216-t*6} ${152-t*5*e} ${343-t*6}C${616-t*5*e} ${470-t*6} ${684-t*5*e} ${875-t*6} ${684-t*5*e} ${875-t*6}`,color:`rgba(15,23,42,${.1+t*.03})`,width:.5+t*.03}));return jsxRuntime.jsx("div",{className:`pointer-events-none absolute inset-0 ${n||""}`,children:jsxRuntime.jsxs("svg",{className:"h-full w-full text-slate-950 dark:text-white",fill:"none",viewBox:"0 0 696 316",children:[jsxRuntime.jsx("title",{children:"Background Paths"}),l.map(a=>jsxRuntime.jsx(framerMotion.motion.path,{animate:{pathLength:1,opacity:[.3,.6,.3],pathOffset:[0,1,0]},d:a.d,initial:{pathLength:.3,opacity:.6},stroke:"currentColor",strokeOpacity:.1+a.id*.03,strokeWidth:a.width,transition:{duration:20+Math.random()*10,repeat:1/0,ease:"linear"}},a.id))]})})}var h=s;exports.FloatingPaths=s;exports.default=h;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/floating-paths/index.tsx"],"names":["FloatingPaths","position","className","paths","_","i","jsx","jsxs","path","motion","floating_paths_default"],"mappings":"wJASO,SAASA,EAAc,CAAE,QAAA,CAAAC,EAAW,CAAA,CAAG,SAAA,CAAAC,CAAU,CAAA,CAAuB,CAC7E,IAAMC,CAAAA,CAAQ,KAAA,CAAM,IAAA,CAAK,CAAE,MAAA,CAAQ,EAAG,EAAG,CAACC,CAAAA,CAAGC,KAAO,CAClD,EAAA,CAAIA,EACJ,CAAA,CAAG,CAAA,EAAA,EAAK,IAAMA,CAAAA,CAAI,CAAA,CAAIJ,CAAQ,CAAA,EAAA,EAAK,GAAA,CAAMI,EAAI,CAAC,CAAA,EAAA,EAC5C,GAAA,CAAMA,CAAAA,CAAI,CAAA,CAAIJ,CAChB,KAAK,GAAA,CAAMI,CAAAA,CAAI,CAAC,CAAA,EAAA,EAAK,GAAA,CAAMA,EAAI,CAAA,CAAIJ,CAAQ,IAAI,GAAA,CAAMI,CAAAA,CAAI,CAAC,CAAA,CAAA,EACxD,GAAA,CAAMA,EAAI,CAAA,CAAIJ,CAChB,IAAI,GAAA,CAAMI,CAAAA,CAAI,CAAC,CAAA,CAAA,EAAI,GAAA,CAAMA,CAAAA,CAAI,EAAIJ,CAAQ,CAAA,CAAA,EAAI,IAAMI,CAAAA,CAAI,CAAC,IACtD,GAAA,CAAMA,CAAAA,CAAI,EAAIJ,CAChB,CAAA,CAAA,EAAI,IAAMI,CAAAA,CAAI,CAAC,IAAI,GAAA,CAAMA,CAAAA,CAAI,EAAIJ,CAAQ,CAAA,CAAA,EAAI,GAAA,CAAMI,CAAAA,CAAI,CAAC,CAAA,CAAA,CACxD,MAAO,CAAA,cAAA,EAAiB,EAAA,CAAMA,EAAI,GAAI,CAAA,CAAA,CAAA,CACtC,MAAO,EAAA,CAAMA,CAAAA,CAAI,GACnB,CAAA,CAAE,CAAA,CAEF,OACEC,cAAAA,CAAC,KAAA,CAAA,CAAI,UAAW,CAAA,qCAAA,EAAwCJ,CAAAA,EAAa,EAAE,CAAA,CAAA,CACrE,QAAA,CAAAK,eAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAU,8CAAA,CACV,KAAK,MAAA,CACL,OAAA,CAAQ,cAER,QAAA,CAAA,CAAAD,cAAAA,CAAC,SAAM,QAAA,CAAA,kBAAA,CAAgB,CAAA,CACtBH,EAAM,GAAA,CAAKK,CAAAA,EACVF,eAACG,mBAAAA,CAAO,IAAA,CAAP,CACC,OAAA,CAAS,CACP,WAAY,CAAA,CACZ,OAAA,CAAS,CAAC,EAAA,CAAK,EAAA,CAAK,EAAG,EACvB,UAAA,CAAY,CAAC,EAAG,CAAA,CAAG,CAAC,CACtB,CAAA,CACA,CAAA,CAAGD,EAAK,CAAA,CACR,OAAA,CAAS,CAAE,UAAA,CAAY,EAAA,CAAK,QAAS,EAAI,CAAA,CAEzC,OAAO,cAAA,CACP,aAAA,CAAe,EAAA,CAAMA,CAAAA,CAAK,EAAA,CAAK,GAAA,CAC/B,YAAaA,CAAAA,CAAK,KAAA,CAClB,WAAY,CACV,QAAA,CAAU,GAAK,IAAA,CAAK,MAAA,EAAO,CAAI,EAAA,CAC/B,MAAA,CAAQ,CAAA,CAAA,CAAA,CACR,KAAM,QACR,CAAA,CAAA,CARKA,EAAK,EASZ,CACD,GACH,CAAA,CACF,CAEJ,CAEA,IAAOE,CAAAA,CAAQV","file":"index.js","sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\n\r\nexport interface FloatingPathsProps {\r\n position?: number;\r\n className?: string;\r\n}\r\n\r\nexport function FloatingPaths({ position = 1, className }: FloatingPathsProps) {\r\n const paths = Array.from({ length: 36 }, (_, i) => ({\r\n id: i,\r\n d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${\r\n 380 - i * 5 * position\r\n } -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${\r\n 152 - i * 5 * position\r\n } ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${\r\n 684 - i * 5 * position\r\n } ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,\r\n color: `rgba(15,23,42,${0.1 + i * 0.03})`,\r\n width: 0.5 + i * 0.03,\r\n }));\r\n\r\n return (\r\n <div className={`pointer-events-none absolute inset-0 ${className || \"\"}`}>\r\n <svg\r\n className=\"h-full w-full text-slate-950 dark:text-white\"\r\n fill=\"none\"\r\n viewBox=\"0 0 696 316\"\r\n >\r\n <title>Background Paths</title>\r\n {paths.map((path) => (\r\n <motion.path\r\n animate={{\r\n pathLength: 1,\r\n opacity: [0.3, 0.6, 0.3],\r\n pathOffset: [0, 1, 0],\r\n }}\r\n d={path.d}\r\n initial={{ pathLength: 0.3, opacity: 0.6 }}\r\n key={path.id}\r\n stroke=\"currentColor\"\r\n strokeOpacity={0.1 + path.id * 0.03}\r\n strokeWidth={path.width}\r\n transition={{\r\n duration: 20 + Math.random() * 10,\r\n repeat: Infinity,\r\n ease: \"linear\",\r\n }}\r\n />\r\n ))}\r\n </svg>\r\n </div>\r\n );\r\n}\r\n\r\nexport default FloatingPaths;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {motion}from'framer-motion';import {jsx,jsxs}from'react/jsx-runtime';function s({position:e=1,className:n}){let l=Array.from({length:36},(a,t)=>({id:t,d:`M-${380-t*5*e} -${189+t*6}C-${380-t*5*e} -${189+t*6} -${312-t*5*e} ${216-t*6} ${152-t*5*e} ${343-t*6}C${616-t*5*e} ${470-t*6} ${684-t*5*e} ${875-t*6} ${684-t*5*e} ${875-t*6}`,color:`rgba(15,23,42,${.1+t*.03})`,width:.5+t*.03}));return jsx("div",{className:`pointer-events-none absolute inset-0 ${n||""}`,children:jsxs("svg",{className:"h-full w-full text-slate-950 dark:text-white",fill:"none",viewBox:"0 0 696 316",children:[jsx("title",{children:"Background Paths"}),l.map(a=>jsx(motion.path,{animate:{pathLength:1,opacity:[.3,.6,.3],pathOffset:[0,1,0]},d:a.d,initial:{pathLength:.3,opacity:.6},stroke:"currentColor",strokeOpacity:.1+a.id*.03,strokeWidth:a.width,transition:{duration:20+Math.random()*10,repeat:1/0,ease:"linear"}},a.id))]})})}var h=s;export{s as FloatingPaths,h as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/floating-paths/index.tsx"],"names":["FloatingPaths","position","className","paths","_","i","jsx","jsxs","path","motion","floating_paths_default"],"mappings":"4EASO,SAASA,EAAc,CAAE,QAAA,CAAAC,EAAW,CAAA,CAAG,SAAA,CAAAC,CAAU,CAAA,CAAuB,CAC7E,IAAMC,CAAAA,CAAQ,KAAA,CAAM,IAAA,CAAK,CAAE,MAAA,CAAQ,EAAG,EAAG,CAACC,CAAAA,CAAGC,KAAO,CAClD,EAAA,CAAIA,EACJ,CAAA,CAAG,CAAA,EAAA,EAAK,IAAMA,CAAAA,CAAI,CAAA,CAAIJ,CAAQ,CAAA,EAAA,EAAK,GAAA,CAAMI,EAAI,CAAC,CAAA,EAAA,EAC5C,GAAA,CAAMA,CAAAA,CAAI,CAAA,CAAIJ,CAChB,KAAK,GAAA,CAAMI,CAAAA,CAAI,CAAC,CAAA,EAAA,EAAK,GAAA,CAAMA,EAAI,CAAA,CAAIJ,CAAQ,IAAI,GAAA,CAAMI,CAAAA,CAAI,CAAC,CAAA,CAAA,EACxD,GAAA,CAAMA,EAAI,CAAA,CAAIJ,CAChB,IAAI,GAAA,CAAMI,CAAAA,CAAI,CAAC,CAAA,CAAA,EAAI,GAAA,CAAMA,CAAAA,CAAI,EAAIJ,CAAQ,CAAA,CAAA,EAAI,IAAMI,CAAAA,CAAI,CAAC,IACtD,GAAA,CAAMA,CAAAA,CAAI,EAAIJ,CAChB,CAAA,CAAA,EAAI,IAAMI,CAAAA,CAAI,CAAC,IAAI,GAAA,CAAMA,CAAAA,CAAI,EAAIJ,CAAQ,CAAA,CAAA,EAAI,GAAA,CAAMI,CAAAA,CAAI,CAAC,CAAA,CAAA,CACxD,MAAO,CAAA,cAAA,EAAiB,EAAA,CAAMA,EAAI,GAAI,CAAA,CAAA,CAAA,CACtC,MAAO,EAAA,CAAMA,CAAAA,CAAI,GACnB,CAAA,CAAE,CAAA,CAEF,OACEC,GAAAA,CAAC,KAAA,CAAA,CAAI,UAAW,CAAA,qCAAA,EAAwCJ,CAAAA,EAAa,EAAE,CAAA,CAAA,CACrE,QAAA,CAAAK,IAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAU,8CAAA,CACV,KAAK,MAAA,CACL,OAAA,CAAQ,cAER,QAAA,CAAA,CAAAD,GAAAA,CAAC,SAAM,QAAA,CAAA,kBAAA,CAAgB,CAAA,CACtBH,EAAM,GAAA,CAAKK,CAAAA,EACVF,IAACG,MAAAA,CAAO,IAAA,CAAP,CACC,OAAA,CAAS,CACP,WAAY,CAAA,CACZ,OAAA,CAAS,CAAC,EAAA,CAAK,EAAA,CAAK,EAAG,EACvB,UAAA,CAAY,CAAC,EAAG,CAAA,CAAG,CAAC,CACtB,CAAA,CACA,CAAA,CAAGD,EAAK,CAAA,CACR,OAAA,CAAS,CAAE,UAAA,CAAY,EAAA,CAAK,QAAS,EAAI,CAAA,CAEzC,OAAO,cAAA,CACP,aAAA,CAAe,EAAA,CAAMA,CAAAA,CAAK,EAAA,CAAK,GAAA,CAC/B,YAAaA,CAAAA,CAAK,KAAA,CAClB,WAAY,CACV,QAAA,CAAU,GAAK,IAAA,CAAK,MAAA,EAAO,CAAI,EAAA,CAC/B,MAAA,CAAQ,CAAA,CAAA,CAAA,CACR,KAAM,QACR,CAAA,CAAA,CARKA,EAAK,EASZ,CACD,GACH,CAAA,CACF,CAEJ,CAEA,IAAOE,CAAAA,CAAQV","file":"index.mjs","sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\n\r\nexport interface FloatingPathsProps {\r\n position?: number;\r\n className?: string;\r\n}\r\n\r\nexport function FloatingPaths({ position = 1, className }: FloatingPathsProps) {\r\n const paths = Array.from({ length: 36 }, (_, i) => ({\r\n id: i,\r\n d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${\r\n 380 - i * 5 * position\r\n } -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${\r\n 152 - i * 5 * position\r\n } ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${\r\n 684 - i * 5 * position\r\n } ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,\r\n color: `rgba(15,23,42,${0.1 + i * 0.03})`,\r\n width: 0.5 + i * 0.03,\r\n }));\r\n\r\n return (\r\n <div className={`pointer-events-none absolute inset-0 ${className || \"\"}`}>\r\n <svg\r\n className=\"h-full w-full text-slate-950 dark:text-white\"\r\n fill=\"none\"\r\n viewBox=\"0 0 696 316\"\r\n >\r\n <title>Background Paths</title>\r\n {paths.map((path) => (\r\n <motion.path\r\n animate={{\r\n pathLength: 1,\r\n opacity: [0.3, 0.6, 0.3],\r\n pathOffset: [0, 1, 0],\r\n }}\r\n d={path.d}\r\n initial={{ pathLength: 0.3, opacity: 0.6 }}\r\n key={path.id}\r\n stroke=\"currentColor\"\r\n strokeOpacity={0.1 + path.id * 0.03}\r\n strokeWidth={path.width}\r\n transition={{\r\n duration: 20 + Math.random() * 10,\r\n repeat: Infinity,\r\n ease: \"linear\",\r\n }}\r\n />\r\n ))}\r\n </svg>\r\n </div>\r\n );\r\n}\r\n\r\nexport default FloatingPaths;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function i(...a){return tailwindMerge.twMerge(clsx.clsx(a))}var I=(a,l)=>{let n=a.startsWith("#")?a.slice(1):a;n.length===3&&(n=n.split("").map(u=>u+u).join(""));let f=parseInt(n,16),c=f>>16&255,s=f>>8&255,e=f&255;return c=Math.max(0,Math.min(255,Math.floor(c*(1-l)))),s=Math.max(0,Math.min(255,Math.floor(s*(1-l)))),e=Math.max(0,Math.min(255,Math.floor(e*(1-l)))),"#"+((1<<24)+(c<<16)+(s<<8)+e).toString(16).slice(1).toUpperCase()};function O({color:a="#18181b",size:l=1,items:n=[],className:f=""}){let s=n.slice(0,3);for(;s.length<3;)s.push(null);let[e,u]=react.useState(false),[p,d]=react.useState(Array.from({length:3},()=>({x:0,y:0}))),x=I(a,.08),v=()=>{u(o=>!o),e&&d(Array.from({length:3},()=>({x:0,y:0})));},y=(o,t)=>{if(!e)return;let r=o.currentTarget.getBoundingClientRect(),M=(o.clientX-(r.left+r.width/2))*.15,C=(o.clientY-(r.top+r.height/2))*.15;d(k=>{let h=[...k];return h[t]={x:M,y:C},h});},b=o=>{d(t=>{let r=[...t];return r[o]={x:0,y:0},r});};return jsxRuntime.jsx("div",{className:i("relative cursor-pointer",f),style:{transform:`scale(${l})`},children:jsxRuntime.jsxs("div",{className:i("relative w-32 h-24 transition-all duration-300",e&&"transform -translate-y-2"),onClick:v,children:[jsxRuntime.jsx("div",{className:"absolute inset-0 rounded-lg",style:{backgroundColor:x},children:s.map((o,t)=>jsxRuntime.jsx("div",{className:i("absolute left-1/2 -translate-x-1/2 w-[85%] h-[70%] rounded-md transition-all duration-300",e?"opacity-100":"opacity-0"),onMouseMove:r=>y(r,t),onMouseLeave:()=>b(t),style:{backgroundColor:t===0?"#f4f4f5":t===1?"#fafafa":"#ffffff",bottom:e?`${60+t*20}%`:"50%",transform:e?`translateX(calc(-50% + ${p[t]?.x||0}px)) translateY(${p[t]?.y||0}px) rotate(${(t-1)*3}deg)`:"translateX(-50%)",zIndex:3-t},children:o},t))}),jsxRuntime.jsx("div",{className:i("absolute bottom-0 left-0 right-0 h-[75%] rounded-lg transition-all duration-300",e&&"transform translate-y-1"),style:{backgroundColor:a},children:jsxRuntime.jsx("div",{className:"absolute -top-3 left-2 w-8 h-4 rounded-t-md",style:{backgroundColor:a}})})]})})}var z=O;exports.Folder=O;exports.default=z;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/folder/index.tsx"],"names":["cn","inputs","twMerge","clsx","darkenColor","hex","percent","color","c","num","r","g","b","Folder","size","items","className","papers","open","setOpen","useState","paperOffsets","setPaperOffsets","folderBackColor","handleClick","prev","handlePaperMouseMove","e","index","rect","offsetX","offsetY","newOffsets","handlePaperMouseLeave","jsx","jsxs","item","i","folder_default"],"mappings":"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","file":"index.js","sourcesContent":["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 React, { useState } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface FolderProps {\r\n color?: string;\r\n size?: number;\r\n items?: React.ReactNode[];\r\n className?: string;\r\n}\r\n\r\nconst darkenColor = (hex: string, percent: number): string => {\r\n let color = hex.startsWith(\"#\") ? hex.slice(1) : hex;\r\n if (color.length === 3) {\r\n color = color\r\n .split(\"\")\r\n .map((c) => c + c)\r\n .join(\"\");\r\n }\r\n const num = parseInt(color, 16);\r\n let r = (num >> 16) & 0xff;\r\n let g = (num >> 8) & 0xff;\r\n let b = num & 0xff;\r\n r = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));\r\n g = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));\r\n b = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));\r\n return (\r\n \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()\r\n );\r\n};\r\n\r\nexport function Folder({\r\n color = \"#18181b\",\r\n size = 1,\r\n items = [],\r\n className = \"\",\r\n}: FolderProps) {\r\n const maxItems = 3;\r\n const papers = items.slice(0, maxItems);\r\n while (papers.length < maxItems) {\r\n papers.push(null);\r\n }\r\n\r\n const [open, setOpen] = useState(false);\r\n const [paperOffsets, setPaperOffsets] = useState<{ x: number; y: number }[]>(\r\n Array.from({ length: maxItems }, () => ({ x: 0, y: 0 }))\r\n );\r\n\r\n const folderBackColor = darkenColor(color, 0.08);\r\n\r\n const handleClick = () => {\r\n setOpen((prev) => !prev);\r\n if (open) {\r\n setPaperOffsets(\r\n Array.from({ length: maxItems }, () => ({ x: 0, y: 0 }))\r\n );\r\n }\r\n };\r\n\r\n const handlePaperMouseMove = (\r\n e: React.MouseEvent<HTMLDivElement>,\r\n index: number\r\n ) => {\r\n if (!open) return;\r\n const rect = e.currentTarget.getBoundingClientRect();\r\n const offsetX = (e.clientX - (rect.left + rect.width / 2)) * 0.15;\r\n const offsetY = (e.clientY - (rect.top + rect.height / 2)) * 0.15;\r\n setPaperOffsets((prev) => {\r\n const newOffsets = [...prev];\r\n newOffsets[index] = { x: offsetX, y: offsetY };\r\n return newOffsets;\r\n });\r\n };\r\n\r\n const handlePaperMouseLeave = (index: number) => {\r\n setPaperOffsets((prev) => {\r\n const newOffsets = [...prev];\r\n newOffsets[index] = { x: 0, y: 0 };\r\n return newOffsets;\r\n });\r\n };\r\n\r\n return (\r\n <div\r\n className={cn(\"relative cursor-pointer\", className)}\r\n style={{ transform: `scale(${size})` }}\r\n >\r\n <div\r\n className={cn(\r\n \"relative w-32 h-24 transition-all duration-300\",\r\n open && \"transform -translate-y-2\"\r\n )}\r\n onClick={handleClick}\r\n >\r\n {/* Folder back */}\r\n <div\r\n className=\"absolute inset-0 rounded-lg\"\r\n style={{ backgroundColor: folderBackColor }}\r\n >\r\n {/* Papers */}\r\n {papers.map((item, i) => (\r\n <div\r\n key={i}\r\n className={cn(\r\n \"absolute left-1/2 -translate-x-1/2 w-[85%] h-[70%] rounded-md transition-all duration-300\",\r\n open ? \"opacity-100\" : \"opacity-0\"\r\n )}\r\n onMouseMove={(e) => handlePaperMouseMove(e, i)}\r\n onMouseLeave={() => handlePaperMouseLeave(i)}\r\n style={{\r\n backgroundColor: i === 0 ? \"#f4f4f5\" : i === 1 ? \"#fafafa\" : \"#ffffff\",\r\n bottom: open ? `${60 + i * 20}%` : \"50%\",\r\n transform: open\r\n ? `translateX(calc(-50% + ${paperOffsets[i]?.x || 0}px)) translateY(${paperOffsets[i]?.y || 0}px) rotate(${(i - 1) * 3}deg)`\r\n : \"translateX(-50%)\",\r\n zIndex: 3 - i,\r\n }}\r\n >\r\n {item}\r\n </div>\r\n ))}\r\n </div>\r\n\r\n {/* Folder front */}\r\n <div\r\n className={cn(\r\n \"absolute bottom-0 left-0 right-0 h-[75%] rounded-lg transition-all duration-300\",\r\n open && \"transform translate-y-1\"\r\n )}\r\n style={{ backgroundColor: color }}\r\n >\r\n {/* Folder tab */}\r\n <div\r\n className=\"absolute -top-3 left-2 w-8 h-4 rounded-t-md\"\r\n style={{ backgroundColor: color }}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Folder;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useState}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';function i(...a){return twMerge(clsx(a))}var I=(a,l)=>{let n=a.startsWith("#")?a.slice(1):a;n.length===3&&(n=n.split("").map(u=>u+u).join(""));let f=parseInt(n,16),c=f>>16&255,s=f>>8&255,e=f&255;return c=Math.max(0,Math.min(255,Math.floor(c*(1-l)))),s=Math.max(0,Math.min(255,Math.floor(s*(1-l)))),e=Math.max(0,Math.min(255,Math.floor(e*(1-l)))),"#"+((1<<24)+(c<<16)+(s<<8)+e).toString(16).slice(1).toUpperCase()};function O({color:a="#18181b",size:l=1,items:n=[],className:f=""}){let s=n.slice(0,3);for(;s.length<3;)s.push(null);let[e,u]=useState(false),[p,d]=useState(Array.from({length:3},()=>({x:0,y:0}))),x=I(a,.08),v=()=>{u(o=>!o),e&&d(Array.from({length:3},()=>({x:0,y:0})));},y=(o,t)=>{if(!e)return;let r=o.currentTarget.getBoundingClientRect(),M=(o.clientX-(r.left+r.width/2))*.15,C=(o.clientY-(r.top+r.height/2))*.15;d(k=>{let h=[...k];return h[t]={x:M,y:C},h});},b=o=>{d(t=>{let r=[...t];return r[o]={x:0,y:0},r});};return jsx("div",{className:i("relative cursor-pointer",f),style:{transform:`scale(${l})`},children:jsxs("div",{className:i("relative w-32 h-24 transition-all duration-300",e&&"transform -translate-y-2"),onClick:v,children:[jsx("div",{className:"absolute inset-0 rounded-lg",style:{backgroundColor:x},children:s.map((o,t)=>jsx("div",{className:i("absolute left-1/2 -translate-x-1/2 w-[85%] h-[70%] rounded-md transition-all duration-300",e?"opacity-100":"opacity-0"),onMouseMove:r=>y(r,t),onMouseLeave:()=>b(t),style:{backgroundColor:t===0?"#f4f4f5":t===1?"#fafafa":"#ffffff",bottom:e?`${60+t*20}%`:"50%",transform:e?`translateX(calc(-50% + ${p[t]?.x||0}px)) translateY(${p[t]?.y||0}px) rotate(${(t-1)*3}deg)`:"translateX(-50%)",zIndex:3-t},children:o},t))}),jsx("div",{className:i("absolute bottom-0 left-0 right-0 h-[75%] rounded-lg transition-all duration-300",e&&"transform translate-y-1"),style:{backgroundColor:a},children:jsx("div",{className:"absolute -top-3 left-2 w-8 h-4 rounded-t-md",style:{backgroundColor:a}})})]})})}var z=O;export{O as Folder,z as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/folder/index.tsx"],"names":["cn","inputs","twMerge","clsx","darkenColor","hex","percent","color","c","num","r","g","b","Folder","size","items","className","papers","open","setOpen","useState","paperOffsets","setPaperOffsets","folderBackColor","handleClick","prev","handlePaperMouseMove","e","index","rect","offsetX","offsetY","newOffsets","handlePaperMouseLeave","jsx","jsxs","item","i","folder_default"],"mappings":"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","file":"index.mjs","sourcesContent":["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 React, { useState } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface FolderProps {\r\n color?: string;\r\n size?: number;\r\n items?: React.ReactNode[];\r\n className?: string;\r\n}\r\n\r\nconst darkenColor = (hex: string, percent: number): string => {\r\n let color = hex.startsWith(\"#\") ? hex.slice(1) : hex;\r\n if (color.length === 3) {\r\n color = color\r\n .split(\"\")\r\n .map((c) => c + c)\r\n .join(\"\");\r\n }\r\n const num = parseInt(color, 16);\r\n let r = (num >> 16) & 0xff;\r\n let g = (num >> 8) & 0xff;\r\n let b = num & 0xff;\r\n r = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));\r\n g = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));\r\n b = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));\r\n return (\r\n \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()\r\n );\r\n};\r\n\r\nexport function Folder({\r\n color = \"#18181b\",\r\n size = 1,\r\n items = [],\r\n className = \"\",\r\n}: FolderProps) {\r\n const maxItems = 3;\r\n const papers = items.slice(0, maxItems);\r\n while (papers.length < maxItems) {\r\n papers.push(null);\r\n }\r\n\r\n const [open, setOpen] = useState(false);\r\n const [paperOffsets, setPaperOffsets] = useState<{ x: number; y: number }[]>(\r\n Array.from({ length: maxItems }, () => ({ x: 0, y: 0 }))\r\n );\r\n\r\n const folderBackColor = darkenColor(color, 0.08);\r\n\r\n const handleClick = () => {\r\n setOpen((prev) => !prev);\r\n if (open) {\r\n setPaperOffsets(\r\n Array.from({ length: maxItems }, () => ({ x: 0, y: 0 }))\r\n );\r\n }\r\n };\r\n\r\n const handlePaperMouseMove = (\r\n e: React.MouseEvent<HTMLDivElement>,\r\n index: number\r\n ) => {\r\n if (!open) return;\r\n const rect = e.currentTarget.getBoundingClientRect();\r\n const offsetX = (e.clientX - (rect.left + rect.width / 2)) * 0.15;\r\n const offsetY = (e.clientY - (rect.top + rect.height / 2)) * 0.15;\r\n setPaperOffsets((prev) => {\r\n const newOffsets = [...prev];\r\n newOffsets[index] = { x: offsetX, y: offsetY };\r\n return newOffsets;\r\n });\r\n };\r\n\r\n const handlePaperMouseLeave = (index: number) => {\r\n setPaperOffsets((prev) => {\r\n const newOffsets = [...prev];\r\n newOffsets[index] = { x: 0, y: 0 };\r\n return newOffsets;\r\n });\r\n };\r\n\r\n return (\r\n <div\r\n className={cn(\"relative cursor-pointer\", className)}\r\n style={{ transform: `scale(${size})` }}\r\n >\r\n <div\r\n className={cn(\r\n \"relative w-32 h-24 transition-all duration-300\",\r\n open && \"transform -translate-y-2\"\r\n )}\r\n onClick={handleClick}\r\n >\r\n {/* Folder back */}\r\n <div\r\n className=\"absolute inset-0 rounded-lg\"\r\n style={{ backgroundColor: folderBackColor }}\r\n >\r\n {/* Papers */}\r\n {papers.map((item, i) => (\r\n <div\r\n key={i}\r\n className={cn(\r\n \"absolute left-1/2 -translate-x-1/2 w-[85%] h-[70%] rounded-md transition-all duration-300\",\r\n open ? \"opacity-100\" : \"opacity-0\"\r\n )}\r\n onMouseMove={(e) => handlePaperMouseMove(e, i)}\r\n onMouseLeave={() => handlePaperMouseLeave(i)}\r\n style={{\r\n backgroundColor: i === 0 ? \"#f4f4f5\" : i === 1 ? \"#fafafa\" : \"#ffffff\",\r\n bottom: open ? `${60 + i * 20}%` : \"50%\",\r\n transform: open\r\n ? `translateX(calc(-50% + ${paperOffsets[i]?.x || 0}px)) translateY(${paperOffsets[i]?.y || 0}px) rotate(${(i - 1) * 3}deg)`\r\n : \"translateX(-50%)\",\r\n zIndex: 3 - i,\r\n }}\r\n >\r\n {item}\r\n </div>\r\n ))}\r\n </div>\r\n\r\n {/* Folder front */}\r\n <div\r\n className={cn(\r\n \"absolute bottom-0 left-0 right-0 h-[75%] rounded-lg transition-all duration-300\",\r\n open && \"transform translate-y-1\"\r\n )}\r\n style={{ backgroundColor: color }}\r\n >\r\n {/* Folder tab */}\r\n <div\r\n className=\"absolute -top-3 left-2 w-8 h-4 rounded-t-md\"\r\n style={{ backgroundColor: color }}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Folder;\r\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function i(...r){return tailwindMerge.twMerge(clsx.clsx(r))}function S({width:r="500px",height:h="500px",background:c="#ffffff",borderRadius:p="12px",borderColor:d="#e5e5e5",children:f,glareColor:s="#000000",glareOpacity:g=.15,glareAngle:b=-45,glareSize:v=250,transitionDuration:u=650,playOnce:m=false,className:$="",style:y={}}){let e=s.replace("#",""),t=s;if(/^[0-9A-Fa-f]{6}$/.test(e)){let a=parseInt(e.slice(0,2),16),o=parseInt(e.slice(2,4),16),n=parseInt(e.slice(4,6),16);t=`rgba(${a}, ${o}, ${n}, ${g})`;}else if(/^[0-9A-Fa-f]{3}$/.test(e)){let a=parseInt(e[0]+e[0],16),o=parseInt(e[1]+e[1],16),n=parseInt(e[2]+e[2],16);t=`rgba(${a}, ${o}, ${n}, ${g})`;}let x=`
|
|
2
|
+
.glare-hover {
|
|
3
|
+
position: relative;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
width: var(--gh-width);
|
|
6
|
+
height: var(--gh-height);
|
|
7
|
+
background: var(--gh-bg);
|
|
8
|
+
border-radius: var(--gh-br);
|
|
9
|
+
border: 1px solid var(--gh-border);
|
|
10
|
+
}
|
|
11
|
+
.glare-hover::before {
|
|
12
|
+
content: "";
|
|
13
|
+
position: absolute;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: -100%;
|
|
16
|
+
width: var(--gh-size);
|
|
17
|
+
height: 100%;
|
|
18
|
+
background: linear-gradient(var(--gh-angle), transparent, var(--gh-rgba), transparent);
|
|
19
|
+
transition: left var(--gh-duration) ease;
|
|
20
|
+
}
|
|
21
|
+
.glare-hover:hover::before {
|
|
22
|
+
left: 100%;
|
|
23
|
+
}
|
|
24
|
+
.glare-hover--play-once::before {
|
|
25
|
+
animation: glare-once var(--gh-duration) ease forwards;
|
|
26
|
+
}
|
|
27
|
+
@keyframes glare-once {
|
|
28
|
+
0% { left: -100%; }
|
|
29
|
+
100% { left: 100%; }
|
|
30
|
+
}
|
|
31
|
+
`,w={"--gh-width":r,"--gh-height":h,"--gh-bg":c,"--gh-br":p,"--gh-angle":`${b}deg`,"--gh-duration":`${u}ms`,"--gh-size":`${v}%`,"--gh-rgba":t,"--gh-border":d};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("style",{children:x}),jsxRuntime.jsx("div",{className:i("glare-hover",m&&"glare-hover--play-once",$),style:{...w,...y},children:f})]})}var H=S;exports.GlareHover=S;exports.default=H;//# sourceMappingURL=index.js.map
|
|
32
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/glare-hover/index.tsx"],"names":["cn","inputs","twMerge","clsx","GlareHover","width","height","background","borderRadius","borderColor","children","glareColor","glareOpacity","glareAngle","glareSize","transitionDuration","playOnce","className","style","hex","rgba","r","g","b","glareStyles","vars","jsxs","Fragment","jsx","glare_hover_default"],"mappings":"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","file":"index.js","sourcesContent":["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 React from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nexport interface GlareHoverProps {\r\n width?: string;\r\n height?: string;\r\n background?: string;\r\n borderRadius?: string;\r\n borderColor?: string;\r\n children: React.ReactNode;\r\n glareColor?: string;\r\n glareOpacity?: number;\r\n glareAngle?: number;\r\n glareSize?: number;\r\n transitionDuration?: number;\r\n playOnce?: boolean;\r\n className?: string;\r\n style?: React.CSSProperties;\r\n}\r\n\r\nexport function GlareHover({\r\n width = \"500px\",\r\n height = \"500px\",\r\n background = \"#ffffff\",\r\n borderRadius = \"12px\",\r\n borderColor = \"#e5e5e5\",\r\n children,\r\n glareColor = \"#000000\",\r\n glareOpacity = 0.15,\r\n glareAngle = -45,\r\n glareSize = 250,\r\n transitionDuration = 650,\r\n playOnce = false,\r\n className = \"\",\r\n style = {},\r\n}: GlareHoverProps) {\r\n const hex = glareColor.replace(\"#\", \"\");\r\n let rgba = glareColor;\r\n if (/^[0-9A-Fa-f]{6}$/.test(hex)) {\r\n const r = parseInt(hex.slice(0, 2), 16);\r\n const g = parseInt(hex.slice(2, 4), 16);\r\n const b = parseInt(hex.slice(4, 6), 16);\r\n rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`;\r\n } else if (/^[0-9A-Fa-f]{3}$/.test(hex)) {\r\n const r = parseInt(hex[0] + hex[0], 16);\r\n const g = parseInt(hex[1] + hex[1], 16);\r\n const b = parseInt(hex[2] + hex[2], 16);\r\n rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`;\r\n }\r\n\r\n const glareStyles = `\r\n .glare-hover {\r\n position: relative;\r\n overflow: hidden;\r\n width: var(--gh-width);\r\n height: var(--gh-height);\r\n background: var(--gh-bg);\r\n border-radius: var(--gh-br);\r\n border: 1px solid var(--gh-border);\r\n }\r\n .glare-hover::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: var(--gh-size);\r\n height: 100%;\r\n background: linear-gradient(var(--gh-angle), transparent, var(--gh-rgba), transparent);\r\n transition: left var(--gh-duration) ease;\r\n }\r\n .glare-hover:hover::before {\r\n left: 100%;\r\n }\r\n .glare-hover--play-once::before {\r\n animation: glare-once var(--gh-duration) ease forwards;\r\n }\r\n @keyframes glare-once {\r\n 0% { left: -100%; }\r\n 100% { left: 100%; }\r\n }\r\n `;\r\n\r\n const vars = {\r\n \"--gh-width\": width,\r\n \"--gh-height\": height,\r\n \"--gh-bg\": background,\r\n \"--gh-br\": borderRadius,\r\n \"--gh-angle\": `${glareAngle}deg`,\r\n \"--gh-duration\": `${transitionDuration}ms`,\r\n \"--gh-size\": `${glareSize}%`,\r\n \"--gh-rgba\": rgba,\r\n \"--gh-border\": borderColor,\r\n } as React.CSSProperties;\r\n\r\n return (\r\n <>\r\n <style>{glareStyles}</style>\r\n <div\r\n className={cn(\"glare-hover\", playOnce && \"glare-hover--play-once\", className)}\r\n style={{ ...vars, ...style }}\r\n >\r\n {children}\r\n </div>\r\n </>\r\n );\r\n}\r\n\r\nexport default GlareHover;\r\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,Fragment,jsx}from'react/jsx-runtime';function i(...r){return twMerge(clsx(r))}function S({width:r="500px",height:h="500px",background:c="#ffffff",borderRadius:p="12px",borderColor:d="#e5e5e5",children:f,glareColor:s="#000000",glareOpacity:g=.15,glareAngle:b=-45,glareSize:v=250,transitionDuration:u=650,playOnce:m=false,className:$="",style:y={}}){let e=s.replace("#",""),t=s;if(/^[0-9A-Fa-f]{6}$/.test(e)){let a=parseInt(e.slice(0,2),16),o=parseInt(e.slice(2,4),16),n=parseInt(e.slice(4,6),16);t=`rgba(${a}, ${o}, ${n}, ${g})`;}else if(/^[0-9A-Fa-f]{3}$/.test(e)){let a=parseInt(e[0]+e[0],16),o=parseInt(e[1]+e[1],16),n=parseInt(e[2]+e[2],16);t=`rgba(${a}, ${o}, ${n}, ${g})`;}let x=`
|
|
2
|
+
.glare-hover {
|
|
3
|
+
position: relative;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
width: var(--gh-width);
|
|
6
|
+
height: var(--gh-height);
|
|
7
|
+
background: var(--gh-bg);
|
|
8
|
+
border-radius: var(--gh-br);
|
|
9
|
+
border: 1px solid var(--gh-border);
|
|
10
|
+
}
|
|
11
|
+
.glare-hover::before {
|
|
12
|
+
content: "";
|
|
13
|
+
position: absolute;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: -100%;
|
|
16
|
+
width: var(--gh-size);
|
|
17
|
+
height: 100%;
|
|
18
|
+
background: linear-gradient(var(--gh-angle), transparent, var(--gh-rgba), transparent);
|
|
19
|
+
transition: left var(--gh-duration) ease;
|
|
20
|
+
}
|
|
21
|
+
.glare-hover:hover::before {
|
|
22
|
+
left: 100%;
|
|
23
|
+
}
|
|
24
|
+
.glare-hover--play-once::before {
|
|
25
|
+
animation: glare-once var(--gh-duration) ease forwards;
|
|
26
|
+
}
|
|
27
|
+
@keyframes glare-once {
|
|
28
|
+
0% { left: -100%; }
|
|
29
|
+
100% { left: 100%; }
|
|
30
|
+
}
|
|
31
|
+
`,w={"--gh-width":r,"--gh-height":h,"--gh-bg":c,"--gh-br":p,"--gh-angle":`${b}deg`,"--gh-duration":`${u}ms`,"--gh-size":`${v}%`,"--gh-rgba":t,"--gh-border":d};return jsxs(Fragment,{children:[jsx("style",{children:x}),jsx("div",{className:i("glare-hover",m&&"glare-hover--play-once",$),style:{...w,...y},children:f})]})}var H=S;export{S as GlareHover,H as default};//# sourceMappingURL=index.mjs.map
|
|
32
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/glare-hover/index.tsx"],"names":["cn","inputs","twMerge","clsx","GlareHover","width","height","background","borderRadius","borderColor","children","glareColor","glareOpacity","glareAngle","glareSize","transitionDuration","playOnce","className","style","hex","rgba","r","g","b","glareStyles","vars","jsxs","Fragment","jsx","glare_hover_default"],"mappings":"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","file":"index.mjs","sourcesContent":["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 React from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nexport interface GlareHoverProps {\r\n width?: string;\r\n height?: string;\r\n background?: string;\r\n borderRadius?: string;\r\n borderColor?: string;\r\n children: React.ReactNode;\r\n glareColor?: string;\r\n glareOpacity?: number;\r\n glareAngle?: number;\r\n glareSize?: number;\r\n transitionDuration?: number;\r\n playOnce?: boolean;\r\n className?: string;\r\n style?: React.CSSProperties;\r\n}\r\n\r\nexport function GlareHover({\r\n width = \"500px\",\r\n height = \"500px\",\r\n background = \"#ffffff\",\r\n borderRadius = \"12px\",\r\n borderColor = \"#e5e5e5\",\r\n children,\r\n glareColor = \"#000000\",\r\n glareOpacity = 0.15,\r\n glareAngle = -45,\r\n glareSize = 250,\r\n transitionDuration = 650,\r\n playOnce = false,\r\n className = \"\",\r\n style = {},\r\n}: GlareHoverProps) {\r\n const hex = glareColor.replace(\"#\", \"\");\r\n let rgba = glareColor;\r\n if (/^[0-9A-Fa-f]{6}$/.test(hex)) {\r\n const r = parseInt(hex.slice(0, 2), 16);\r\n const g = parseInt(hex.slice(2, 4), 16);\r\n const b = parseInt(hex.slice(4, 6), 16);\r\n rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`;\r\n } else if (/^[0-9A-Fa-f]{3}$/.test(hex)) {\r\n const r = parseInt(hex[0] + hex[0], 16);\r\n const g = parseInt(hex[1] + hex[1], 16);\r\n const b = parseInt(hex[2] + hex[2], 16);\r\n rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`;\r\n }\r\n\r\n const glareStyles = `\r\n .glare-hover {\r\n position: relative;\r\n overflow: hidden;\r\n width: var(--gh-width);\r\n height: var(--gh-height);\r\n background: var(--gh-bg);\r\n border-radius: var(--gh-br);\r\n border: 1px solid var(--gh-border);\r\n }\r\n .glare-hover::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: var(--gh-size);\r\n height: 100%;\r\n background: linear-gradient(var(--gh-angle), transparent, var(--gh-rgba), transparent);\r\n transition: left var(--gh-duration) ease;\r\n }\r\n .glare-hover:hover::before {\r\n left: 100%;\r\n }\r\n .glare-hover--play-once::before {\r\n animation: glare-once var(--gh-duration) ease forwards;\r\n }\r\n @keyframes glare-once {\r\n 0% { left: -100%; }\r\n 100% { left: 100%; }\r\n }\r\n `;\r\n\r\n const vars = {\r\n \"--gh-width\": width,\r\n \"--gh-height\": height,\r\n \"--gh-bg\": background,\r\n \"--gh-br\": borderRadius,\r\n \"--gh-angle\": `${glareAngle}deg`,\r\n \"--gh-duration\": `${transitionDuration}ms`,\r\n \"--gh-size\": `${glareSize}%`,\r\n \"--gh-rgba\": rgba,\r\n \"--gh-border\": borderColor,\r\n } as React.CSSProperties;\r\n\r\n return (\r\n <>\r\n <style>{glareStyles}</style>\r\n <div\r\n className={cn(\"glare-hover\", playOnce && \"glare-hover--play-once\", className)}\r\n style={{ ...vars, ...style }}\r\n >\r\n {children}\r\n </div>\r\n </>\r\n );\r\n}\r\n\r\nexport default GlareHover;\r\n"]}
|