@buley/hexgrid-3d 1.1.2 → 3.0.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.
Files changed (15) hide show
  1. package/README.md +64 -62
  2. package/package.json +4 -1
  3. package/site/src/app/docs/page.tsx +158 -34
  4. package/site/src/app/examples/page.tsx +26 -8
  5. package/site/src/app/layout.tsx +13 -3
  6. package/site/src/app/page.tsx +95 -23
  7. package/src/algorithms/FluidEngineFactory.ts +44 -0
  8. package/src/algorithms/FluidSimulation3DGPU.ts +92 -0
  9. package/src/algorithms/FluidSimulationWebNN.ts +153 -0
  10. package/src/components/HexGrid.tsx +55 -12
  11. package/src/types/wgsl.d.ts +4 -0
  12. package/src/webgpu/WebGPUContext.ts +71 -0
  13. package/src/webgpu/shaders/fluid_sim.wgsl +140 -0
  14. package/src/webnn/WebNNContext.ts +99 -0
  15. package/tsconfig.json +3 -2
package/README.md CHANGED
@@ -14,6 +14,7 @@ A reusable 3D hexagonal grid visualization component for displaying content in a
14
14
  - **Responsive Design** - Adapts to mobile and desktop viewports
15
15
  - **Dynamic Theming** - Accent color extraction from images
16
16
  - **Autoplay Mode** - Queue-based content cycling
17
+ - **Hardware Acceleration** - Supports WebNN (NPU) and WebGPU for massive fluid/particle simulation
17
18
 
18
19
  ## Installation
19
20
 
@@ -26,47 +27,43 @@ npm install @buley/hexgrid-3d
26
27
  ### Basic Example
27
28
 
28
29
  ```tsx
29
- import { HexGrid, Photo } from '@buley/hexgrid-3d'
30
+ import { HexGrid, Photo } from "@buley/hexgrid-3d";
30
31
 
31
32
  function MyComponent() {
32
33
  const photos: Photo[] = [
33
34
  {
34
- id: '1',
35
- url: 'https://example.com/photo.jpg',
36
- source: 'example',
37
- createdAt: new Date().toISOString()
38
- }
39
- ]
35
+ id: "1",
36
+ url: "https://example.com/photo.jpg",
37
+ source: "example",
38
+ createdAt: new Date().toISOString(),
39
+ },
40
+ ];
40
41
 
41
42
  return (
42
43
  <HexGrid
43
44
  photos={photos}
44
- onHexClick={(photo) => console.log('Clicked:', photo)}
45
+ onHexClick={(photo) => console.log("Clicked:", photo)}
45
46
  />
46
- )
47
+ );
47
48
  }
48
49
  ```
49
50
 
50
51
  ### Advanced Example with Controls
51
52
 
52
53
  ```tsx
53
- import { HexGrid, Photo, uiStore } from '@buley/hexgrid-3d'
54
- import { useRef, useState } from 'react'
54
+ import { HexGrid, Photo, uiStore } from "@buley/hexgrid-3d";
55
+ import { useRef, useState } from "react";
55
56
 
56
57
  function AdvancedExample() {
57
- const canvasRef = useRef<HTMLCanvasElement>(null)
58
- const [modalOpen, setModalOpen] = useState(false)
58
+ const canvasRef = useRef<HTMLCanvasElement>(null);
59
+ const [modalOpen, setModalOpen] = useState(false);
59
60
 
60
61
  return (
61
62
  <div>
62
63
  {/* Control buttons */}
63
- <button onClick={() => uiStore.toggleDebug()}>
64
- Toggle Debug
65
- </button>
66
- <button onClick={() => uiStore.toggleCamera()}>
67
- Camera Controls
68
- </button>
69
-
64
+ <button onClick={() => uiStore.toggleDebug()}>Toggle Debug</button>
65
+ <button onClick={() => uiStore.toggleCamera()}>Camera Controls</button>
66
+
70
67
  {/* Visualization */}
71
68
  <HexGrid
72
69
  photos={photos}
@@ -77,7 +74,7 @@ function AdvancedExample() {
77
74
  autoplayQueueLimit={100}
78
75
  />
79
76
  </div>
80
- )
77
+ );
81
78
  }
82
79
  ```
83
80
 
@@ -89,18 +86,18 @@ Main visualization component that renders a 3D hexagonal grid on a spherical sur
89
86
 
