3d-marquee 0.1.6 → 0.1.8

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.
Files changed (2) hide show
  1. package/README.md +108 -30
  2. package/package.json +9 -9
package/README.md CHANGED
@@ -1,6 +1,87 @@
1
- # LED Marquee Orb
1
+ # 3D Marquee
2
2
 
3
- 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.
3
+ A React library 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.
4
+
5
+ ## Installation
6
+
7
+ Install the package and its peer dependencies:
8
+
9
+ ```bash
10
+ npm install 3d-marquee @react-three/fiber @react-three/drei @react-three/postprocessing react react-dom three
11
+ ```
12
+
13
+ ### Peer Dependencies
14
+
15
+ - `react`: `^18.2.0 || ^19.0.0`
16
+ - `react-dom`: `^18.2.0 || ^19.0.0`
17
+ - `three`: `>=0.158.0`
18
+ - `@react-three/fiber`: `^8.15.11 || ^9.0.0`
19
+ - `@react-three/drei`: `^9.92.7 || ^10.0.0`
20
+ - `@react-three/postprocessing`: `^2.15.9 || ^3.0.0`
21
+
22
+ ## Usage
23
+
24
+ Import and use the `LedMarqueeOrbContainer` component:
25
+
26
+ ```tsx
27
+ import { LedMarqueeOrbContainer } from '3d-marquee'
28
+
29
+ function App() {
30
+ return (
31
+ <div style={{ width: '100vw', height: '100vh' }}>
32
+ <LedMarqueeOrbContainer
33
+ word="Hello World"
34
+ speed={0.1}
35
+ dimColor="red"
36
+ brightColor="blue"
37
+ />
38
+ </div>
39
+ )
40
+ }
41
+ ```
42
+
43
+ ### Vite Configuration
44
+
45
+ If you're using Vite, add this to your `vite.config.ts` to ensure React is properly deduplicated:
46
+
47
+ ```ts
48
+ import { defineConfig } from 'vite'
49
+ import react from '@vitejs/plugin-react'
50
+
51
+ export default defineConfig({
52
+ plugins: [react()],
53
+ resolve: {
54
+ dedupe: ['react', 'react-dom'],
55
+ },
56
+ optimizeDeps: {
57
+ include: ['react', 'react-dom', '@react-three/fiber', '@react-three/drei', '@react-three/postprocessing'],
58
+ },
59
+ })
60
+ ```
61
+
62
+ ## Component API
63
+
64
+ ### `LedMarqueeOrbContainer`
65
+
66
+ The main component that includes the Canvas, lighting, controls, and post-processing effects.
67
+
68
+ **Props:**
69
+
70
+ - `word` (string, **required**): The text to display on the marquee
71
+ - `speed` (number, **required**): Scroll speed multiplier (higher = faster)
72
+ - `dimColor` (string, **required**): Color for inactive LEDs (e.g., `"#1a261a"` or `"red"`)
73
+ - `brightColor` (string, **required**): Color for active LEDs (e.g., `"#00ff4d"` or `"blue"`)
74
+ - `radius` (number, optional, default: `1`): Sphere radius
75
+ - `ledSpacing` (number, optional, default: `0.0075`): Spacing between LED dots
76
+ - `columnSpacing` (number, optional, default: `0.005`): Spacing between columns
77
+
78
+ ### `LedMarqueeOrb`
79
+
80
+ The core orb component (used internally by `LedMarqueeOrbContainer`). You can use this directly if you need more control over the Canvas setup.
81
+
82
+ **Props:**
83
+
84
+ Same as `LedMarqueeOrbContainer`, but all props are optional with defaults.
4
85
 
5
86
  ## Features
6
87
 
@@ -8,55 +89,53 @@ A React + Vite single-page application featuring a 3D rotating orb with a scroll
8
89
  - **LED Marquee Effect**: Text scrolls horizontally across the center band
9
90
  - **Shader-Based Rendering**: High-performance GPU-accelerated LED matrix effect
10
91
  - **Bloom Post-Processing**: Glowing LED effect with bloom shader
92
+ - **Customizable Colors**: Set dim and bright LED colors via props
11
93
  - **Responsive Design**: Full viewport canvas that adapts to screen size
12
94
 
