3d-marquee 0.1.12 → 0.2.1

package/README.md

@@ -6,16 +6,24 @@ A React library featuring a 3D rotating orb with a scrolling LED marquee effect.
 
 ## Installation
 
-Install the package and its peer dependencies:
+Install the package:
 
 ```bash
-npm install 3d-marquee @react-three/fiber @react-three/drei @react-three/postprocessing react react-dom three
+npm install 3d-marquee
+```
+
+**Note:** With npm 7+ and yarn, peer dependencies are automatically installed. If you're using npm 6 or earlier, you'll need to install the peer dependencies manually:
+
+```bash
+npm install 3d-marquee react react-dom three @react-three/fiber @react-three/drei @react-three/postprocessing
 ```
 
 ### Peer Dependencies
 
-- `react`: `^18.2.0 || ^19.0.0`
-- `react-dom`: `^18.2.0 || ^19.0.0`
+The following peer dependencies are required and will be automatically installed with npm 7+:
+
+- `react`: `^18.0.0 || ^19.0.0`
+- `react-dom`: `^18.0.0 || ^19.0.0`
 - `three`: `>=0.158.0`
 - `@react-three/fiber`: `^8.15.11 || ^9.0.0`
 - `@react-three/drei`: `^9.92.7 || ^10.0.0`

package/dist/3d-marquee.es.js