90
87
  **Props:**
91
88
 
92
- | Prop | Type | Default | Description |
93
- |------|------|---------|-------------|
94
- | `photos` | `Photo[]` | `[]` | Array of photos to display in the grid |
95
- | `onHexClick` | `(photo: Photo) => void` | - | Callback when a hex tile is clicked |
96
- | `spacing` | `number` | `1.0` | Grid spacing multiplier (affects tile density) |
97
- | `canvasRef` | `React.RefObject<HTMLCanvasElement>` | - | Optional external canvas reference |
98
- | `onLeaderboardUpdate` | `(leaderboard: any) => void` | - | Callback for leaderboard statistics updates |
99
- | `autoplayQueueLimit` | `number` | - | Maximum items in autoplay queue |
100
- | `onAutoplayQueueLimitChange` | `(limit: number) => void` | - | Callback when autoplay limit changes |
101
- | `modalOpen` | `boolean` | `false` | Whether a modal is currently open |
102
- | `userId` | `string` | - | Current user ID for personalization |
103
- | `username` | `string` | - | Current username for display |
89
+ | Prop | Type | Default | Description |
90
+ | ---------------------------- | ------------------------------------ | ------- | ---------------------------------------------- |
91
+ | `photos` | `Photo[]` | `[]` | Array of photos to display in the grid |
92
+ | `onHexClick` | `(photo: Photo) => void` | - | Callback when a hex tile is clicked |
93
+ | `spacing` | `number` | `1.0` | Grid spacing multiplier (affects tile density) |
94
+ | `canvasRef` | `React.RefObject<HTMLCanvasElement>` | - | Optional external canvas reference |
95
+ | `onLeaderboardUpdate` | `(leaderboard: any) => void` | - | Callback for leaderboard statistics updates |
96
+ | `autoplayQueueLimit` | `number` | - | Maximum items in autoplay queue |
97
+ | `onAutoplayQueueLimitChange` | `(limit: number) => void` | - | Callback when autoplay limit changes |
98
+ | `modalOpen` | `boolean` | `false` | Whether a modal is currently open |
99
+ | `userId` | `string` | - | Current user ID for personalization |
100
+ | `username` | `string` | - | Current username for display |
104
101
 
105
102
  ### NarrationOverlay
106
103
 
@@ -108,12 +105,12 @@ Displays narration messages and real-time statistics in a dashboard-style overla
108
105
 
109
106
  **Props:**
110
107
 
111
- | Prop | Type | Description |
112
- |------|------|-------------|
113
- | `messages` | `NarrationMessage[]` | Array of narration messages to display |
114
- | `statsTracker` | `StatsTracker` | Statistics tracker instance |
115
- | `isVisible` | `boolean` | Whether overlay is visible |
116
- | `onClose` | `() => void` | Callback when overlay is closed |
108
+ | Prop | Type | Description |
109
+ | -------------- | -------------------- | -------------------------------------- |
110
+ | `messages` | `NarrationMessage[]` | Array of narration messages to display |
111
+ | `statsTracker` | `StatsTracker` | Statistics tracker instance |
112
+ | `isVisible` | `boolean` | Whether overlay is visible |
113
+ | `onClose` | `() => void` | Callback when overlay is closed |
117
114
 
118
115
  ## Types
119
116
 
@@ -121,23 +118,23 @@ Displays narration messages and real-time statistics in a dashboard-style overla
121
118
 
122
119
  ```typescript
123
120
  interface Photo {
124
- id: string
125
- url: string
126
- thumbnailUrl?: string
127
- title?: string
128
- description?: string
129
- source: string
130
- createdAt: string
131
- userId?: string
132
- username?: string
133
- videoUrl?: string
134
- platform?: string
135
- author?: string
136
- authorUrl?: string
137
- likes?: number
138
- views?: number
139
- comments?: number
140
- dominantColor?: string
121
+ id: string;
122
+ url: string;
123
+ thumbnailUrl?: string;
124
+ title?: string;
125
+ description?: string;
126
+ source: string;
127
+ createdAt: string;
128
+ userId?: string;
129
+ username?: string;
130
+ videoUrl?: string;
131
+ platform?: string;
132
+ author?: string;
133
+ authorUrl?: string;
134
+ likes?: number;
135
+ views?: number;
136
+ comments?: number;
137
+ dominantColor?: string;
141
138
  }
142
139
  ```