13
- ## Installation
95
+ ## Controls
96
+
97
+ - **Mouse Drag**: Rotate the camera around the orb
98
+ - **Scroll**: Zoom in/out
99
+
100
+ ## Development
101
+
102
+ ### Building the Library
103
+
104
+ To build the library for distribution:
14
105
 
15
- 1. Install dependencies:
16
106
  ```bash
17
- npm install
107
+ npm run build:lib
18
108
  ```
19
109
 
20
- ## Running the Application
110
+ This creates the distribution files in the `dist/` directory.
111
+
112
+ ### Running the Demo
113
+
114
+ To run the demo/example application:
21
115
 
22
- Start the development server:
23
116
  ```bash
24
117
  npm run dev
25
118
  ```
26
119
 
27
120
  The application will be available at `http://localhost:5173` (or the port shown in the terminal).
28
121
 
29
- ## Building for Production
122
+ ### Building for Production
30
123
 
31
124
  Build the production bundle:
125
+
32
126
  ```bash
33
127
  npm run build
34
128
  ```
35
129
 
36
130
  Preview the production build:
131
+
37
132
  ```bash
38
133
  npm run preview
39
134
  ```
40
135
 
41
- ## Component API
42
-
43
- The `LedMarqueeOrb` component accepts the following props:
44
-
45
- - `word` (string, required): The text to display on the marquee
46
- - `speed` (number, optional, default: 0.25): Scroll speed multiplier
47
- - `radius` (number, optional, default: 1): Sphere radius
48
- - `bandHeight` (number, optional, default: 0.2): Height of the LED band (0-1)
49
- - `ledSpacing` (number, optional, default: 0.05): Spacing between LED dots
50
-
51
- ## Example Usage
52
-
53
- ```tsx
54
- <LedMarqueeOrb word="ROADHERO" speed={0.3} radius={1.2} />
55
- ```
56
-
57
136
  ## Technologies
58
137
 
59
- - **React 18**: UI framework
138
+ - **React 18/19**: UI framework
60
139
  - **Vite**: Build tool and dev server
61
140
  - **TypeScript**: Type safety
62
141
  - **Three.js**: 3D graphics library
@@ -64,17 +143,16 @@ The `LedMarqueeOrb` component accepts the following props:
64
143
  - **@react-three/drei**: Useful helpers and abstractions
65
144
  - **@react-three/postprocessing**: Post-processing effects (bloom)
66
145
 
67
- ## Controls
68
-
69
- - **Mouse Drag**: Rotate the camera around the orb
70
- - **Scroll**: Zoom in/out (if enabled)
71
-
72
146
  ## Implementation Details
73
147
 
74
148
  The LED marquee effect is implemented using a custom shader material that:
149
+
75
150
  1. Samples a canvas texture containing the repeated word
76
151
  2. Constrains rendering to a horizontal band around the sphere's equator
77
152
  3. Quantizes UV coordinates into a grid for the LED dot matrix effect
78
153
  4. Applies scrolling offset for the marquee animation
79
154
  5. Uses emissive colors and bloom post-processing for the glow effect
80
155
 
156
+ ## License
157
+
158
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "3d-marquee",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "type": "module",
5
5
  "main": "./dist/3d-marquee.umd.js",
6
6
  "module": "./dist/3d-marquee.es.js",
@@ -30,16 +30,16 @@
30
30
  "three": ">=0.158.0"
31
31
  },
32
32
  "devDependencies": {
33
- "@react-three/drei": "^9.92.7",
34
- "@react-three/fiber": "^8.15.11",
35
- "@react-three/postprocessing": "^2.15.9",
33
+ "@react-three/drei": "^10.7.7",
34
+ "@react-three/fiber": "^9.4.2",
35
+ "@react-three/postprocessing": "^3.0.0",
36
36
  "@types/node": "^25.0.3",
37
- "@types/react": "^18.2.43",
38
- "@types/react-dom": "^18.2.17",
37
+ "@types/react": "^19.2.5",
38
+ "@types/react-dom": "^19.2.3",
39
39
  "@types/three": "^0.158.3",
40
- "@vitejs/plugin-react": "^4.2.1",
41
- "react": "^18.2.0",
42
- "react-dom": "^18.2.0",
40
+ "@vitejs/plugin-react": "^5.1.1",
41
+ "react": "^19.2.0",
42
+ "react-dom": "^19.2.0",
43
43
  "three": ">=0.158.0",
44
44
  "typescript": "^5.2.2",
45
45
  "vite": "^5.0.8"