@@ -0,0 +1,217 @@
+import { jsx as a, jsxs as J } from "react/jsx-runtime";
+import { useFrame as K, Canvas as N } from "@react-three/fiber";
+import { Environment as Z, OrbitControls as $ } from "@react-three/drei";
+import { EffectComposer as ee, Bloom as te } from "@react-three/postprocessing";
+import { useRef as C, useMemo as h, useEffect as oe } from "react";
+import * as c from "three";
+function re({
+  word: u = "ROADHERO",
+  speed: S = 0.05,
+  radius: g = 1,
+  ledSpacing: m = 75e-4,
+  columnSpacing: M = 5e-3,
+  dimColor: E = "#1a261a",
+  brightColor: T = "#00ff4d"
+}) {
+  const z = C(null), L = C(0), w = C(null), b = C(0), R = C(0), F = h(() => {
+    const e = Math.ceil(Math.PI / m), r = Math.ceil(2 * Math.PI / M);
+    return { rows: e, cols: r };
+  }, [m, M]), q = (e, r) => new Uint8Array(e * r).fill(0), I = (e, r, f, d) => {
+    r.fill(0);
+    const v = document.createElement("canvas"), t = v.getContext("2d");
+    if (!t) return;
+    const s = 2048, x = 256;
+    v.width = s, v.height = x, t.fillStyle = "#000000", t.fillRect(0, 0, s, x), t.fillStyle = "#ffffff", t.font = "bold 80px monospace", t.textAlign = "center", t.textBaseline = "middle";
+    const P = t.measureText(e).width + 200, X = Math.ceil(s / P) + 2;
+    for (let l = -1; l < X; l++) {
+      const p = s / 2 + l * P;
+      t.fillText(e, p, x / 2);
+    }
+    const j = t.getImageData(0, 0, s, x).data, G = Math.floor(f * 0.4), k = Math.floor(f * 0.6) - G, B = P;
+    for (let l = 0; l < x; l++)
+      for (let p = 0; p < s; p++) {
+        const H = (l * s + p) * 4;
+        if (j[H] > 128) {
+          const Y = p % B / B, y = Math.floor(Y * d), _ = 1 - l / x, Q = Math.floor(_ * k), U = G + Q;
+          U >= 0 && U < f && y >= 0 && y < d && (r[U * d + y] = 1);
+        }
+      }
+  }, O = (e, r, f) => {
+    const d = new Uint8Array(r * f);
+    for (let t = 0; t < e.length; t++)
+      d[t] = e[t] * 255;
+    const v = new c.DataTexture(d, f, r, c.RedFormat);
+    return v.needsUpdate = !0, v;
+  }, { rows: i, cols: n } = F;
+  b.current = i, R.current = n;
+  const A = h(() => {
+    const e = q(i, n);
+    return I(u, e, i, n), w.current = e, e;
+  }, [u, i, n]), D = h(() => O(A, i, n), [A, i, n]), V = h(() => {
+    const e = new c.Color(E);
+    return new c.Vector3(e.r, e.g, e.b);
+  }, [E]), W = h(() => {
+    const e = new c.Color(T);
+    return new c.Vector3(e.r, e.g, e.b);
+  }, [T]), o = h(() => D ? new c.ShaderMaterial({
+    transparent: !0,
+    uniforms: {
+      uLedMatrix: { value: D },
+      uScrollOffset: { value: 0 },
+      uLedSpacing: { value: m },
+      uColumnSpacing: { value: M },
+      uRadius: { value: g },
+      uTime: { value: 0 },
+      uMatrixRows: { value: i },
+      uMatrixCols: { value: n },
+      uDimColor: { value: V },
+      uBrightColor: { value: W }
+    },
+    vertexShader: `
+        varying vec3 vWorldPosition;
+        varying vec2 vUv;
+        
+        void main() {
+          vUv = uv;
+          vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+          vWorldPosition = worldPosition.xyz;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+    fragmentShader: `
+        uniform sampler2D uLedMatrix;
+        uniform float uScrollOffset;
+        uniform float uLedSpacing;
+        uniform float uColumnSpacing;
+        uniform float uRadius;
+        uniform float uTime;
+        uniform float uMatrixRows;
+        uniform float uMatrixCols;
+        uniform vec3 uDimColor;
+        uniform vec3 uBrightColor;
+        
+        varying vec3 vWorldPosition;
+        varying vec2 vUv;
+        
+        void main() {
+          // Convert world position to spherical coordinates
+          vec3 pos = normalize(vWorldPosition);
+          float latitude = asin(pos.y); // -PI/2 to PI/2 (south pole to north pole)
+          float longitude = atan(pos.z, pos.x); // -PI to PI
+          
+          // Calculate matrix coordinates from latitude/longitude
+          // Latitude: -PI/2 to PI/2 -> row 0 to uMatrixRows-1
+          float normalizedLat = (latitude + 1.5708) / 3.14159; // 0 to 1
+          float row = floor(normalizedLat * uMatrixRows);
+          row = clamp(row, 0.0, uMatrixRows - 1.0);
+          
+          // Longitude: -PI to PI -> col 0 to uMatrixCols-1
+          // Apply scroll offset for marquee effect
+          // Flip longitude direction to fix backwards text
+          float normalizedLon = 1.0 - ((longitude + 3.14159) / (2.0 * 3.14159)); // 1 to 0 (flipped)
+          float scrolledLon = mod(normalizedLon + uScrollOffset, 1.0);
+          float col = floor(scrolledLon * uMatrixCols);
+          col = clamp(col, 0.0, uMatrixCols - 1.0);
+          
+          // Sample matrix texture at calculated coordinates
+          // Texture coordinates: (col/uMatrixCols, row/uMatrixRows)
+          vec2 matrixUv = vec2(col / uMatrixCols, row / uMatrixRows);
+          vec4 matrixValue = texture2D(uLedMatrix, matrixUv);
+          float ledState = matrixValue.r; // 0.0 (off) or 1.0 (on)
+          
+          // Quantize UVs into LED grid for dot matrix effect
+          float columnGridSize = 1.0 / uColumnSpacing;
+          float rowGridSize = 1.0 / uLedSpacing;
+          vec2 gridUv = vec2(
+            floor(vUv.x * columnGridSize) / columnGridSize,
+            floor(vUv.y * rowGridSize) / rowGridSize
+          );
+          vec2 gridCenter = vec2(
+            gridUv.x + uColumnSpacing * 0.5,
+            gridUv.y + uLedSpacing * 0.5
+          );
+          vec2 distFromCenter = abs(vUv - gridCenter);
+          float maxDist = min(uColumnSpacing, uLedSpacing) * 0.2;
+          
+          // Create circular LED dots
+          float dist = length(distFromCenter);
+          float ledShape = smoothstep(maxDist, maxDist * 0.7, dist);
+          
+          // Use color uniforms from props
+          vec3 dimLedColor = uDimColor;
+          vec3 brightLedColor = uBrightColor;
+          
+          // Mix between dim and bright based on matrix state
+          vec3 ledColor = mix(dimLedColor, brightLedColor, ledState);
+          
+          // Apply LED shape - this creates the circular bulbs with transparent space between
+          vec3 finalColor = mix(
+            vec3(0.0, 0.0, 0.0), // Black space between bulbs (will be transparent)
+            ledColor,             // LED color (dim or bright)
+            ledShape
+          );
+          
+          // Add emissive glow for bright message LEDs
+          float emissive = ledState * ledShape * 1.5;
+          
+          // Calculate alpha: transparent where there are no LEDs, opaque where LEDs are visible
+          // Use ledShape directly as alpha so LEDs are visible and space between is transparent
+          float alpha = ledShape;
+          
+          gl_FragColor = vec4(finalColor + vec3(emissive * 0.2), alpha);
+        }
+      `
+  }) : null, [D, m, M, g, i, n, V, W]);
+  return K((e, r) => {
+    z.current && w.current && (L.current += r * S, L.current >= 1 && (L.current -= 1), o && "uniforms" in o && (o.uniforms.uScrollOffset.value = L.current, o.uniforms.uTime.value = e.clock.elapsedTime));
+  }), oe(() => {
+    if (w.current && (I(
+      u,
+      w.current,
+      b.current,
+      R.current
+    ), o && "uniforms" in o)) {
+      const e = O(
+        w.current,
+        b.current,
+        R.current
+      );
+      o.uniforms.uLedMatrix.value = e, o.needsUpdate = !0;
+    }
+  }, [u, o]), o ? /* @__PURE__ */ a("mesh", { ref: z, material: o, children: /* @__PURE__ */ a("sphereGeometry", { args: [g, 64, 64] }) }) : null;
+}
+const ve = ({ word: u, speed: S, dimColor: g, brightColor: m }) => /* @__PURE__ */ J(
+  N,
+  {
+    camera: { position: [0, 0, 5], fov: 50 },
+    gl: { antialias: !0, alpha: !0 },
+    children: [
+      /* @__PURE__ */ a("ambientLight", { intensity: 0.3 }),
+      /* @__PURE__ */ a("pointLight", { position: [10, 10, 10], intensity: 0.5 }),
+      /* @__PURE__ */ a(Z, { preset: "city" }),
+      /* @__PURE__ */ a(
+        re,
+        {
+          word: u,
+          speed: S,
+          dimColor: g,
+          brightColor: m
+        }
+      ),
+      /* @__PURE__ */ a(
+        $,
+        {
+          enablePan: !1,
+          minDistance: 3,
+          maxDistance: 8,
+          minPolarAngle: Math.PI / 3,
+          maxPolarAngle: Math.PI - Math.PI / 3
+        }
+      ),
+      /* @__PURE__ */ a(ee, { children: /* @__PURE__ */ a(te, { intensity: 1.5, luminanceThreshold: 0.9, luminanceSmoothing: 0.9 }) })
+    ]
+  }
+);
+export {
+  ve as LedMarqueeOrbContainer
+};

package/dist/3d-marquee.umd.js

@@ -0,0 +1,93 @@
+(function(r,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("@react-three/fiber"),require("@react-three/drei"),require("@react-three/postprocessing"),require("react"),require("three")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","@react-three/fiber","@react-three/drei","@react-three/postprocessing","react","three"],o):(r=typeof globalThis<"u"?globalThis:r||self,o(r.ThreeDMarquee={},r.jsxRuntime,r.ReactThreeFiber,r.Drei,r.Postprocessing,r.React,r.THREE))})(this,function(r,o,E,U,z,i,_){"use strict";function k(a){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const l in a)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(a,l);Object.defineProperty(p,l,c.get?c:{enumerable:!0,get:()=>a[l]})}}return p.default=a,Object.freeze(p)}const m=k(_);function H({word:a="ROADHERO",speed:p=.05,radius:l=1,ledSpacing:c=.0075,columnSpacing:L=.005,dimColor:O="#1a261a",brightColor:I="#00ff4d"}){const q=i.useRef(null),S=i.useRef(0),C=i.useRef(null),b=i.useRef(0),D=i.useRef(0),Y=i.useMemo(()=>{const e=Math.ceil(Math.PI/c),s=Math.ceil(2*Math.PI/L);return{rows:e,cols:s}},[c,L]),N=(e,s)=>new Uint8Array(e*s).fill(0),j=(e,s,x,h)=>{s.fill(0);const g=document.createElement("canvas"),t=g.getContext("2d");if(!t)return;const v=2048,M=256;g.width=v,g.height=M,t.fillStyle="#000000",t.fillRect(0,0,v,M),t.fillStyle="#ffffff",t.font="bold 80px monospace",t.textAlign="center",t.textBaseline="middle";const P=t.measureText(e).width+200,Q=Math.ceil(v/P)+2;for(let d=-1;d<Q;d++){const w=v/2+d*P;t.fillText(e,w,M/2)}const J=t.getImageData(0,0,v,M).data,G=Math.floor(x*.4),K=Math.floor(x*.6)-G,B=P;for(let d=0;d<M;d++)for(let w=0;w<v;w++){const Z=(d*v+w)*4;if(J[Z]>128){const $=w%B/B,R=Math.floor($*h),ee=1-d/M,te=Math.floor(ee*K),T=G+te;T>=0&&T<x&&R>=0&&R<h&&(s[T*h+R]=1)}}},A=(e,s,x)=>{const h=new Uint8Array(s*x);for(let t=0;t<e.length;t++)h[t]=e[t]*255;const g=new m.DataTexture(h,x,s,m.RedFormat);return g.needsUpdate=!0,g},{rows:u,cols:f}=Y;b.current=u,D.current=f;const V=i.useMemo(()=>{const e=N(u,f);return j(a,e,u,f),C.current=e,e},[a,u,f]),y=i.useMemo(()=>A(V,u,f),[V,u,f]),W=i.useMemo(()=>{const e=new m.Color(O);return new m.Vector3(e.r,e.g,e.b)},[O]),F=i.useMemo(()=>{const e=new m.Color(I);return new m.Vector3(e.r,e.g,e.b)},[I]),n=i.useMemo(()=>y?new m.ShaderMaterial({transparent:!0,uniforms:{uLedMatrix:{value:y},uScrollOffset:{value:0},uLedSpacing:{value:c},uColumnSpacing:{value:L},uRadius:{value:l},uTime:{value:0},uMatrixRows:{value:u},uMatrixCols:{value:f},uDimColor:{value:W},uBrightColor:{value:F}},vertexShader:`
+        varying vec3 vWorldPosition;
+        varying vec2 vUv;
+        
+        void main() {
+          vUv = uv;
+          vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+          vWorldPosition = worldPosition.xyz;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,fragmentShader:`
+        uniform sampler2D uLedMatrix;
+        uniform float uScrollOffset;
+        uniform float uLedSpacing;
+        uniform float uColumnSpacing;
+        uniform float uRadius;
+        uniform float uTime;
+        uniform float uMatrixRows;
+        uniform float uMatrixCols;
+        uniform vec3 uDimColor;
+        uniform vec3 uBrightColor;
+        
+        varying vec3 vWorldPosition;
+        varying vec2 vUv;
+        
+        void main() {
+          // Convert world position to spherical coordinates
+          vec3 pos = normalize(vWorldPosition);
+          float latitude = asin(pos.y); // -PI/2 to PI/2 (south pole to north pole)
+          float longitude = atan(pos.z, pos.x); // -PI to PI
+          
+          // Calculate matrix coordinates from latitude/longitude
+          // Latitude: -PI/2 to PI/2 -> row 0 to uMatrixRows-1
+          float normalizedLat = (latitude + 1.5708) / 3.14159; // 0 to 1
+          float row = floor(normalizedLat * uMatrixRows);
+          row = clamp(row, 0.0, uMatrixRows - 1.0);
+          
+          // Longitude: -PI to PI -> col 0 to uMatrixCols-1
+          // Apply scroll offset for marquee effect
+          // Flip longitude direction to fix backwards text
+          float normalizedLon = 1.0 - ((longitude + 3.14159) / (2.0 * 3.14159)); // 1 to 0 (flipped)
+          float scrolledLon = mod(normalizedLon + uScrollOffset, 1.0);
+          float col = floor(scrolledLon * uMatrixCols);
+          col = clamp(col, 0.0, uMatrixCols - 1.0);
+          
+          // Sample matrix texture at calculated coordinates
+          // Texture coordinates: (col/uMatrixCols, row/uMatrixRows)
+          vec2 matrixUv = vec2(col / uMatrixCols, row / uMatrixRows);
+          vec4 matrixValue = texture2D(uLedMatrix, matrixUv);
+          float ledState = matrixValue.r; // 0.0 (off) or 1.0 (on)
+          
+          // Quantize UVs into LED grid for dot matrix effect
+          float columnGridSize = 1.0 / uColumnSpacing;
+          float rowGridSize = 1.0 / uLedSpacing;
+          vec2 gridUv = vec2(
+            floor(vUv.x * columnGridSize) / columnGridSize,
+            floor(vUv.y * rowGridSize) / rowGridSize
+          );
+          vec2 gridCenter = vec2(
+            gridUv.x + uColumnSpacing * 0.5,
+            gridUv.y + uLedSpacing * 0.5
+          );
+          vec2 distFromCenter = abs(vUv - gridCenter);
+          float maxDist = min(uColumnSpacing, uLedSpacing) * 0.2;
+          
+          // Create circular LED dots
+          float dist = length(distFromCenter);
+          float ledShape = smoothstep(maxDist, maxDist * 0.7, dist);
+          
+          // Use color uniforms from props
+          vec3 dimLedColor = uDimColor;
+          vec3 brightLedColor = uBrightColor;
+          
+          // Mix between dim and bright based on matrix state
+          vec3 ledColor = mix(dimLedColor, brightLedColor, ledState);
+          
+          // Apply LED shape - this creates the circular bulbs with transparent space between
+          vec3 finalColor = mix(
+            vec3(0.0, 0.0, 0.0), // Black space between bulbs (will be transparent)
+            ledColor,             // LED color (dim or bright)
+            ledShape
+          );
+          
+          // Add emissive glow for bright message LEDs
+          float emissive = ledState * ledShape * 1.5;
+          
+          // Calculate alpha: transparent where there are no LEDs, opaque where LEDs are visible
+          // Use ledShape directly as alpha so LEDs are visible and space between is transparent
+          float alpha = ledShape;
+          
+          gl_FragColor = vec4(finalColor + vec3(emissive * 0.2), alpha);
+        }
+      `}):null,[y,c,L,l,u,f,W,F]);return E.useFrame((e,s)=>{q.current&&C.current&&(S.current+=s*p,S.current>=1&&(S.current-=1),n&&"uniforms"in n&&(n.uniforms.uScrollOffset.value=S.current,n.uniforms.uTime.value=e.clock.elapsedTime))}),i.useEffect(()=>{if(C.current&&(j(a,C.current,b.current,D.current),n&&"uniforms"in n)){const e=A(C.current,b.current,D.current);n.uniforms.uLedMatrix.value=e,n.needsUpdate=!0}},[a,n]),n?o.jsx("mesh",{ref:q,material:n,children:o.jsx("sphereGeometry",{args:[l,64,64]})}):null}const X=({word:a,speed:p,dimColor:l,brightColor:c})=>o.jsxs(E.Canvas,{camera:{position:[0,0,5],fov:50},gl:{antialias:!0,alpha:!0},children:[o.jsx("ambientLight",{intensity:.3}),o.jsx("pointLight",{position:[10,10,10],intensity:.5}),o.jsx(U.Environment,{preset:"city"}),o.jsx(H,{word:a,speed:p,dimColor:l,brightColor:c}),o.jsx(U.OrbitControls,{enablePan:!1,minDistance:3,maxDistance:8,minPolarAngle:Math.PI/3,maxPolarAngle:Math.PI-Math.PI/3}),o.jsx(z.EffectComposer,{children:o.jsx(z.Bloom,{intensity:1.5,luminanceThreshold:.9,luminanceSmoothing:.9})})]});r.LedMarqueeOrbContainer=X,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/dist/components/LedMarqueeOrb.d.ts

@@ -0,0 +1,12 @@
+import * as THREE from 'three';
+export interface LedMarqueeOrbProps {
+    word: string;
+    speed?: number;
+    radius?: number;
+    ledSpacing?: number;
+    columnSpacing?: number;
+    dimColor?: string | THREE.Color;
+    brightColor?: string | THREE.Color;
+}
+export default function LedMarqueeOrb({ word, speed, radius, ledSpacing, columnSpacing, dimColor, brightColor, }: LedMarqueeOrbProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=LedMarqueeOrb.d.ts.map

package/dist/components/LedMarqueeOrb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LedMarqueeOrb.d.ts","sourceRoot":"","sources":["../../src/components/LedMarqueeOrb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,KAAK,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,KAAK,CAAA;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAiB,EACjB,KAAY,EACZ,MAAU,EACV,UAAmB,EACnB,aAAqB,EACrB,QAAoB,EACpB,WAAuB,GACxB,EAAE,kBAAkB,kDAoTpB"}

package/dist/components/LedMarqueeOrbContainer.d.ts

@@ -0,0 +1,9 @@
+import { LedMarqueeOrbProps } from './LedMarqueeOrb';
+export interface LedMarqueeOrbContainerProps extends LedMarqueeOrbProps {
+    word: string;
+    speed: number;
+    dimColor: string;
+    brightColor: string;
+}
+export declare const LedMarqueeOrbContainer: ({ word, speed, dimColor, brightColor }: LedMarqueeOrbContainerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LedMarqueeOrbContainer.d.ts.map

package/dist/components/LedMarqueeOrbContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LedMarqueeOrbContainer.d.ts","sourceRoot":"","sources":["../../src/components/LedMarqueeOrbContainer.tsx"],"names":[],"mappings":"AAGA,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGnE,MAAM,WAAW,2BAA4B,SAAQ,kBAAkB;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,sBAAsB,GAAI,wCAAwC,2BAA2B,4CAmCzG,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { LedMarqueeOrbContainer } from './components/LedMarqueeOrbContainer';
+export type { LedMarqueeOrbContainerProps } from './components/LedMarqueeOrbContainer';
+export type { LedMarqueeOrbProps } from './components/LedMarqueeOrb';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA;AAC5E,YAAY,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAA;AACtF,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "3d-marquee",
-  "version": "0.1.12",
+  "version": "0.2.1",
   "type": "module",
   "main": "./dist/3d-marquee.umd.js",
   "module": "./dist/3d-marquee.es.js",
+  "browser": "./dist/3d-marquee.umd.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -20,14 +21,21 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "build:lib": "vite build --mode library && tsc -p tsconfig.build.json",
-    "preview": "vite preview"
+    "prepublishOnly": "npm run build:lib",
+    "preview": "vite preview",
+    "version:patch": "npm version patch --no-git-tag-version",
+    "version:minor": "npm version minor --no-git-tag-version",
+    "version:major": "npm version major --no-git-tag-version",
+    "publish:patch": "npm run version:patch && npm publish",
+    "publish:minor": "npm run version:minor && npm publish",
+    "publish:major": "npm run version:major && npm publish"
   },
   "peerDependencies": {
     "@react-three/drei": "^9.92.7 || ^10.0.0",
     "@react-three/fiber": "^8.15.11 || ^9.0.0",
     "@react-three/postprocessing": "^2.15.9 || ^3.0.0",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "three": ">=0.158.0"
   },
   "devDependencies": {