143
140
 
@@ -160,26 +157,29 @@ Global UI state management for visualization components.
160
157
 
161
158
  ```typescript
162
159
  interface UIState {
163
- debugOpen: boolean
164
- showStats: boolean
165
- cameraOpen: boolean
166
- showNarration: boolean
160
+ debugOpen: boolean;
161
+ showStats: boolean;
162
+ cameraOpen: boolean;
163
+ showNarration: boolean;
167
164
  }
168
165
  ```
169
166
 
170
167
  ## Camera Controls
171
168
 
172
169
  ### Mouse/Trackpad
170
+
173
171
  - **Left Click + Drag** - Rotate camera (yaw and pitch)
174
172
  - **Scroll** - Zoom in/out
175
173
  - **Click on Hex** - Select photo
176
174
 
177
175
  ### Touch
176
+
178
177
  - **Single Touch Drag** - Rotate camera
179
178
  - **Pinch** - Zoom in/out
180
179
  - **Tap on Hex** - Select photo
181
180
 
182
181
  ### Keyboard
182
+
183
183
  - **D** - Toggle debug panel
184
184
  - **Escape** - Close debug panel
185
185
 
@@ -197,21 +197,23 @@ The component uses a Web Worker for heavy calculations to maintain 60fps renderi
197
197
  The component integrates with your app's theme system and can extract accent colors from images:
198
198
 
199
199
  ```tsx
200
- import { getAccentRgba, setCustomAccentColor } from '@/lib/theme-colors'
200
+ import { getAccentRgba, setCustomAccentColor } from "@/lib/theme-colors";
201
201
 
202
202
  // Custom accent color from image
203
- setCustomAccentColor('#ff00ff')
203
+ setCustomAccentColor("#ff00ff");
204
204
  ```
205
205
 
206
206
  ## Dependencies
207
207
 
208
208
  ### Peer Dependencies
209
+
209
210
  - `react` ^18.0.0
210
211
  - `react-dom` ^18.0.0
211
212
  - `next` ^14.0.0
212
213
  - `three` (Three.js for 3D calculations)
213
214
 
214
215
  ### Internal Dependencies
216
+
215
217
  - `@/lib/stats-tracker` - Statistics tracking
216
218
  - `@/lib/narration` - Narration engine
217
219
  - `@/lib/logger` - Logging utilities
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@buley/hexgrid-3d",
3
- "version": "1.1.2",
3
+ "version": "3.0.0",
4
4
  "description": "3D hexagonal grid visualization component for React",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -61,5 +61,8 @@
61
61
  "react-dom": "^19.2.3",
62
62
  "ts-jest": "^29.4.6",
63
63
  "typescript": "^5.0.0"
64
+ },
65
+ "dependencies": {
66
+ "@webgpu/types": "^0.1.69"
64
67
  }
65
68
  }
