bynana-ui 1.5.0 → 1.6.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/crosshair/index.js +2 -0
- package/dist/crosshair/index.js.map +1 -0
- package/dist/crosshair/index.mjs +2 -0
- package/dist/crosshair/index.mjs.map +1 -0
- package/dist/decay-card/index.js +3 -0
- package/dist/decay-card/index.js.map +1 -0
- package/dist/decay-card/index.mjs +3 -0
- package/dist/decay-card/index.mjs.map +1 -0
- package/dist/flowing-menu/index.js +3 -0
- package/dist/flowing-menu/index.js.map +1 -0
- package/dist/flowing-menu/index.mjs +3 -0
- package/dist/flowing-menu/index.mjs.map +1 -0
- package/dist/gooey-nav/index.js +2 -0
- package/dist/gooey-nav/index.js.map +1 -0
- package/dist/gooey-nav/index.mjs +2 -0
- package/dist/gooey-nav/index.mjs.map +1 -0
- package/dist/index.js +13 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -12
- package/dist/index.mjs.map +1 -1
- package/dist/liquid-glass-card/index.js +2 -0
- package/dist/liquid-glass-card/index.js.map +1 -0
- package/dist/liquid-glass-card/index.mjs +2 -0
- package/dist/liquid-glass-card/index.mjs.map +1 -0
- package/dist/pill-nav/index.js +2 -0
- package/dist/pill-nav/index.js.map +1 -0
- package/dist/pill-nav/index.mjs +2 -0
- package/dist/pill-nav/index.mjs.map +1 -0
- package/dist/scroll-text/index.js +2 -0
- package/dist/scroll-text/index.js.map +1 -0
- package/dist/scroll-text/index.mjs +2 -0
- package/dist/scroll-text/index.mjs.map +1 -0
- package/dist/smooth-drawer/index.js +2 -0
- package/dist/smooth-drawer/index.js.map +1 -0
- package/dist/smooth-drawer/index.mjs +2 -0
- package/dist/smooth-drawer/index.mjs.map +1 -0
- package/dist/smooth-tab/index.js +2 -0
- package/dist/smooth-tab/index.js.map +1 -0
- package/dist/smooth-tab/index.mjs +2 -0
- package/dist/smooth-tab/index.mjs.map +1 -0
- package/dist/target-cursor/index.js +2 -0
- package/dist/target-cursor/index.js.map +1 -0
- package/dist/target-cursor/index.mjs +2 -0
- package/dist/target-cursor/index.mjs.map +1 -0
- package/package.json +11 -1
|
@@ -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 v(...i){return tailwindMerge.twMerge(clsx.clsx(i))}var x=(i,r,l)=>(1-l)*i+l*r;function w({color:i="#000000",containerRef:r=null,className:l}){let h=react.useRef(null),t=react.useRef(null),n=react.useRef(null),a=react.useRef({x:0,y:0}),o=react.useRef({x:0,y:0}),p=react.useRef();return react.useEffect(()=>{if(typeof window>"u")return;let E=(e,s)=>{if(s){let u=s.getBoundingClientRect();return {x:e.clientX-u.left,y:e.clientY-u.top}}return {x:e.clientX,y:e.clientY}},y=e=>{if(a.current=E(e,r?.current||void 0),r?.current){let s=r.current.getBoundingClientRect(),u=e.clientX<s.left||e.clientX>s.right||e.clientY<s.top||e.clientY>s.bottom;t.current&&n.current&&(t.current.style.opacity=u?"0":"1",n.current.style.opacity=u?"0":"1");}},m=r?.current||window;m.addEventListener("mousemove",y),t.current&&n.current&&(t.current.style.opacity="0",n.current.style.opacity="0");let f=()=>{o.current={...a.current},t.current&&n.current&&(t.current.style.opacity="1",n.current.style.opacity="1"),m.removeEventListener("mousemove",f);};m.addEventListener("mousemove",f);let d=()=>{o.current.x=x(o.current.x,a.current.x,.15),o.current.y=x(o.current.y,a.current.y,.15),t.current&&n.current&&(n.current.style.transform=`translateX(${o.current.x}px)`,t.current.style.transform=`translateY(${o.current.y}px)`),p.current=requestAnimationFrame(d);};return d(),()=>{m.removeEventListener("mousemove",y),p.current&&cancelAnimationFrame(p.current);}},[r]),jsxRuntime.jsxs("div",{ref:h,className:v("pointer-events-none z-[10000]",l),style:{position:r?"absolute":"fixed",top:0,left:0,width:"100%",height:"100%"},children:[jsxRuntime.jsx("div",{ref:t,style:{position:"absolute",width:"100%",height:"1px",background:i,pointerEvents:"none",opacity:0,transition:"opacity 0.3s ease"}}),jsxRuntime.jsx("div",{ref:n,style:{position:"absolute",height:"100%",width:"1px",background:i,pointerEvents:"none",opacity:0,transition:"opacity 0.3s ease"}})]})}var F=w;exports.Crosshair=w;exports.default=F;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/crosshair/index.tsx"],"names":["cn","inputs","twMerge","clsx","lerp","a","b","n","Crosshair","color","containerRef","className","cursorRef","useRef","lineHorizontalRef","lineVerticalRef","mouseRef","renderedRef","animationRef","useEffect","getMousePos","container","bounds","handleMouseMove","ev","isOutside","target","onFirstMove","render","jsxs","jsx","crosshair_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, { useEffect, useRef } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface CrosshairProps {\r\n color?: string;\r\n containerRef?: React.RefObject<HTMLElement>;\r\n className?: string;\r\n}\r\n\r\nconst lerp = (a: number, b: number, n: number) => (1 - n) * a + n * b;\r\n\r\nexport function Crosshair({\r\n color = \"#000000\",\r\n containerRef = null,\r\n className,\r\n}: CrosshairProps) {\r\n const cursorRef = useRef<HTMLDivElement>(null);\r\n const lineHorizontalRef = useRef<HTMLDivElement>(null);\r\n const lineVerticalRef = useRef<HTMLDivElement>(null);\r\n const mouseRef = useRef({ x: 0, y: 0 });\r\n const renderedRef = useRef({ x: 0, y: 0 });\r\n const animationRef = useRef<number>();\r\n\r\n useEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n\r\n const getMousePos = (e: MouseEvent, container?: HTMLElement) => {\r\n if (container) {\r\n const bounds = container.getBoundingClientRect();\r\n return {\r\n x: e.clientX - bounds.left,\r\n y: e.clientY - bounds.top,\r\n };\r\n }\r\n return { x: e.clientX, y: e.clientY };\r\n };\r\n\r\n const handleMouseMove = (ev: MouseEvent) => {\r\n mouseRef.current = getMousePos(ev, containerRef?.current || undefined);\r\n\r\n if (containerRef?.current) {\r\n const bounds = containerRef.current.getBoundingClientRect();\r\n const isOutside =\r\n ev.clientX < bounds.left ||\r\n ev.clientX > bounds.right ||\r\n ev.clientY < bounds.top ||\r\n ev.clientY > bounds.bottom;\r\n\r\n if (lineHorizontalRef.current && lineVerticalRef.current) {\r\n lineHorizontalRef.current.style.opacity = isOutside ? \"0\" : \"1\";\r\n lineVerticalRef.current.style.opacity = isOutside ? \"0\" : \"1\";\r\n }\r\n }\r\n };\r\n\r\n const target = containerRef?.current || window;\r\n target.addEventListener(\"mousemove\", handleMouseMove as any);\r\n\r\n // Initial setup\r\n if (lineHorizontalRef.current && lineVerticalRef.current) {\r\n lineHorizontalRef.current.style.opacity = \"0\";\r\n lineVerticalRef.current.style.opacity = \"0\";\r\n }\r\n\r\n const onFirstMove = () => {\r\n renderedRef.current = { ...mouseRef.current };\r\n if (lineHorizontalRef.current && lineVerticalRef.current) {\r\n lineHorizontalRef.current.style.opacity = \"1\";\r\n lineVerticalRef.current.style.opacity = \"1\";\r\n }\r\n target.removeEventListener(\"mousemove\", onFirstMove as any);\r\n };\r\n target.addEventListener(\"mousemove\", onFirstMove as any);\r\n\r\n const render = () => {\r\n renderedRef.current.x = lerp(renderedRef.current.x, mouseRef.current.x, 0.15);\r\n renderedRef.current.y = lerp(renderedRef.current.y, mouseRef.current.y, 0.15);\r\n\r\n if (lineHorizontalRef.current && lineVerticalRef.current) {\r\n lineVerticalRef.current.style.transform = `translateX(${renderedRef.current.x}px)`;\r\n lineHorizontalRef.current.style.transform = `translateY(${renderedRef.current.y}px)`;\r\n }\r\n\r\n animationRef.current = requestAnimationFrame(render);\r\n };\r\n\r\n render();\r\n\r\n return () => {\r\n target.removeEventListener(\"mousemove\", handleMouseMove as any);\r\n if (animationRef.current) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n }, [containerRef]);\r\n\r\n return (\r\n <div\r\n ref={cursorRef}\r\n className={cn(\"pointer-events-none z-[10000]\", className)}\r\n style={{\r\n position: containerRef ? \"absolute\" : \"fixed\",\r\n top: 0,\r\n left: 0,\r\n width: \"100%\",\r\n height: \"100%\",\r\n }}\r\n >\r\n <div\r\n ref={lineHorizontalRef}\r\n style={{\r\n position: \"absolute\",\r\n width: \"100%\",\r\n height: \"1px\",\r\n background: color,\r\n pointerEvents: \"none\",\r\n opacity: 0,\r\n transition: \"opacity 0.3s ease\",\r\n }}\r\n />\r\n <div\r\n ref={lineVerticalRef}\r\n style={{\r\n position: \"absolute\",\r\n height: \"100%\",\r\n width: \"1px\",\r\n background: color,\r\n pointerEvents: \"none\",\r\n opacity: 0,\r\n transition: \"opacity 0.3s ease\",\r\n }}\r\n />\r\n </div>\r\n );\r\n}\r\n\r\nexport default Crosshair;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useRef,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function v(...i){return twMerge(clsx(i))}var x=(i,r,l)=>(1-l)*i+l*r;function w({color:i="#000000",containerRef:r=null,className:l}){let h=useRef(null),t=useRef(null),n=useRef(null),a=useRef({x:0,y:0}),o=useRef({x:0,y:0}),p=useRef();return useEffect(()=>{if(typeof window>"u")return;let E=(e,s)=>{if(s){let u=s.getBoundingClientRect();return {x:e.clientX-u.left,y:e.clientY-u.top}}return {x:e.clientX,y:e.clientY}},y=e=>{if(a.current=E(e,r?.current||void 0),r?.current){let s=r.current.getBoundingClientRect(),u=e.clientX<s.left||e.clientX>s.right||e.clientY<s.top||e.clientY>s.bottom;t.current&&n.current&&(t.current.style.opacity=u?"0":"1",n.current.style.opacity=u?"0":"1");}},m=r?.current||window;m.addEventListener("mousemove",y),t.current&&n.current&&(t.current.style.opacity="0",n.current.style.opacity="0");let f=()=>{o.current={...a.current},t.current&&n.current&&(t.current.style.opacity="1",n.current.style.opacity="1"),m.removeEventListener("mousemove",f);};m.addEventListener("mousemove",f);let d=()=>{o.current.x=x(o.current.x,a.current.x,.15),o.current.y=x(o.current.y,a.current.y,.15),t.current&&n.current&&(n.current.style.transform=`translateX(${o.current.x}px)`,t.current.style.transform=`translateY(${o.current.y}px)`),p.current=requestAnimationFrame(d);};return d(),()=>{m.removeEventListener("mousemove",y),p.current&&cancelAnimationFrame(p.current);}},[r]),jsxs("div",{ref:h,className:v("pointer-events-none z-[10000]",l),style:{position:r?"absolute":"fixed",top:0,left:0,width:"100%",height:"100%"},children:[jsx("div",{ref:t,style:{position:"absolute",width:"100%",height:"1px",background:i,pointerEvents:"none",opacity:0,transition:"opacity 0.3s ease"}}),jsx("div",{ref:n,style:{position:"absolute",height:"100%",width:"1px",background:i,pointerEvents:"none",opacity:0,transition:"opacity 0.3s ease"}})]})}var F=w;export{w as Crosshair,F as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/crosshair/index.tsx"],"names":["cn","inputs","twMerge","clsx","lerp","a","b","n","Crosshair","color","containerRef","className","cursorRef","useRef","lineHorizontalRef","lineVerticalRef","mouseRef","renderedRef","animationRef","useEffect","getMousePos","container","bounds","handleMouseMove","ev","isOutside","target","onFirstMove","render","jsxs","jsx","crosshair_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, { useEffect, useRef } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface CrosshairProps {\r\n color?: string;\r\n containerRef?: React.RefObject<HTMLElement>;\r\n className?: string;\r\n}\r\n\r\nconst lerp = (a: number, b: number, n: number) => (1 - n) * a + n * b;\r\n\r\nexport function Crosshair({\r\n color = \"#000000\",\r\n containerRef = null,\r\n className,\r\n}: CrosshairProps) {\r\n const cursorRef = useRef<HTMLDivElement>(null);\r\n const lineHorizontalRef = useRef<HTMLDivElement>(null);\r\n const lineVerticalRef = useRef<HTMLDivElement>(null);\r\n const mouseRef = useRef({ x: 0, y: 0 });\r\n const renderedRef = useRef({ x: 0, y: 0 });\r\n const animationRef = useRef<number>();\r\n\r\n useEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n\r\n const getMousePos = (e: MouseEvent, container?: HTMLElement) => {\r\n if (container) {\r\n const bounds = container.getBoundingClientRect();\r\n return {\r\n x: e.clientX - bounds.left,\r\n y: e.clientY - bounds.top,\r\n };\r\n }\r\n return { x: e.clientX, y: e.clientY };\r\n };\r\n\r\n const handleMouseMove = (ev: MouseEvent) => {\r\n mouseRef.current = getMousePos(ev, containerRef?.current || undefined);\r\n\r\n if (containerRef?.current) {\r\n const bounds = containerRef.current.getBoundingClientRect();\r\n const isOutside =\r\n ev.clientX < bounds.left ||\r\n ev.clientX > bounds.right ||\r\n ev.clientY < bounds.top ||\r\n ev.clientY > bounds.bottom;\r\n\r\n if (lineHorizontalRef.current && lineVerticalRef.current) {\r\n lineHorizontalRef.current.style.opacity = isOutside ? \"0\" : \"1\";\r\n lineVerticalRef.current.style.opacity = isOutside ? \"0\" : \"1\";\r\n }\r\n }\r\n };\r\n\r\n const target = containerRef?.current || window;\r\n target.addEventListener(\"mousemove\", handleMouseMove as any);\r\n\r\n // Initial setup\r\n if (lineHorizontalRef.current && lineVerticalRef.current) {\r\n lineHorizontalRef.current.style.opacity = \"0\";\r\n lineVerticalRef.current.style.opacity = \"0\";\r\n }\r\n\r\n const onFirstMove = () => {\r\n renderedRef.current = { ...mouseRef.current };\r\n if (lineHorizontalRef.current && lineVerticalRef.current) {\r\n lineHorizontalRef.current.style.opacity = \"1\";\r\n lineVerticalRef.current.style.opacity = \"1\";\r\n }\r\n target.removeEventListener(\"mousemove\", onFirstMove as any);\r\n };\r\n target.addEventListener(\"mousemove\", onFirstMove as any);\r\n\r\n const render = () => {\r\n renderedRef.current.x = lerp(renderedRef.current.x, mouseRef.current.x, 0.15);\r\n renderedRef.current.y = lerp(renderedRef.current.y, mouseRef.current.y, 0.15);\r\n\r\n if (lineHorizontalRef.current && lineVerticalRef.current) {\r\n lineVerticalRef.current.style.transform = `translateX(${renderedRef.current.x}px)`;\r\n lineHorizontalRef.current.style.transform = `translateY(${renderedRef.current.y}px)`;\r\n }\r\n\r\n animationRef.current = requestAnimationFrame(render);\r\n };\r\n\r\n render();\r\n\r\n return () => {\r\n target.removeEventListener(\"mousemove\", handleMouseMove as any);\r\n if (animationRef.current) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n }, [containerRef]);\r\n\r\n return (\r\n <div\r\n ref={cursorRef}\r\n className={cn(\"pointer-events-none z-[10000]\", className)}\r\n style={{\r\n position: containerRef ? \"absolute\" : \"fixed\",\r\n top: 0,\r\n left: 0,\r\n width: \"100%\",\r\n height: \"100%\",\r\n }}\r\n >\r\n <div\r\n ref={lineHorizontalRef}\r\n style={{\r\n position: \"absolute\",\r\n width: \"100%\",\r\n height: \"1px\",\r\n background: color,\r\n pointerEvents: \"none\",\r\n opacity: 0,\r\n transition: \"opacity 0.3s ease\",\r\n }}\r\n />\r\n <div\r\n ref={lineVerticalRef}\r\n style={{\r\n position: \"absolute\",\r\n height: \"100%\",\r\n width: \"1px\",\r\n background: color,\r\n pointerEvents: \"none\",\r\n opacity: 0,\r\n transition: \"opacity 0.3s ease\",\r\n }}\r\n />\r\n </div>\r\n );\r\n}\r\n\r\nexport default Crosshair;\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 R(...f){return tailwindMerge.twMerge(clsx.clsx(f))}function T({width:f=300,height:C=400,image:D="https://picsum.photos/300/400?grayscale",children:y,className:E}){let p=react.useRef(null),h=react.useRef(null),i=react.useRef({x:0,y:0}),a=react.useRef({x:0,y:0}),o=react.useRef({x:0,y:0,rz:0}),x=react.useRef(0),g=react.useRef();react.useEffect(()=>{if(typeof window>"u")return;i.current={x:window.innerWidth/2,y:window.innerHeight/2},a.current={...i.current};let l=(n,c,e)=>(1-e)*n+e*c,m=(n,c,e,t,d)=>(n-c)*(d-t)/(e-c)+t,N=(n,c,e,t)=>Math.hypot(n-c,e-t),v=n=>{i.current={x:n.clientX,y:n.clientY};};window.addEventListener("mousemove",v);let M=()=>{let n=window.innerWidth,c=window.innerHeight,e=l(o.current.x,m(i.current.x,0,n,-120,120),.1),t=l(o.current.y,m(i.current.y,0,c,-120,120),.1),d=l(o.current.rz,m(i.current.x,0,n,-10,10),.1),r=50;e>r&&(e=r+(e-r)*.2),e<-r&&(e=-r+(e+r)*.2),t>r&&(t=r+(t-r)*.2),t<-r&&(t=-r+(t+r)*.2),o.current={x:e,y:t,rz:d},p.current&&(p.current.style.transform=`translate(${e}px, ${t}px) rotateZ(${d}deg)`);let S=N(a.current.x,i.current.x,a.current.y,i.current.y);x.current=l(x.current,m(S,0,200,0,400),.06),h.current&&h.current.setAttribute("scale",String(x.current)),a.current={...i.current},g.current=requestAnimationFrame(M);};return M(),()=>{window.removeEventListener("mousemove",v),g.current&&cancelAnimationFrame(g.current);}},[]);let b=`imgFilter-${Math.random().toString(36).substr(2,9)}`;return jsxRuntime.jsxs("div",{className:R("relative",E),style:{width:`${f}px`,height:`${C}px`},ref:p,children:[jsxRuntime.jsxs("svg",{viewBox:"-60 -75 720 900",preserveAspectRatio:"xMidYMid slice",className:"w-full h-full",children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("filter",{id:b,children:[jsxRuntime.jsx("feTurbulence",{type:"turbulence",baseFrequency:"0.015",numOctaves:"5",seed:"4",stitchTiles:"stitch",x:"0%",y:"0%",width:"100%",height:"100%",result:"turbulence1"}),jsxRuntime.jsx("feDisplacementMap",{ref:h,in:"SourceGraphic",in2:"turbulence1",scale:"0",xChannelSelector:"R",yChannelSelector:"B",x:"0%",y:"0%",width:"100%",height:"100%",result:"displacementMap3"})]})}),jsxRuntime.jsx("g",{children:jsxRuntime.jsx("image",{href:D,x:"0",y:"0",width:"600",height:"750",filter:`url(#${b})`,preserveAspectRatio:"xMidYMid slice"})})]}),y&&jsxRuntime.jsx("div",{className:"absolute inset-0 flex items-end p-6",children:jsxRuntime.jsx("div",{className:"text-white",children:y})})]})}var B=T;
|
|
2
|
+
exports.DecayCard=T;exports.default=B;//# sourceMappingURL=index.js.map
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/decay-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","DecayCard","width","height","image","children","className","containerRef","useRef","displacementMapRef","cursor","cachedCursor","imgTransforms","displacementScale","animationRef","useEffect","lerp","a","b","n","map","x","c","distance","x1","x2","y1","y2","handleMouseMove","ev","render","winWidth","winHeight","targetX","targetY","targetRz","bound","cursorTravelledDistance","filterId","jsxs","jsx","decay_card_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, { useEffect, useRef, ReactNode } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface DecayCardProps {\r\n width?: number;\r\n height?: number;\r\n image?: string;\r\n children?: ReactNode;\r\n className?: string;\r\n}\r\n\r\nexport function DecayCard({\r\n width = 300,\r\n height = 400,\r\n image = \"https://picsum.photos/300/400?grayscale\",\r\n children,\r\n className,\r\n}: DecayCardProps) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const displacementMapRef = useRef<SVGFEDisplacementMapElement>(null);\r\n const cursor = useRef({ x: 0, y: 0 });\r\n const cachedCursor = useRef({ x: 0, y: 0 });\r\n const imgTransforms = useRef({ x: 0, y: 0, rz: 0 });\r\n const displacementScale = useRef(0);\r\n const animationRef = useRef<number>();\r\n\r\n useEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n\r\n cursor.current = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\r\n cachedCursor.current = { ...cursor.current };\r\n\r\n const lerp = (a: number, b: number, n: number) => (1 - n) * a + n * b;\r\n const map = (x: number, a: number, b: number, c: number, d: number) =>\r\n ((x - a) * (d - c)) / (b - a) + c;\r\n const distance = (x1: number, x2: number, y1: number, y2: number) =>\r\n Math.hypot(x1 - x2, y1 - y2);\r\n\r\n const handleMouseMove = (ev: MouseEvent) => {\r\n cursor.current = { x: ev.clientX, y: ev.clientY };\r\n };\r\n\r\n window.addEventListener(\"mousemove\", handleMouseMove);\r\n\r\n const render = () => {\r\n const winWidth = window.innerWidth;\r\n const winHeight = window.innerHeight;\r\n\r\n let targetX = lerp(\r\n imgTransforms.current.x,\r\n map(cursor.current.x, 0, winWidth, -120, 120),\r\n 0.1\r\n );\r\n let targetY = lerp(\r\n imgTransforms.current.y,\r\n map(cursor.current.y, 0, winHeight, -120, 120),\r\n 0.1\r\n );\r\n let targetRz = lerp(\r\n imgTransforms.current.rz,\r\n map(cursor.current.x, 0, winWidth, -10, 10),\r\n 0.1\r\n );\r\n\r\n const bound = 50;\r\n if (targetX > bound) targetX = bound + (targetX - bound) * 0.2;\r\n if (targetX < -bound) targetX = -bound + (targetX + bound) * 0.2;\r\n if (targetY > bound) targetY = bound + (targetY - bound) * 0.2;\r\n if (targetY < -bound) targetY = -bound + (targetY + bound) * 0.2;\r\n\r\n imgTransforms.current = { x: targetX, y: targetY, rz: targetRz };\r\n\r\n if (containerRef.current) {\r\n containerRef.current.style.transform = `translate(${targetX}px, ${targetY}px) rotateZ(${targetRz}deg)`;\r\n }\r\n\r\n const cursorTravelledDistance = distance(\r\n cachedCursor.current.x,\r\n cursor.current.x,\r\n cachedCursor.current.y,\r\n cursor.current.y\r\n );\r\n\r\n displacementScale.current = lerp(\r\n displacementScale.current,\r\n map(cursorTravelledDistance, 0, 200, 0, 400),\r\n 0.06\r\n );\r\n\r\n if (displacementMapRef.current) {\r\n displacementMapRef.current.setAttribute(\r\n \"scale\",\r\n String(displacementScale.current)\r\n );\r\n }\r\n\r\n cachedCursor.current = { ...cursor.current };\r\n animationRef.current = requestAnimationFrame(render);\r\n };\r\n\r\n render();\r\n\r\n return () => {\r\n window.removeEventListener(\"mousemove\", handleMouseMove);\r\n if (animationRef.current) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n }, []);\r\n\r\n const filterId = `imgFilter-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n return (\r\n <div\r\n className={cn(\"relative\", className)}\r\n style={{ width: `${width}px`, height: `${height}px` }}\r\n ref={containerRef}\r\n >\r\n <svg\r\n viewBox=\"-60 -75 720 900\"\r\n preserveAspectRatio=\"xMidYMid slice\"\r\n className=\"w-full h-full\"\r\n >\r\n <defs>\r\n <filter id={filterId}>\r\n <feTurbulence\r\n type=\"turbulence\"\r\n baseFrequency=\"0.015\"\r\n numOctaves=\"5\"\r\n seed=\"4\"\r\n stitchTiles=\"stitch\"\r\n x=\"0%\"\r\n y=\"0%\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n result=\"turbulence1\"\r\n />\r\n <feDisplacementMap\r\n ref={displacementMapRef}\r\n in=\"SourceGraphic\"\r\n in2=\"turbulence1\"\r\n scale=\"0\"\r\n xChannelSelector=\"R\"\r\n yChannelSelector=\"B\"\r\n x=\"0%\"\r\n y=\"0%\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n result=\"displacementMap3\"\r\n />\r\n </filter>\r\n </defs>\r\n <g>\r\n <image\r\n href={image}\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"600\"\r\n height=\"750\"\r\n filter={`url(#${filterId})`}\r\n preserveAspectRatio=\"xMidYMid slice\"\r\n />\r\n </g>\r\n </svg>\r\n {children && (\r\n <div className=\"absolute inset-0 flex items-end p-6\">\r\n <div className=\"text-white\">{children}</div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nexport default DecayCard;\r\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import {useRef,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function R(...f){return twMerge(clsx(f))}function T({width:f=300,height:C=400,image:D="https://picsum.photos/300/400?grayscale",children:y,className:E}){let p=useRef(null),h=useRef(null),i=useRef({x:0,y:0}),a=useRef({x:0,y:0}),o=useRef({x:0,y:0,rz:0}),x=useRef(0),g=useRef();useEffect(()=>{if(typeof window>"u")return;i.current={x:window.innerWidth/2,y:window.innerHeight/2},a.current={...i.current};let l=(n,c,e)=>(1-e)*n+e*c,m=(n,c,e,t,d)=>(n-c)*(d-t)/(e-c)+t,N=(n,c,e,t)=>Math.hypot(n-c,e-t),v=n=>{i.current={x:n.clientX,y:n.clientY};};window.addEventListener("mousemove",v);let M=()=>{let n=window.innerWidth,c=window.innerHeight,e=l(o.current.x,m(i.current.x,0,n,-120,120),.1),t=l(o.current.y,m(i.current.y,0,c,-120,120),.1),d=l(o.current.rz,m(i.current.x,0,n,-10,10),.1),r=50;e>r&&(e=r+(e-r)*.2),e<-r&&(e=-r+(e+r)*.2),t>r&&(t=r+(t-r)*.2),t<-r&&(t=-r+(t+r)*.2),o.current={x:e,y:t,rz:d},p.current&&(p.current.style.transform=`translate(${e}px, ${t}px) rotateZ(${d}deg)`);let S=N(a.current.x,i.current.x,a.current.y,i.current.y);x.current=l(x.current,m(S,0,200,0,400),.06),h.current&&h.current.setAttribute("scale",String(x.current)),a.current={...i.current},g.current=requestAnimationFrame(M);};return M(),()=>{window.removeEventListener("mousemove",v),g.current&&cancelAnimationFrame(g.current);}},[]);let b=`imgFilter-${Math.random().toString(36).substr(2,9)}`;return jsxs("div",{className:R("relative",E),style:{width:`${f}px`,height:`${C}px`},ref:p,children:[jsxs("svg",{viewBox:"-60 -75 720 900",preserveAspectRatio:"xMidYMid slice",className:"w-full h-full",children:[jsx("defs",{children:jsxs("filter",{id:b,children:[jsx("feTurbulence",{type:"turbulence",baseFrequency:"0.015",numOctaves:"5",seed:"4",stitchTiles:"stitch",x:"0%",y:"0%",width:"100%",height:"100%",result:"turbulence1"}),jsx("feDisplacementMap",{ref:h,in:"SourceGraphic",in2:"turbulence1",scale:"0",xChannelSelector:"R",yChannelSelector:"B",x:"0%",y:"0%",width:"100%",height:"100%",result:"displacementMap3"})]})}),jsx("g",{children:jsx("image",{href:D,x:"0",y:"0",width:"600",height:"750",filter:`url(#${b})`,preserveAspectRatio:"xMidYMid slice"})})]}),y&&jsx("div",{className:"absolute inset-0 flex items-end p-6",children:jsx("div",{className:"text-white",children:y})})]})}var B=T;
|
|
2
|
+
export{T as DecayCard,B as default};//# sourceMappingURL=index.mjs.map
|
|
3
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/decay-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","DecayCard","width","height","image","children","className","containerRef","useRef","displacementMapRef","cursor","cachedCursor","imgTransforms","displacementScale","animationRef","useEffect","lerp","a","b","n","map","x","c","distance","x1","x2","y1","y2","handleMouseMove","ev","render","winWidth","winHeight","targetX","targetY","targetRz","bound","cursorTravelledDistance","filterId","jsxs","jsx","decay_card_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, { useEffect, useRef, ReactNode } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface DecayCardProps {\r\n width?: number;\r\n height?: number;\r\n image?: string;\r\n children?: ReactNode;\r\n className?: string;\r\n}\r\n\r\nexport function DecayCard({\r\n width = 300,\r\n height = 400,\r\n image = \"https://picsum.photos/300/400?grayscale\",\r\n children,\r\n className,\r\n}: DecayCardProps) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const displacementMapRef = useRef<SVGFEDisplacementMapElement>(null);\r\n const cursor = useRef({ x: 0, y: 0 });\r\n const cachedCursor = useRef({ x: 0, y: 0 });\r\n const imgTransforms = useRef({ x: 0, y: 0, rz: 0 });\r\n const displacementScale = useRef(0);\r\n const animationRef = useRef<number>();\r\n\r\n useEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n\r\n cursor.current = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\r\n cachedCursor.current = { ...cursor.current };\r\n\r\n const lerp = (a: number, b: number, n: number) => (1 - n) * a + n * b;\r\n const map = (x: number, a: number, b: number, c: number, d: number) =>\r\n ((x - a) * (d - c)) / (b - a) + c;\r\n const distance = (x1: number, x2: number, y1: number, y2: number) =>\r\n Math.hypot(x1 - x2, y1 - y2);\r\n\r\n const handleMouseMove = (ev: MouseEvent) => {\r\n cursor.current = { x: ev.clientX, y: ev.clientY };\r\n };\r\n\r\n window.addEventListener(\"mousemove\", handleMouseMove);\r\n\r\n const render = () => {\r\n const winWidth = window.innerWidth;\r\n const winHeight = window.innerHeight;\r\n\r\n let targetX = lerp(\r\n imgTransforms.current.x,\r\n map(cursor.current.x, 0, winWidth, -120, 120),\r\n 0.1\r\n );\r\n let targetY = lerp(\r\n imgTransforms.current.y,\r\n map(cursor.current.y, 0, winHeight, -120, 120),\r\n 0.1\r\n );\r\n let targetRz = lerp(\r\n imgTransforms.current.rz,\r\n map(cursor.current.x, 0, winWidth, -10, 10),\r\n 0.1\r\n );\r\n\r\n const bound = 50;\r\n if (targetX > bound) targetX = bound + (targetX - bound) * 0.2;\r\n if (targetX < -bound) targetX = -bound + (targetX + bound) * 0.2;\r\n if (targetY > bound) targetY = bound + (targetY - bound) * 0.2;\r\n if (targetY < -bound) targetY = -bound + (targetY + bound) * 0.2;\r\n\r\n imgTransforms.current = { x: targetX, y: targetY, rz: targetRz };\r\n\r\n if (containerRef.current) {\r\n containerRef.current.style.transform = `translate(${targetX}px, ${targetY}px) rotateZ(${targetRz}deg)`;\r\n }\r\n\r\n const cursorTravelledDistance = distance(\r\n cachedCursor.current.x,\r\n cursor.current.x,\r\n cachedCursor.current.y,\r\n cursor.current.y\r\n );\r\n\r\n displacementScale.current = lerp(\r\n displacementScale.current,\r\n map(cursorTravelledDistance, 0, 200, 0, 400),\r\n 0.06\r\n );\r\n\r\n if (displacementMapRef.current) {\r\n displacementMapRef.current.setAttribute(\r\n \"scale\",\r\n String(displacementScale.current)\r\n );\r\n }\r\n\r\n cachedCursor.current = { ...cursor.current };\r\n animationRef.current = requestAnimationFrame(render);\r\n };\r\n\r\n render();\r\n\r\n return () => {\r\n window.removeEventListener(\"mousemove\", handleMouseMove);\r\n if (animationRef.current) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n }, []);\r\n\r\n const filterId = `imgFilter-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n return (\r\n <div\r\n className={cn(\"relative\", className)}\r\n style={{ width: `${width}px`, height: `${height}px` }}\r\n ref={containerRef}\r\n >\r\n <svg\r\n viewBox=\"-60 -75 720 900\"\r\n preserveAspectRatio=\"xMidYMid slice\"\r\n className=\"w-full h-full\"\r\n >\r\n <defs>\r\n <filter id={filterId}>\r\n <feTurbulence\r\n type=\"turbulence\"\r\n baseFrequency=\"0.015\"\r\n numOctaves=\"5\"\r\n seed=\"4\"\r\n stitchTiles=\"stitch\"\r\n x=\"0%\"\r\n y=\"0%\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n result=\"turbulence1\"\r\n />\r\n <feDisplacementMap\r\n ref={displacementMapRef}\r\n in=\"SourceGraphic\"\r\n in2=\"turbulence1\"\r\n scale=\"0\"\r\n xChannelSelector=\"R\"\r\n yChannelSelector=\"B\"\r\n x=\"0%\"\r\n y=\"0%\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n result=\"displacementMap3\"\r\n />\r\n </filter>\r\n </defs>\r\n <g>\r\n <image\r\n href={image}\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"600\"\r\n height=\"750\"\r\n filter={`url(#${filterId})`}\r\n preserveAspectRatio=\"xMidYMid slice\"\r\n />\r\n </g>\r\n </svg>\r\n {children && (\r\n <div className=\"absolute inset-0 flex items-end p-6\">\r\n <div className=\"text-white\">{children}</div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nexport default DecayCard;\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 n(...a){return tailwindMerge.twMerge(clsx.clsx(a))}var x=[{link:"#",text:"About",image:"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80"},{link:"#",text:"Services",image:"https://images.unsplash.com/photo-1618556450994-a6a128ef0d9d?w=800&q=80"},{link:"#",text:"Work",image:"https://images.unsplash.com/photo-1618556450991-2f1af64e8191?w=800&q=80"},{link:"#",text:"Contact",image:"https://images.unsplash.com/photo-1618556450783-953e03f0bb7a?w=800&q=80"}];function g({items:a=x,className:c=""}){let[f,m]=react.useState(-1),[e,l]=react.useState(-1);return jsxRuntime.jsxs("div",{className:n("flex gap-8",c),children:[jsxRuntime.jsxs("div",{className:"flex-1",children:[jsxRuntime.jsxs("div",{className:"mb-6",children:[jsxRuntime.jsx("h2",{className:"text-2xl font-bold text-white",children:"Menu"}),jsxRuntime.jsx("p",{className:"text-sm text-zinc-400",children:"Explore our pages"})]}),jsxRuntime.jsx("nav",{className:"flex flex-col gap-2",children:a.map((i,s)=>jsxRuntime.jsxs("a",{href:i.link,className:n("group flex items-center gap-4 py-4 px-4 rounded-lg transition-all duration-300",e===s?"bg-zinc-800 translate-x-4":"bg-transparent"),onMouseEnter:()=>l(s),onMouseLeave:()=>l(-1),onClick:()=>m(s),children:[jsxRuntime.jsx("span",{className:"text-sm text-zinc-500 font-mono",children:String(s+1).padStart(2,"0")}),jsxRuntime.jsx("span",{className:n("text-xl font-medium transition-colors",e===s?"text-white":"text-zinc-400"),children:i.text}),jsxRuntime.jsx("span",{className:n("ml-auto text-xl transition-all duration-300",e===s?"opacity-100 translate-x-0":"opacity-0 -translate-x-2"),children:"\u2192"})]},s))})]}),jsxRuntime.jsx("div",{className:n("w-80 h-80 rounded-2xl overflow-hidden transition-all duration-500",e>=0?"opacity-100 scale-100":"opacity-0 scale-95"),children:e>=0&&a[e]?.image&&jsxRuntime.jsxs("div",{className:"relative w-full h-full",children:[jsxRuntime.jsx("img",{src:a[e].image,alt:a[e].text,className:"w-full h-full object-cover"}),jsxRuntime.jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"}),jsxRuntime.jsx("h3",{className:"absolute bottom-4 left-4 text-2xl font-bold text-white",children:a[e].text})]})})]})}var M=g;
|
|
2
|
+
exports.FlowingMenu=g;exports.default=M;//# sourceMappingURL=index.js.map
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/flowing-menu/index.tsx"],"names":["cn","inputs","twMerge","clsx","DEFAULT_ITEMS","FlowingMenu","items","className","activeIndex","setActiveIndex","useState","hoveredIndex","setHoveredIndex","jsxs","jsx","item","index","flowing_menu_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 FlowingMenuItem {\r\n link: string;\r\n text: string;\r\n image?: string;\r\n}\r\n\r\ninterface FlowingMenuProps {\r\n items?: FlowingMenuItem[];\r\n className?: string;\r\n}\r\n\r\nconst DEFAULT_ITEMS: FlowingMenuItem[] = [\r\n { link: \"#\", text: \"About\", image: \"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80\" },\r\n { link: \"#\", text: \"Services\", image: \"https://images.unsplash.com/photo-1618556450994-a6a128ef0d9d?w=800&q=80\" },\r\n { link: \"#\", text: \"Work\", image: \"https://images.unsplash.com/photo-1618556450991-2f1af64e8191?w=800&q=80\" },\r\n { link: \"#\", text: \"Contact\", image: \"https://images.unsplash.com/photo-1618556450783-953e03f0bb7a?w=800&q=80\" },\r\n];\r\n\r\nexport function FlowingMenu({ items = DEFAULT_ITEMS, className = \"\" }: FlowingMenuProps) {\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const [hoveredIndex, setHoveredIndex] = useState<number>(-1);\r\n\r\n return (\r\n <div className={cn(\"flex gap-8\", className)}>\r\n {/* Menu */}\r\n <div className=\"flex-1\">\r\n <div className=\"mb-6\">\r\n <h2 className=\"text-2xl font-bold text-white\">Menu</h2>\r\n <p className=\"text-sm text-zinc-400\">Explore our pages</p>\r\n </div>\r\n\r\n <nav className=\"flex flex-col gap-2\">\r\n {items.map((item, index) => (\r\n <a\r\n key={index}\r\n href={item.link}\r\n className={cn(\r\n \"group flex items-center gap-4 py-4 px-4 rounded-lg transition-all duration-300\",\r\n hoveredIndex === index\r\n ? \"bg-zinc-800 translate-x-4\"\r\n : \"bg-transparent\"\r\n )}\r\n onMouseEnter={() => setHoveredIndex(index)}\r\n onMouseLeave={() => setHoveredIndex(-1)}\r\n onClick={() => setActiveIndex(index)}\r\n >\r\n <span className=\"text-sm text-zinc-500 font-mono\">\r\n {String(index + 1).padStart(2, \"0\")}\r\n </span>\r\n <span\r\n className={cn(\r\n \"text-xl font-medium transition-colors\",\r\n hoveredIndex === index ? \"text-white\" : \"text-zinc-400\"\r\n )}\r\n >\r\n {item.text}\r\n </span>\r\n <span\r\n className={cn(\r\n \"ml-auto text-xl transition-all duration-300\",\r\n hoveredIndex === index\r\n ? \"opacity-100 translate-x-0\"\r\n : \"opacity-0 -translate-x-2\"\r\n )}\r\n >\r\n →\r\n </span>\r\n </a>\r\n ))}\r\n </nav>\r\n </div>\r\n\r\n {/* Preview */}\r\n <div\r\n className={cn(\r\n \"w-80 h-80 rounded-2xl overflow-hidden transition-all duration-500\",\r\n hoveredIndex >= 0 ? \"opacity-100 scale-100\" : \"opacity-0 scale-95\"\r\n )}\r\n >\r\n {hoveredIndex >= 0 && items[hoveredIndex]?.image && (\r\n <div className=\"relative w-full h-full\">\r\n <img\r\n src={items[hoveredIndex].image}\r\n alt={items[hoveredIndex].text}\r\n className=\"w-full h-full object-cover\"\r\n />\r\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 to-transparent\" />\r\n <h3 className=\"absolute bottom-4 left-4 text-2xl font-bold text-white\">\r\n {items[hoveredIndex].text}\r\n </h3>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default FlowingMenu;\r\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import {useState}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function n(...a){return twMerge(clsx(a))}var x=[{link:"#",text:"About",image:"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80"},{link:"#",text:"Services",image:"https://images.unsplash.com/photo-1618556450994-a6a128ef0d9d?w=800&q=80"},{link:"#",text:"Work",image:"https://images.unsplash.com/photo-1618556450991-2f1af64e8191?w=800&q=80"},{link:"#",text:"Contact",image:"https://images.unsplash.com/photo-1618556450783-953e03f0bb7a?w=800&q=80"}];function g({items:a=x,className:c=""}){let[f,m]=useState(-1),[e,l]=useState(-1);return jsxs("div",{className:n("flex gap-8",c),children:[jsxs("div",{className:"flex-1",children:[jsxs("div",{className:"mb-6",children:[jsx("h2",{className:"text-2xl font-bold text-white",children:"Menu"}),jsx("p",{className:"text-sm text-zinc-400",children:"Explore our pages"})]}),jsx("nav",{className:"flex flex-col gap-2",children:a.map((i,s)=>jsxs("a",{href:i.link,className:n("group flex items-center gap-4 py-4 px-4 rounded-lg transition-all duration-300",e===s?"bg-zinc-800 translate-x-4":"bg-transparent"),onMouseEnter:()=>l(s),onMouseLeave:()=>l(-1),onClick:()=>m(s),children:[jsx("span",{className:"text-sm text-zinc-500 font-mono",children:String(s+1).padStart(2,"0")}),jsx("span",{className:n("text-xl font-medium transition-colors",e===s?"text-white":"text-zinc-400"),children:i.text}),jsx("span",{className:n("ml-auto text-xl transition-all duration-300",e===s?"opacity-100 translate-x-0":"opacity-0 -translate-x-2"),children:"\u2192"})]},s))})]}),jsx("div",{className:n("w-80 h-80 rounded-2xl overflow-hidden transition-all duration-500",e>=0?"opacity-100 scale-100":"opacity-0 scale-95"),children:e>=0&&a[e]?.image&&jsxs("div",{className:"relative w-full h-full",children:[jsx("img",{src:a[e].image,alt:a[e].text,className:"w-full h-full object-cover"}),jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"}),jsx("h3",{className:"absolute bottom-4 left-4 text-2xl font-bold text-white",children:a[e].text})]})})]})}var M=g;
|
|
2
|
+
export{g as FlowingMenu,M as default};//# sourceMappingURL=index.mjs.map
|
|
3
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/flowing-menu/index.tsx"],"names":["cn","inputs","twMerge","clsx","DEFAULT_ITEMS","FlowingMenu","items","className","activeIndex","setActiveIndex","useState","hoveredIndex","setHoveredIndex","jsxs","jsx","item","index","flowing_menu_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 FlowingMenuItem {\r\n link: string;\r\n text: string;\r\n image?: string;\r\n}\r\n\r\ninterface FlowingMenuProps {\r\n items?: FlowingMenuItem[];\r\n className?: string;\r\n}\r\n\r\nconst DEFAULT_ITEMS: FlowingMenuItem[] = [\r\n { link: \"#\", text: \"About\", image: \"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80\" },\r\n { link: \"#\", text: \"Services\", image: \"https://images.unsplash.com/photo-1618556450994-a6a128ef0d9d?w=800&q=80\" },\r\n { link: \"#\", text: \"Work\", image: \"https://images.unsplash.com/photo-1618556450991-2f1af64e8191?w=800&q=80\" },\r\n { link: \"#\", text: \"Contact\", image: \"https://images.unsplash.com/photo-1618556450783-953e03f0bb7a?w=800&q=80\" },\r\n];\r\n\r\nexport function FlowingMenu({ items = DEFAULT_ITEMS, className = \"\" }: FlowingMenuProps) {\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const [hoveredIndex, setHoveredIndex] = useState<number>(-1);\r\n\r\n return (\r\n <div className={cn(\"flex gap-8\", className)}>\r\n {/* Menu */}\r\n <div className=\"flex-1\">\r\n <div className=\"mb-6\">\r\n <h2 className=\"text-2xl font-bold text-white\">Menu</h2>\r\n <p className=\"text-sm text-zinc-400\">Explore our pages</p>\r\n </div>\r\n\r\n <nav className=\"flex flex-col gap-2\">\r\n {items.map((item, index) => (\r\n <a\r\n key={index}\r\n href={item.link}\r\n className={cn(\r\n \"group flex items-center gap-4 py-4 px-4 rounded-lg transition-all duration-300\",\r\n hoveredIndex === index\r\n ? \"bg-zinc-800 translate-x-4\"\r\n : \"bg-transparent\"\r\n )}\r\n onMouseEnter={() => setHoveredIndex(index)}\r\n onMouseLeave={() => setHoveredIndex(-1)}\r\n onClick={() => setActiveIndex(index)}\r\n >\r\n <span className=\"text-sm text-zinc-500 font-mono\">\r\n {String(index + 1).padStart(2, \"0\")}\r\n </span>\r\n <span\r\n className={cn(\r\n \"text-xl font-medium transition-colors\",\r\n hoveredIndex === index ? \"text-white\" : \"text-zinc-400\"\r\n )}\r\n >\r\n {item.text}\r\n </span>\r\n <span\r\n className={cn(\r\n \"ml-auto text-xl transition-all duration-300\",\r\n hoveredIndex === index\r\n ? \"opacity-100 translate-x-0\"\r\n : \"opacity-0 -translate-x-2\"\r\n )}\r\n >\r\n →\r\n </span>\r\n </a>\r\n ))}\r\n </nav>\r\n </div>\r\n\r\n {/* Preview */}\r\n <div\r\n className={cn(\r\n \"w-80 h-80 rounded-2xl overflow-hidden transition-all duration-500\",\r\n hoveredIndex >= 0 ? \"opacity-100 scale-100\" : \"opacity-0 scale-95\"\r\n )}\r\n >\r\n {hoveredIndex >= 0 && items[hoveredIndex]?.image && (\r\n <div className=\"relative w-full h-full\">\r\n <img\r\n src={items[hoveredIndex].image}\r\n alt={items[hoveredIndex].text}\r\n className=\"w-full h-full object-cover\"\r\n />\r\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 to-transparent\" />\r\n <h3 className=\"absolute bottom-4 left-4 text-2xl font-bold text-white\">\r\n {items[hoveredIndex].text}\r\n </h3>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default FlowingMenu;\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 r(...l){return tailwindMerge.twMerge(clsx.clsx(l))}var d=[{label:"Home",href:"#"},{label:"About",href:"#"},{label:"Services",href:"#"},{label:"Contact",href:"#"}];function y({items:l=d,className:n="",activeColor:s="#8b5cf6",inactiveColor:c="#a1a1aa",backgroundColor:i="#18181b"}){let[o,m]=react.useState(0),u=(t,e)=>{e.preventDefault(),m(t);};return jsxRuntime.jsx("div",{className:r("relative",n),children:jsxRuntime.jsx("nav",{className:"relative rounded-full px-2 py-2",style:{backgroundColor:i},children:jsxRuntime.jsx("ul",{className:"flex items-center gap-1",children:l.map((t,e)=>jsxRuntime.jsx("li",{className:"relative",children:jsxRuntime.jsxs("a",{href:t.href,className:r("relative z-10 block px-4 py-2 text-sm font-medium rounded-full transition-all duration-300",o===e&&"text-white"),style:{color:o===e?"#fff":c},onClick:f=>u(e,f),children:[t.label,o===e&&jsxRuntime.jsx("span",{className:"absolute inset-0 rounded-full -z-10 animate-pulse",style:{backgroundColor:s,boxShadow:`0 0 20px ${s}`}})]})},e))})})})}var I=y;exports.GooeyNav=y;exports.default=I;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/gooey-nav/index.tsx"],"names":["cn","inputs","twMerge","clsx","DEFAULT_ITEMS","GooeyNav","items","className","activeColor","inactiveColor","backgroundColor","activeIndex","setActiveIndex","useState","handleClick","index","event","jsx","item","jsxs","e","gooey_nav_default"],"mappings":"sMAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCaA,IAAMG,CAAAA,CAAgC,CACpC,CAAE,KAAA,CAAO,OAAQ,IAAA,CAAM,GAAI,EAC3B,CAAE,KAAA,CAAO,QAAS,IAAA,CAAM,GAAI,EAC5B,CAAE,KAAA,CAAO,UAAA,CAAY,IAAA,CAAM,GAAI,CAAA,CAC/B,CAAE,MAAO,SAAA,CAAW,IAAA,CAAM,GAAI,CAChC,CAAA,CAEO,SAASC,CAAAA,CAAS,CACvB,MAAAC,CAAAA,CAAQF,CAAAA,CACR,UAAAG,CAAAA,CAAY,EAAA,CACZ,YAAAC,CAAAA,CAAc,SAAA,CACd,cAAAC,CAAAA,CAAgB,SAAA,CAChB,gBAAAC,CAAAA,CAAkB,SACpB,EAAkB,CAChB,GAAM,CAACC,CAAAA,CAAaC,CAAc,EAAIC,cAAAA,CAAiB,CAAC,EAElDC,CAAAA,CAAc,CAACC,EAAeC,CAAAA,GAA+C,CACjFA,EAAM,cAAA,EAAe,CACrBJ,CAAAA,CAAeG,CAAK,EACtB,CAAA,CAEA,OACEE,eAAC,KAAA,CAAA,CAAI,SAAA,CAAWjB,EAAG,UAAA,CAAYO,CAAS,EACtC,QAAA,CAAAU,cAAAA,CAAC,OACC,SAAA,CAAU,iCAAA,CACV,MAAO,CAAE,eAAA,CAAAP,CAAgB,CAAA,CAEzB,QAAA,CAAAO,eAAC,IAAA,CAAA,CAAG,SAAA,CAAU,0BACX,QAAA,CAAAX,CAAAA,CAAM,IAAI,CAACY,CAAAA,CAAMH,IAChBE,cAAAA,CAAC,IAAA,CAAA,CAAe,UAAU,UAAA,CACxB,QAAA,CAAAE,gBAAC,GAAA,CAAA,CACC,IAAA,CAAMD,EAAK,IAAA,CACX,SAAA,CAAWlB,EACT,4FAAA,CACAW,CAAAA,GAAgBI,CAAAA,EAAS,YAC3B,EACA,KAAA,CAAO,CACL,MAAOJ,CAAAA,GAAgBI,CAAAA,CAAQ,OAASN,CAC1C,CAAA,CACA,QAAUW,CAAAA,EAAMN,CAAAA,CAAYC,EAAOK,CAAC,CAAA,CAEnC,UAAAF,CAAAA,CAAK,KAAA,CACLP,IAAgBI,CAAAA,EACfE,cAAAA,CAAC,QACC,SAAA,CAAU,mDAAA,CACV,MAAO,CACL,eAAA,CAAiBT,EACjB,SAAA,CAAW,CAAA,SAAA,EAAYA,CAAW,CAAA,CACpC,CAAA,CACF,GAEJ,CAAA,CAAA,CAtBOO,CAuBT,CACD,CAAA,CACH,CAAA,CACF,EACF,CAEJ,KAEOM,CAAAA,CAAQhB","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 GooeyNavItem {\r\n label: string;\r\n href: string;\r\n}\r\n\r\nexport interface GooeyNavProps {\r\n items?: GooeyNavItem[];\r\n className?: string;\r\n activeColor?: string;\r\n inactiveColor?: string;\r\n backgroundColor?: string;\r\n}\r\n\r\nconst DEFAULT_ITEMS: GooeyNavItem[] = [\r\n { label: \"Home\", href: \"#\" },\r\n { label: \"About\", href: \"#\" },\r\n { label: \"Services\", href: \"#\" },\r\n { label: \"Contact\", href: \"#\" },\r\n];\r\n\r\nexport function GooeyNav({\r\n items = DEFAULT_ITEMS,\r\n className = \"\",\r\n activeColor = \"#8b5cf6\",\r\n inactiveColor = \"#a1a1aa\",\r\n backgroundColor = \"#18181b\",\r\n}: GooeyNavProps) {\r\n const [activeIndex, setActiveIndex] = useState<number>(0);\r\n\r\n const handleClick = (index: number, event: React.MouseEvent<HTMLAnchorElement>) => {\r\n event.preventDefault();\r\n setActiveIndex(index);\r\n };\r\n\r\n return (\r\n <div className={cn(\"relative\", className)}>\r\n <nav\r\n className=\"relative rounded-full px-2 py-2\"\r\n style={{ backgroundColor }}\r\n >\r\n <ul className=\"flex items-center gap-1\">\r\n {items.map((item, index) => (\r\n <li key={index} className=\"relative\">\r\n <a\r\n href={item.href}\r\n className={cn(\r\n \"relative z-10 block px-4 py-2 text-sm font-medium rounded-full transition-all duration-300\",\r\n activeIndex === index && \"text-white\"\r\n )}\r\n style={{\r\n color: activeIndex === index ? \"#fff\" : inactiveColor,\r\n }}\r\n onClick={(e) => handleClick(index, e)}\r\n >\r\n {item.label}\r\n {activeIndex === index && (\r\n <span\r\n className=\"absolute inset-0 rounded-full -z-10 animate-pulse\"\r\n style={{\r\n backgroundColor: activeColor,\r\n boxShadow: `0 0 20px ${activeColor}`,\r\n }}\r\n />\r\n )}\r\n </a>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n </div>\r\n );\r\n}\r\n\r\nexport default GooeyNav;\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 r(...l){return twMerge(clsx(l))}var d=[{label:"Home",href:"#"},{label:"About",href:"#"},{label:"Services",href:"#"},{label:"Contact",href:"#"}];function y({items:l=d,className:n="",activeColor:s="#8b5cf6",inactiveColor:c="#a1a1aa",backgroundColor:i="#18181b"}){let[o,m]=useState(0),u=(t,e)=>{e.preventDefault(),m(t);};return jsx("div",{className:r("relative",n),children:jsx("nav",{className:"relative rounded-full px-2 py-2",style:{backgroundColor:i},children:jsx("ul",{className:"flex items-center gap-1",children:l.map((t,e)=>jsx("li",{className:"relative",children:jsxs("a",{href:t.href,className:r("relative z-10 block px-4 py-2 text-sm font-medium rounded-full transition-all duration-300",o===e&&"text-white"),style:{color:o===e?"#fff":c},onClick:f=>u(e,f),children:[t.label,o===e&&jsx("span",{className:"absolute inset-0 rounded-full -z-10 animate-pulse",style:{backgroundColor:s,boxShadow:`0 0 20px ${s}`}})]})},e))})})})}var I=y;export{y as GooeyNav,I as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/gooey-nav/index.tsx"],"names":["cn","inputs","twMerge","clsx","DEFAULT_ITEMS","GooeyNav","items","className","activeColor","inactiveColor","backgroundColor","activeIndex","setActiveIndex","useState","handleClick","index","event","jsx","item","jsxs","e","gooey_nav_default"],"mappings":"mIAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCaA,IAAMG,CAAAA,CAAgC,CACpC,CAAE,KAAA,CAAO,OAAQ,IAAA,CAAM,GAAI,EAC3B,CAAE,KAAA,CAAO,QAAS,IAAA,CAAM,GAAI,EAC5B,CAAE,KAAA,CAAO,UAAA,CAAY,IAAA,CAAM,GAAI,CAAA,CAC/B,CAAE,MAAO,SAAA,CAAW,IAAA,CAAM,GAAI,CAChC,CAAA,CAEO,SAASC,CAAAA,CAAS,CACvB,MAAAC,CAAAA,CAAQF,CAAAA,CACR,UAAAG,CAAAA,CAAY,EAAA,CACZ,YAAAC,CAAAA,CAAc,SAAA,CACd,cAAAC,CAAAA,CAAgB,SAAA,CAChB,gBAAAC,CAAAA,CAAkB,SACpB,EAAkB,CAChB,GAAM,CAACC,CAAAA,CAAaC,CAAc,EAAIC,QAAAA,CAAiB,CAAC,EAElDC,CAAAA,CAAc,CAACC,EAAeC,CAAAA,GAA+C,CACjFA,EAAM,cAAA,EAAe,CACrBJ,CAAAA,CAAeG,CAAK,EACtB,CAAA,CAEA,OACEE,IAAC,KAAA,CAAA,CAAI,SAAA,CAAWjB,EAAG,UAAA,CAAYO,CAAS,EACtC,QAAA,CAAAU,GAAAA,CAAC,OACC,SAAA,CAAU,iCAAA,CACV,MAAO,CAAE,eAAA,CAAAP,CAAgB,CAAA,CAEzB,QAAA,CAAAO,IAAC,IAAA,CAAA,CAAG,SAAA,CAAU,0BACX,QAAA,CAAAX,CAAAA,CAAM,IAAI,CAACY,CAAAA,CAAMH,IAChBE,GAAAA,CAAC,IAAA,CAAA,CAAe,UAAU,UAAA,CACxB,QAAA,CAAAE,KAAC,GAAA,CAAA,CACC,IAAA,CAAMD,EAAK,IAAA,CACX,SAAA,CAAWlB,EACT,4FAAA,CACAW,CAAAA,GAAgBI,CAAAA,EAAS,YAC3B,EACA,KAAA,CAAO,CACL,MAAOJ,CAAAA,GAAgBI,CAAAA,CAAQ,OAASN,CAC1C,CAAA,CACA,QAAUW,CAAAA,EAAMN,CAAAA,CAAYC,EAAOK,CAAC,CAAA,CAEnC,UAAAF,CAAAA,CAAK,KAAA,CACLP,IAAgBI,CAAAA,EACfE,GAAAA,CAAC,QACC,SAAA,CAAU,mDAAA,CACV,MAAO,CACL,eAAA,CAAiBT,EACjB,SAAA,CAAW,CAAA,SAAA,EAAYA,CAAW,CAAA,CACpC,CAAA,CACF,GAEJ,CAAA,CAAA,CAtBOO,CAuBT,CACD,CAAA,CACH,CAAA,CACF,EACF,CAEJ,KAEOM,CAAAA,CAAQhB","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 GooeyNavItem {\r\n label: string;\r\n href: string;\r\n}\r\n\r\nexport interface GooeyNavProps {\r\n items?: GooeyNavItem[];\r\n className?: string;\r\n activeColor?: string;\r\n inactiveColor?: string;\r\n backgroundColor?: string;\r\n}\r\n\r\nconst DEFAULT_ITEMS: GooeyNavItem[] = [\r\n { label: \"Home\", href: \"#\" },\r\n { label: \"About\", href: \"#\" },\r\n { label: \"Services\", href: \"#\" },\r\n { label: \"Contact\", href: \"#\" },\r\n];\r\n\r\nexport function GooeyNav({\r\n items = DEFAULT_ITEMS,\r\n className = \"\",\r\n activeColor = \"#8b5cf6\",\r\n inactiveColor = \"#a1a1aa\",\r\n backgroundColor = \"#18181b\",\r\n}: GooeyNavProps) {\r\n const [activeIndex, setActiveIndex] = useState<number>(0);\r\n\r\n const handleClick = (index: number, event: React.MouseEvent<HTMLAnchorElement>) => {\r\n event.preventDefault();\r\n setActiveIndex(index);\r\n };\r\n\r\n return (\r\n <div className={cn(\"relative\", className)}>\r\n <nav\r\n className=\"relative rounded-full px-2 py-2\"\r\n style={{ backgroundColor }}\r\n >\r\n <ul className=\"flex items-center gap-1\">\r\n {items.map((item, index) => (\r\n <li key={index} className=\"relative\">\r\n <a\r\n href={item.href}\r\n className={cn(\r\n \"relative z-10 block px-4 py-2 text-sm font-medium rounded-full transition-all duration-300\",\r\n activeIndex === index && \"text-white\"\r\n )}\r\n style={{\r\n color: activeIndex === index ? \"#fff\" : inactiveColor,\r\n }}\r\n onClick={(e) => handleClick(index, e)}\r\n >\r\n {item.label}\r\n {activeIndex === index && (\r\n <span\r\n className=\"absolute inset-0 rounded-full -z-10 animate-pulse\"\r\n style={{\r\n backgroundColor: activeColor,\r\n boxShadow: `0 0 20px ${activeColor}`,\r\n }}\r\n />\r\n )}\r\n </a>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n </div>\r\n );\r\n}\r\n\r\nexport default GooeyNav;\r\n"]}
|