visgl · chrisgervang · Mar 20, 2025 · Jan 19, 2025 · Jan 19, 2025 · Jan 23, 2025
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@ coverage/
 .cache/
 
 tsconfig.tsbuildinfo
+tsconfig.build.tsbuildinfo
 
 */**/yarn.lock
 !website/yarn.lock

diff --git a/docs/api-reference/keyframe/keyframes.md b/docs/api-reference/keyframe/keyframes.md
@@ -15,7 +15,7 @@ class CameraKeyFrames extends Keyframes {
 }
 
 // It can be used directly too.
-new Keyframes({timings, keyframes, easings = linear, interpolators = 'linear'})
+new Keyframes({ timings, keyframes, easings = linear, interpolators = 'linear'})
 ```
 
 ## Constructor

diff --git a/examples/get-started/pure-js/app.js b/examples/get-started/pure-js/app.js
@@ -1,5 +1,5 @@
 /* global document, URL */
-import {Deck} from '@deck.gl/core';
+import {Deck, MapView} from '@deck.gl/core';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
 import {DeckAdapter, DeckAnimation, AnimationManager, WebMEncoder} from '@hubble.gl/core';
 import {easeInOut} from 'popmotion';
@@ -82,6 +82,12 @@ export const deck = new Deck({
     deck.setProps({viewState});
   },
   controller: true,
+  views: new MapView({
+    // most video formats don't fully support transparency
+    clear: {
+      color: [255, 255, 255, 1]
+    }
+  }),
   layers: [
     new GeoJsonLayer({
       id: 'base-map',
@@ -118,10 +124,6 @@ export const deck = new Deck({
       getWidth: 1
     })
   ],
-  // most video formats don't fully support transparency
-  parameters: {
-    clearColor: [255, 255, 255, 1]
-  },
   // retina displays will double resolution
   useDevicePixels: false
 });

diff --git a/examples/get-started/pure-js/package.json b/examples/get-started/pure-js/package.json
@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@hubble.gl/core": "^1.4.0",
-    "deck.gl": "^8.9",
+    "deck.gl": "^9.1.3",
     "popmotion": "9.3.1"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^6.2.0"
   }
 }
diff --git a/examples/get-started/scripting/index.html b/examples/get-started/scripting/index.html
@@ -3,8 +3,8 @@
     <!-- deck.gl standalone bundle -->
     <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
+    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
+    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css" rel="stylesheet" />
     <style>
       body {margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;}
       #geo, #non-geo {position: absolute; width: 50vw; height: 50vh;}
@@ -14,21 +14,26 @@
         z-index: 1;
         top: 0;
         right: 0;
-        background-color: #FFF;
+        background-color: #fff;
         margin: 24px;
         padding: 10px 24px;
         box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
         min-width: 300px;
       }
-      .render-result h3 { font-size: 16px; margin: 8px 0; }
-      #re-render { margin-top: 8px; }
+      .render-result h3 {
+        font-size: 16px;
+        margin: 8px 0;
+      }
+      #re-render {
+        margin-top: 8px;
+      }
       #result {
         display: none;
       }
     </style>
   </head>
   <body>
-    <div id="non-geo" ></div>
+    <div id="non-geo"></div>
     <div class="render-result">
       <h3 id="render-status">Rendering video...</h3>
       <div id="result">

diff --git a/examples/website/basic-basemap-mapbox-legacy/app.jsx b/examples/website/basic-basemap-mapbox-legacy/app.jsx
@@ -80,6 +80,7 @@ const DeckGLOverlay = forwardRef((props, ref) => {
   setRef(ref, deck._deck);
   return null;
 });
+DeckGLOverlay.displayName = 'DeckGLOverlay';
 
 const Container = ({children}) => (
   <div

diff --git a/examples/website/basic-basemap-mapbox/app.jsx b/examples/website/basic-basemap-mapbox/app.jsx
@@ -8,7 +8,7 @@ import React, {useState, useRef, useEffect, forwardRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {BasicControls, useHubbleGl, useDeckAnimation} from '@hubble.gl/react';
 import {MapboxOverlay} from '@deck.gl/mapbox';
-import Map, {useControl} from 'react-map-gl';
+import {Map, useControl} from 'react-map-gl/mapbox';
 import {PolygonLayer} from '@deck.gl/layers';
 import {easeInOut} from 'popmotion';
 import {setRef} from './set-ref';
@@ -80,6 +80,7 @@ const DeckGLOverlay = forwardRef((props, ref) => {
   setRef(ref, deck._deck);
   return null;
 });
+DeckGLOverlay.displayName = 'DeckGLOverlay';
 
 const Container = ({children}) => (
   <div

diff --git a/examples/website/basic-basemap-mapbox/index.html b/examples/website/basic-basemap-mapbox/index.html
@@ -1,19 +1,20 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>hubble.gl Example</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
-    #app {width: 100%; height: 100%;}
-  </style>
-</head>
-<body>
-<div id="app"></div>
-</body>
-<script type="module">
-  import {renderToDOM} from './app.jsx';
-  renderToDOM(document.getElementById('app'));
-</script>
+  <head>
+    <link href="https://api.mapbox.com/gl-js-seats/v2.13.0/mapbox-gl-seats.css" rel="stylesheet" />
+    <meta charset="utf-8" />
+    <title>hubble.gl Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
+      #app {width: 100%; height: 100%;}
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import {renderToDOM} from './app.jsx';
+    renderToDOM(document.getElementById('app'));
+  </script>
 </html>
diff --git a/examples/website/basic-basemap-mapbox/package.json b/examples/website/basic-basemap-mapbox/package.json
@@ -9,15 +9,15 @@
     "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "^8.9",
+    "deck.gl": "^9.1",
     "hubble.gl": "^1.4.0",
+    "mapbox-gl": "^3.10.0",
+    "popmotion": "9.3.1",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "react-map-gl": "^7.1.8",
-    "mapbox-gl": "^2.0.0",
-    "popmotion": "9.3.1"
+    "react-map-gl": "^8.0.1"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^6.2.0"
   }
 }
diff --git a/examples/website/basic-basemap/package.json b/examples/website/basic-basemap/package.json
@@ -9,13 +9,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "^8.9",
+    "deck.gl": "^9.1",
     "hubble.gl": "^1.4.0",
+    "maplibre-gl": "^3.6.2",
+    "popmotion": "9.3.1",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "react-map-gl": "^7.1.8",
-    "maplibre-gl": "^3.6.2",
-    "popmotion": "9.3.1"
+    "react-map-gl": "^7.1.8"
   },
   "devDependencies": {
     "vite": "^4.0.0"

diff --git a/examples/website/camera/app.jsx b/examples/website/camera/app.jsx
@@ -1,11 +1,11 @@
 import React, {useState, useRef, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {useHubbleGl, BasicControls} from '@hubble.gl/react';
-import {vignette, fxaa} from '@luma.gl/shadertools';
+import {vignette, fxaa} from '@luma.gl/effects';
 import {PostProcessEffect, MapView} from '@deck.gl/core';
-import {deckAnimation} from './layers';
 import {easeInOut} from 'popmotion';
+import {deckAnimation} from './layers';
 
 const INITIAL_VIEW_STATE = {
   longitude: -122.435,
@@ -108,12 +108,18 @@ export default function App() {
     <Container>
       <div style={{position: 'relative'}}>
         <DeckGL
-          ref={ref => deckRef.current = ref?.deck}
+          ref={ref => (deckRef.current = ref?.deck)}
           style={{position: 'unset'}}
-          views={new MapView({farZMultiplier: 3})}
+          views={
+            new MapView({
+              farZMultiplier: 3,
+              clear: {
+                color: [61 / 255, 20 / 255, 76 / 255, 1]
+              }
+            })
+          }
           parameters={{
-            depthTest: false,
-            clearColor: [61 / 255, 20 / 255, 76 / 255, 1]
+            depthTest: false
             // blend: true,
             // blendEquation: GL.FUNC_ADD,
             // blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA]

diff --git a/examples/website/camera/package.json b/examples/website/camera/package.json
@@ -9,11 +9,12 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@luma.gl/effects": "9.1.4",
+    "deck.gl": "^9.1",
     "hubble.gl": "^1.4.0",
-    "deck.gl": "^8.9",
+    "popmotion": "9.3.1",
     "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "popmotion": "9.3.1"
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "vite": "^4.0.0"

diff --git a/examples/website/terrain/app.jsx b/examples/website/terrain/app.jsx
@@ -1,6 +1,6 @@
 import React, {useState, useRef, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {TerrainLayer} from '@deck.gl/geo-layers';
 import {BasicControls, useHubbleGl} from '@hubble.gl/react';
 import {hold, DeckAnimation} from '@hubble.gl/core';
@@ -169,7 +169,7 @@ export default function App() {
     <Container>
       <div style={{position: 'relative'}}>
         <DeckGL
-          ref={ref => deckRef.current = ref?.deck}
+          ref={ref => (deckRef.current = ref?.deck)}
           style={{position: 'unset'}}
           viewState={cameraFrame}
           onViewStateChange={({viewState: vs}) => {
@@ -203,4 +203,4 @@ export default function App() {
 export async function renderToDOM(container) {
   const root = createRoot(container);
   root.render(<App />);
-}
+}
diff --git a/examples/website/terrain/package.json b/examples/website/terrain/package.json
@@ -9,13 +9,13 @@
     "build": "vite build"
   },
   "dependencies": {
+    "deck.gl": "^9.1",
     "hubble.gl": "^1.4.0",
-    "deck.gl": "^8.9",
+    "popmotion": "9.3.1",
     "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "popmotion": "9.3.1"
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^6.2.0"
   }
 }