package/site/src/app/docs/page.tsx CHANGED
@@ -7,8 +7,18 @@ export const metadata = {
7
7
 
8
8
  export default function DocsPage() {
9
9
  return (
10
- <div className="container" style={{ paddingTop: '4rem', paddingBottom: '4rem' }}>
11
- <Link href="/" style={{ color: '#667eea', marginBottom: '2rem', display: 'inline-block' }}>
10
+ <div
11
+ className="container"
12
+ style={{ paddingTop: '4rem', paddingBottom: '4rem' }}
13
+ >
14
+ <Link
15
+ href="/"
16
+ style={{
17
+ color: '#667eea',
18
+ marginBottom: '2rem',
19
+ display: 'inline-block',
20
+ }}
21
+ >
12
22
  ← Back to Home
13
23
  </Link>
14
24
 
@@ -19,14 +29,18 @@ export default function DocsPage() {
19
29
 
20
30
  <div style={{ display: 'grid', gap: '2rem' }}>
21
31
  <section>
22
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Installation</h2>
32
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
33
+ Installation
34
+ </h2>
23
35
  <div className="code-block">
24
36
  <code>npm install @buley/hexgrid-3d</code>
25
37
  </div>
26
38
  </section>
27
39
 
28
40
  <section>
29
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Basic Usage</h2>
41
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
42
+ Basic Usage
43
+ </h2>
30
44
  <div className="code-block">
31
45
  <code>
32
46
  {`import { HexGrid, Photo } from '@buley/hexgrid-3d'
@@ -54,35 +68,90 @@ function MyComponent() {
54
68
 
55
69
  <section>
56
70
  <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Props</h2>
57
- <div style={{ background: '#1a1a1a', padding: '1.5rem', borderRadius: '8px', border: '1px solid #2a2a2a' }}>
71
+ <div
72
+ style={{
73
+ background: '#1a1a1a',
74
+ padding: '1.5rem',
75
+ borderRadius: '8px',
76
+ border: '1px solid #2a2a2a',
77
+ }}
78
+ >
58
79
  <table style={{ width: '100%', borderCollapse: 'collapse' }}>
59
80
  <thead>
60
81
  <tr style={{ borderBottom: '1px solid #2a2a2a' }}>
61
- <th style={{ padding: '0.75rem', textAlign: 'left', color: '#fff' }}>Prop</th>
62
- <th style={{ padding: '0.75rem', textAlign: 'left', color: '#fff' }}>Type</th>
63
- <th style={{ padding: '0.75rem', textAlign: 'left', color: '#fff' }}>Description</th>
82
+ <th
83
+ style={{
84
+ padding: '0.75rem',
85
+ textAlign: 'left',
86
+ color: '#fff',
87
+ }}
88
+ >
89
+ Prop
90
+ </th>
91
+ <th
92
+ style={{
93
+ padding: '0.75rem',
94
+ textAlign: 'left',
95
+ color: '#fff',
96
+ }}
97
+ >
98
+ Type
99
+ </th>
100
+ <th
101
+ style={{
102
+ padding: '0.75rem',
103
+ textAlign: 'left',
104
+ color: '#fff',
105
+ }}
106
+ >
107
+ Description
108
+ </th>
64
109
  </tr>
65
110
  </thead>
66
111
  <tbody>
67
112
  <tr style={{ borderBottom: '1px solid #2a2a2a' }}>
68
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>photos</code></td>
69
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>Photo[]</code></td>
70
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>Array of photos to display</td>
113
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
114
+ <code>photos</code>
115
+ </td>
116
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
117
+ <code>Photo[]</code>
118
+ </td>
119
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
120
+ Array of photos to display
121
+ </td>
71
122
  </tr>
72
123
  <tr style={{ borderBottom: '1px solid #2a2a2a' }}>
73
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>onHexClick</code></td>
74
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>(photo: Photo) =&gt; void</code></td>
75
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>Callback when hex is clicked</td>
124
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
125
+ <code>onHexClick</code>
126
+ </td>
127
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
128
+ <code>(photo: Photo) =&gt; void</code>
129
+ </td>
130
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
131
+ Callback when hex is clicked
132
+ </td>
76
133
  </tr>
77
134
  <tr style={{ borderBottom: '1px solid #2a2a2a' }}>
78
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>spacing</code></td>
79
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>number</code></td>
80
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>Grid spacing multiplier</td>
135
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
136
+ <code>spacing</code>
137
+ </td>
138
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
139
+ <code>number</code>
140
+ </td>
141
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
142
+ Grid spacing multiplier
143
+ </td>
81
144
  </tr>
82
145
  <tr>
83
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>canvasRef</code></td>
84
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}><code>RefObject</code></td>
85
- <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>Optional canvas reference</td>
146
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
147
+ <code>canvasRef</code>
148
+ </td>
149
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
150
+ <code>RefObject</code>
151
+ </td>
152
+ <td style={{ padding: '0.75rem', color: '#a0a0a0' }}>
153
+ Optional canvas reference
154
+ </td>
86
155
  </tr>
87
156
  </tbody>
88
157
  </table>
@@ -90,24 +159,61 @@ function MyComponent() {
90
159
  </section>
91
160
 
92
161
  <section>
93
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Camera Controls</h2>
94
- <div style={{ background: '#1a1a1a', padding: '1.5rem', borderRadius: '8px', border: '1px solid #2a2a2a' }}>
95
- <h3 style={{ marginBottom: '1rem', color: '#fff' }}>Mouse/Trackpad</h3>
96
- <ul style={{ color: '#a0a0a0', lineHeight: '1.8', marginLeft: '1.5rem' }}>
162
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
163
+ Camera Controls
164
+ </h2>
165
+ <div
166
+ style={{
167
+ background: '#1a1a1a',
168
+ padding: '1.5rem',
169
+ borderRadius: '8px',
170
+ border: '1px solid #2a2a2a',
171
+ }}
172
+ >
173
+ <h3 style={{ marginBottom: '1rem', color: '#fff' }}>
174
+ Mouse/Trackpad
175
+ </h3>
176
+ <ul
177
+ style={{
178
+ color: '#a0a0a0',
179
+ lineHeight: '1.8',
180
+ marginLeft: '1.5rem',
181
+ }}
182
+ >
97
183
  <li>Left Click + Drag - Rotate camera (yaw and pitch)</li>
98
184
  <li>Scroll - Zoom in/out</li>
99
185
  <li>Click on Hex - Select photo</li>
100
186
  </ul>
101
187
 
102
- <h3 style={{ marginTop: '2rem', marginBottom: '1rem', color: '#fff' }}>Touch</h3>
103
- <ul style={{ color: '#a0a0a0', lineHeight: '1.8', marginLeft: '1.5rem' }}>
188
+ <h3
189
+ style={{ marginTop: '2rem', marginBottom: '1rem', color: '#fff' }}
190
+ >
191
+ Touch
192
+ </h3>
193
+ <ul
194
+ style={{
195
+ color: '#a0a0a0',
196
+ lineHeight: '1.8',
197
+ marginLeft: '1.5rem',
198
+ }}
199
+ >
104
200
  <li>Single Touch Drag - Rotate camera</li>
105
201
  <li>Pinch - Zoom in/out</li>
106
202
  <li>Tap on Hex - Select photo</li>
107
203
  </ul>
108
204
 
109
- <h3 style={{ marginTop: '2rem', marginBottom: '1rem', color: '#fff' }}>Keyboard</h3>
110
- <ul style={{ color: '#a0a0a0', lineHeight: '1.8', marginLeft: '1.5rem' }}>
205
+ <h3
206
+ style={{ marginTop: '2rem', marginBottom: '1rem', color: '#fff' }}
207
+ >
208
+ Keyboard
209
+ </h3>
210
+ <ul
211
+ style={{
212
+ color: '#a0a0a0',
213
+ lineHeight: '1.8',
214
+ marginLeft: '1.5rem',
215
+ }}
216
+ >
111
217
  <li>D - Toggle debug panel</li>
112
218
  <li>Escape - Close debug panel</li>
113
219
  </ul>
@@ -115,11 +221,26 @@ function MyComponent() {
115
221
  </section>
116
222
 
117
223
  <section>
118
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Performance</h2>
119
- <p style={{ color: '#a0a0a0', lineHeight: '1.8', marginBottom: '1rem' }}>
120
- HexGrid 3D uses Web Workers for heavy calculations to maintain 60fps rendering:
224
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
225
+ Performance
226
+ </h2>
227
+ <p
228
+ style={{
229
+ color: '#a0a0a0',
230
+ lineHeight: '1.8',
231
+ marginBottom: '1rem',
232
+ }}
233
+ >
234
+ HexGrid 3D uses Web Workers for heavy calculations to maintain 60fps
235
+ rendering:
121
236
  </p>
122
- <ul style={{ color: '#a0a0a0', lineHeight: '1.8', marginLeft: '1.5rem' }}>
237
+ <ul
238
+ style={{
239
+ color: '#a0a0a0',
240
+ lineHeight: '1.8',
241
+ marginLeft: '1.5rem',
242
+ }}
243
+ >
123
244
  <li>Streaming Rendering - Progressively renders tiles</li>
124
245
  <li>Texture Caching - Reuses loaded images</li>
125
246
  <li>Adaptive Quality - Adjusts detail based on performance</li>
@@ -128,9 +249,12 @@ function MyComponent() {
128
249
  </section>
129
250
 
130
251
  <section>
131
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>More Information</h2>
252
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
253
+ More Information
254
+ </h2>
132
255
  <p style={{ color: '#a0a0a0', lineHeight: '1.8' }}>
133
- For complete API documentation, examples, and advanced usage, see the{' '}
256
+ For complete API documentation, examples, and advanced usage, see
257
+ the{' '}
134
258
  <a
135
259
  href="https://github.com/buley/hexgrid-3d"
136
260
  target="_blank"
package/site/src/app/examples/page.tsx CHANGED
@@ -7,8 +7,18 @@ export const metadata = {
7
7
 
8
8
  export default function ExamplesPage() {
9
9
  return (
10
- <div className="container" style={{ paddingTop: '4rem', paddingBottom: '4rem' }}>
11
- <Link href="/" style={{ color: '#667eea', marginBottom: '2rem', display: 'inline-block' }}>
10
+ <div
11
+ className="container"
12
+ style={{ paddingTop: '4rem', paddingBottom: '4rem' }}
13
+ >
14
+ <Link
15
+ href="/"
16
+ style={{
17
+ color: '#667eea',
18
+ marginBottom: '2rem',
19
+ display: 'inline-block',
20
+ }}
21
+ >
12
22
  ← Back to Home
13
23
  </Link>
14
24
 
@@ -19,7 +29,9 @@ export default function ExamplesPage() {
19
29
 
20
30
  <div style={{ display: 'grid', gap: '2rem' }}>
21
31
  <section>
22
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Basic Example</h2>
32
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
33
+ Basic Example
34
+ </h2>
23
35
  <div className="code-block">
24
36
  <code>
25
37
  {`import { HexGrid, Photo } from '@buley/hexgrid-3d'
@@ -54,7 +66,9 @@ function BasicExample() {
54
66
  </section>
55
67
 
56
68
  <section>
57
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Advanced Example with Controls</h2>
69
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
70
+ Advanced Example with Controls
71
+ </h2>
58
72
  <div className="code-block">
59
73
  <code>
60
74
  {`import { HexGrid, Photo, uiStore } from '@buley/hexgrid-3d'
@@ -91,7 +105,9 @@ function AdvancedExample() {
91
105
  </section>
92
106
 
93
107
  <section>
94
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>With Custom Theming</h2>
108
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
109
+ With Custom Theming
110
+ </h2>
95
111
  <div className="code-block">
96
112
  <code>
97
113
  {`import { HexGrid, Photo } from '@buley/hexgrid-3d'
@@ -113,7 +129,9 @@ function ThemedExample() {
113
129
  </section>
114
130
 
115
131
  <section>
116
- <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>More Examples</h2>
132
+ <h2 style={{ fontSize: '2rem', marginBottom: '1rem' }}>
133
+ More Examples
134
+ </h2>
117
135
  <p style={{ color: '#a0a0a0', lineHeight: '1.8' }}>
118
136
  For more examples and use cases, check out the{' '}
119
137
  <a
@@ -123,8 +141,8 @@ function ThemedExample() {
123
141
  style={{ color: '#667eea' }}
124
142
  >
125
143
  examples directory
126
- </a>
127
- {' '}in the GitHub repository.
144
+ </a>{' '}
145
+ in the GitHub repository.
128
146
  </p>
129
147
  </section>
130
148
  </div>
package/site/src/app/layout.tsx CHANGED
@@ -6,12 +6,22 @@ const inter = Inter({ subsets: ['latin'] });
6
6
 
7
7
  export const metadata: Metadata = {
8
8
  title: 'HexGrid 3D - Immersive 3D Hexagonal Grid Visualization',
9
- description: 'A powerful React component for displaying content in an immersive 3D spherical hexagonal grid layout. Perfect for portfolios, galleries, and interactive visualizations.',
10
- keywords: ['3D', 'hexgrid', 'visualization', 'react', 'three.js', 'spherical', 'interactive'],
9
+ description:
10
+ 'A powerful React component for displaying content in an immersive 3D spherical hexagonal grid layout. Perfect for portfolios, galleries, and interactive visualizations.',
11
+ keywords: [
12
+ '3D',
13
+ 'hexgrid',
14
+ 'visualization',
15
+ 'react',
16
+ 'three.js',
17
+ 'spherical',
18
+ 'interactive',
19
+ ],
11
20
  authors: [{ name: 'buley' }],
12
21
  openGraph: {
13
22
  title: 'HexGrid 3D - Immersive 3D Hexagonal Grid Visualization',
14
- description: 'A powerful React component for displaying content in an immersive 3D spherical hexagonal grid layout.',
23
+ description:
24
+ 'A powerful React component for displaying content in an immersive 3D spherical hexagonal grid layout.',
15
25
  type: 'website',
16
26
  },
17
27
  };