3d-marquee 0.1.1

package/README.md

@@ -0,0 +1,80 @@
+# LED Marquee Orb
+
+A React + Vite single-page application featuring a 3D rotating orb with a scrolling LED marquee effect. The word scrolls horizontally across the center band of the sphere, creating a seamless ticker display.
+
+## Features
+
+- **3D Rotating Orb**: Smoothly rotating sphere with orbit controls
+- **LED Marquee Effect**: Text scrolls horizontally across the center band
+- **Shader-Based Rendering**: High-performance GPU-accelerated LED matrix effect
+- **Bloom Post-Processing**: Glowing LED effect with bloom shader
+- **Responsive Design**: Full viewport canvas that adapts to screen size
+
+## Installation
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+## Running the Application
+
+Start the development server:
+```bash
+npm run dev
+```
+
+The application will be available at `http://localhost:5173` (or the port shown in the terminal).
+
+## Building for Production
+
+Build the production bundle:
+```bash
+npm run build
+```
+
+Preview the production build:
+```bash
+npm run preview
+```
+
+## Component API
+
+The `LedMarqueeOrb` component accepts the following props:
+
+- `word` (string, required): The text to display on the marquee
+- `speed` (number, optional, default: 0.25): Scroll speed multiplier
+- `radius` (number, optional, default: 1): Sphere radius
+- `bandHeight` (number, optional, default: 0.2): Height of the LED band (0-1)
+- `ledSpacing` (number, optional, default: 0.05): Spacing between LED dots
+
+## Example Usage
+
+```tsx
+<LedMarqueeOrb word="ROADHERO" speed={0.3} radius={1.2} />
+```
+
+## Technologies
+
+- **React 18**: UI framework
+- **Vite**: Build tool and dev server
+- **TypeScript**: Type safety
+- **Three.js**: 3D graphics library
+- **@react-three/fiber**: React renderer for Three.js
+- **@react-three/drei**: Useful helpers and abstractions
+- **@react-three/postprocessing**: Post-processing effects (bloom)
+
+## Controls
+
+- **Mouse Drag**: Rotate the camera around the orb
+- **Scroll**: Zoom in/out (if enabled)
+
+## Implementation Details
+
+The LED marquee effect is implemented using a custom shader material that:
+1. Samples a canvas texture containing the repeated word
+2. Constrains rendering to a horizontal band around the sphere's equator
+3. Quantizes UV coordinates into a grid for the LED dot matrix effect
+4. Applies scrolling offset for the marquee animation
+5. Uses emissive colors and bloom post-processing for the glow effect
+

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/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "3d-marquee",
+  "version": "0.1.1",
+  "type": "module",
+  "main": "./dist/3d-marquee.umd.js",
+  "module": "./dist/3d-marquee.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/3d-marquee.js",
+      "require": "./dist/3d-marquee.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:lib": "tsc -p tsconfig.build.json && vite build --mode library",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "@react-three/drei": "^9.92.7",
+    "@react-three/fiber": "^8.15.11",
+    "@react-three/postprocessing": "^2.15.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.158.0"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.92.7",
+    "@react-three/fiber": "^8.15.11",
+    "@react-three/postprocessing": "^2.15.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.158.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@types/three": "^0.158.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}