diff --git a/package.json b/package.json
index 0fc86d3aa2..c63565fe41 100644
--- a/package.json
+++ b/package.json
@@ -110,9 +110,6 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/mapbox": "^8.9.27",
-    "@hubble.gl/core": "1.2.0-alpha.6",
-    "@hubble.gl/react": "1.2.0-alpha.6",
     "@kepler.gl/components": "3.0.0-alpha.1",
     "@loaders.gl/polyfills": "^4.1.0-alpha.2",
     "@types/mapbox__geo-viewport": "^0.4.1",
diff --git a/src/actions/src/ui-state-actions.ts b/src/actions/src/ui-state-actions.ts
index c8e4a2c345..65b6539f9f 100644
--- a/src/actions/src/ui-state-actions.ts
+++ b/src/actions/src/ui-state-actions.ts
@@ -261,6 +261,35 @@ export const setExportImageSetting: (
   (newSetting: SetExportImageSettingUpdaterAction['payload']) => ({payload: newSetting})
 );
 
+/** SET_EXPORT_VIDEO_SETTING */
+export type SetExportVideoSettingUpdaterAction = {
+  payload: {
+    mediaType?: string;
+    cameraPreset?: string;
+    fileName?: string;
+    resolution?: string;
+    durationMs?: number;
+  };
+};
+
+/**
+ * Set `exportVideo` settings: mediaType, cameraPreset, fileName, resolution, durationMs
+ * @memberof uiStateActions
+ * @param newSetting - field(s) to change, e.g. {mediaType: 'gif'}
+ * @public
+ */
+export const setExportVideoSetting: (
+  newSetting: SetExportVideoSettingUpdaterAction['payload']
+) => Merge<
+  SetExportVideoSettingUpdaterAction,
+  {type: typeof ActionTypes.SET_EXPORT_VIDEO_SETTING}
+> = createAction(
+  ActionTypes.SET_EXPORT_VIDEO_SETTING,
+  (newSetting: SetExportVideoSettingUpdaterAction['payload']) => ({
+    payload: newSetting
+  })
+);
+
 /**
  * Start exporting image flow
  * @memberof uiStateActions
diff --git a/src/components/package.json b/src/components/package.json
index bf16ad00aa..15ff7e139e 100644
--- a/src/components/package.json
+++ b/src/components/package.json
@@ -31,12 +31,15 @@
   ],
   "dependencies": {
     "@deck.gl/core": "^8.9.27",
+    "@deck.gl/mapbox": "^8.9.27",
     "@deck.gl/react": "^8.9.27",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@floating-ui/react": "0.25.1",
+    "@hubble.gl/core": "1.3.7",
+    "@hubble.gl/react": "1.3.7",
     "@kepler.gl/actions": "3.0.0-alpha.1",
     "@kepler.gl/cloud-providers": "3.0.0-alpha.1",
     "@kepler.gl/constants": "3.0.0-alpha.1",
diff --git a/src/components/src/bottom-widget.tsx b/src/components/src/bottom-widget.tsx
index 08bf5a9379..8066357e9c 100644
--- a/src/components/src/bottom-widget.tsx
+++ b/src/components/src/bottom-widget.tsx
@@ -21,7 +21,7 @@
 import React, {forwardRef, useMemo, useCallback} from 'react';
 import styled, {withTheme} from 'styled-components';
 
-import {FILTER_VIEW_TYPES} from '@kepler.gl/constants';
+import {FILTER_VIEW_TYPES, EXPORT_VIDEO_ID} from '@kepler.gl/constants';
 import {hasPortableWidth, isSideFilter} from '@kepler.gl/utils';
 import {media, breakPointValues} from '@kepler.gl/styles';
 import {TimeRangeFilter} from '@kepler.gl/types';
@@ -88,6 +88,7 @@ export default function BottomWidgetFactory(
       datasets,
       filters,
       animationConfig,
+      toggleModal,
       visStateActions,
       containerW,
       uiState,
@@ -137,6 +138,8 @@ export default function BottomWidgetFactory(
     // animation controller needs to call reset on it
     const filter = (animatedFilter as TimeRangeFilter) || filters[enlargedFilterIdx];
 
+    const exportAnimation = useCallback(() => toggleModal(EXPORT_VIDEO_ID), [toggleModal]);
+
     const onClose = useCallback(
       () => visStateActions.setFilterView(enlargedFilterIdx, FILTER_VIEW_TYPES.side),
       [visStateActions, enlargedFilterIdx]
@@ -159,6 +162,7 @@ export default function BottomWidgetFactory(
               <LayerAnimationControl
                 updateAnimationSpeed={visStateActions.updateLayerAnimationSpeed}
                 toggleAnimation={visStateActions.toggleLayerAnimation}
+                exportAnimation={exportAnimation}
                 isAnimatable={!animatedFilter}
                 isAnimating={isAnimating}
                 resetAnimation={resetAnimation}
@@ -188,6 +192,7 @@ export default function BottomWidgetFactory(
                   setFilterAnimationTime={setTimelineValue}
                   setFilterAnimationWindow={visStateActions.setFilterAnimationWindow}
                   toggleAnimation={visStateActions.toggleFilterAnimation}
+                  exportAnimation={exportAnimation}
                   updateAnimationSpeed={visStateActions.updateFilterAnimationSpeed}
                   resetAnimation={resetAnimation}
                   isAnimatable={!animationConfig || !animationConfig.isAnimating}
diff --git a/src/components/src/common/animation-control/animation-control.tsx b/src/components/src/common/animation-control/animation-control.tsx
index e49f64cab5..5160765754 100644
--- a/src/components/src/common/animation-control/animation-control.tsx
+++ b/src/components/src/common/animation-control/animation-control.tsx
@@ -91,6 +91,7 @@ export type AnimationControlProps = {
   updateAnimationSpeed?: (val: number) => void;
   setAnimationWindow?: (id: string) => void;
   toggleAnimation: () => void;
+  exportAnimation?: () => void;
   resetAnimation?: () => void;
   setTimelineValue: (value: number[]) => void;
   showTimeDisplay?: boolean;
@@ -118,6 +119,7 @@ function AnimationControlFactory(
     isAnimating,
     resetAnimation,
     toggleAnimation,
+    exportAnimation,
     updateAnimationSpeed,
     setTimelineValue,
     setAnimationWindow,
@@ -153,6 +155,7 @@ function AnimationControlFactory(
               isAnimating={isAnimating}
               pauseAnimation={toggleAnimation}
               resetAnimation={resetAnimation}
+              exportAnimation={exportAnimation}
               speed={speed}
               updateAnimationSpeed={updateAnimationSpeed}
               setFilterAnimationWindow={setAnimationWindow}
diff --git a/src/components/src/common/animation-control/export-video-control.tsx b/src/components/src/common/animation-control/export-video-control.tsx
new file mode 100644
index 0000000000..f84b886537
--- /dev/null
+++ b/src/components/src/common/animation-control/export-video-control.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Tooltip} from '../styled-components';
+import IconButton from '../icon-button';
+
+const DELAY_SHOW = 500;
+
+function ExportVideoControlFactory() {
+  const ExportVideoControl = ({
+    showAnimationWindowControl,
+    btnStyle,
+    buttonHeight,
+    playbackIcons,
+    exportAnimation
+  }) => {
+    return showAnimationWindowControl || !exportAnimation ? null : (
+      <IconButton
+        data-tip
+        data-for="animate-export"
+        className="playback-control-button"
+        onClick={exportAnimation}
+        {...btnStyle}
+      >
+        <playbackIcons.export height={buttonHeight} />
+        <Tooltip id="animate-export" place="top" delayShow={DELAY_SHOW} effect="solid">
+          <FormattedMessage id="tooltip.export" />
+        </Tooltip>
+      </IconButton>
+    );
+  };
+
+  return ExportVideoControl;
+}
+
+export default ExportVideoControlFactory;
diff --git a/src/components/src/common/animation-control/playback-controls.tsx b/src/components/src/common/animation-control/playback-controls.tsx
index cfd3dc3aed..7dd9d64814 100644
--- a/src/components/src/common/animation-control/playback-controls.tsx
+++ b/src/components/src/common/animation-control/playback-controls.tsx
@@ -29,6 +29,7 @@ import AnimationWindowControlFactory, {AnimationItem} from './animation-window-c
 import ResetControlFactory from './reset-control';
 import PlayControlFactory from './play-control';
 import SpeedControlFactory from './speed-control';
+import ExportVideoControlFactory from './export-video-control';
 
 const DEFAULT_BUTTON_HEIGHT = '20px';
 
@@ -83,6 +84,7 @@ interface PlaybackControlsProps {
   pauseAnimation?: () => void;
   resetAnimation?: () => void;
   startAnimation: () => void;
+  exportAnimation?: () => void;
   playbackIcons?: typeof DEFAULT_ICONS;
   animationItems?: {[key: string]: AnimationItem};
   buttonStyle?: string;
@@ -97,7 +99,8 @@ PlaybackControlsFactory.deps = [
   WindowActionControlFactory,
   AnimationWindowControlFactory,
   ResetControlFactory,
-  PlayControlFactory
+  PlayControlFactory,
+  ExportVideoControlFactory
 ];
 
 function PlaybackControlsFactory(
@@ -105,14 +108,16 @@ function PlaybackControlsFactory(
   WindowActionControl,
   AnimationWindowControl,
   ResetControl,
-  PlayControl
+  PlayControl,
+  ExportVideoControl
 ) {
   const PLAYBACK_CONTROLS_DEFAULT_ACTION_COMPONENTS = [
     PlayControl,
     SpeedControlFactory(AnimationSpeedSlider),
     ResetControl,
     WindowActionControl,
-    AnimationWindowControl
+    AnimationWindowControl,
+    ExportVideoControl
   ];
 
   // eslint-disable-next-line complexity
@@ -127,6 +132,7 @@ function PlaybackControlsFactory(
     pauseAnimation,
     resetAnimation,
     startAnimation,
+    exportAnimation,
     playbackIcons,
     animationItems,
     buttonStyle,
@@ -175,6 +181,7 @@ function PlaybackControlsFactory(
             pauseAnimation={pauseAnimation}
             resetAnimation={resetAnimation}
             startAnimation={startAnimation}
+            exportAnimation={exportAnimation}
             playbackIcons={playbackIcons}
             isSpeedControlVisible={isSpeedControlVisible}
             speed={speed}
@@ -194,7 +201,8 @@ function PlaybackControlsFactory(
     isAnimatable: true,
     pauseAnimation: nop,
     resetAnimation: nop,
-    startAnimation: nop
+    startAnimation: nop,
+    exportAnimation: nop
   };
 
   return PlaybackControls;
diff --git a/src/components/src/common/time-range-slider.tsx b/src/components/src/common/time-range-slider.tsx
index 8ab159c012..163671fde8 100644
--- a/src/components/src/common/time-range-slider.tsx
+++ b/src/components/src/common/time-range-slider.tsx
@@ -30,6 +30,7 @@ import {HistogramBin, LineChart, Timeline} from '@kepler.gl/types';
 import AnimationControlFactory from './animation-control/animation-control';
 
 const animationControlWidth = 176;
+const animationControlExportWidth = 19;
 
 interface StyledSliderContainerProps {
   isEnlarged?: boolean;
@@ -53,6 +54,7 @@ type TimeRangeSliderProps = {
   animationWindow: string;
   resetAnimation?: () => void;
   toggleAnimation: () => void;
+  exportAnimation?: () => void;
   updateAnimationSpeed?: (val: number) => void;
   setFilterAnimationWindow?: (id: string) => void;
   onChange: (v: number[]) => void;
@@ -113,15 +115,17 @@ export default function TimeRangeSliderFactory(
       updateAnimationSpeed,
       setFilterAnimationWindow,
       toggleAnimation,
+      exportAnimation,
       onChange,
       timeline
     } = props;
 
     const throttledOnchange = useMemo(() => throttle(onChange, 20), [onChange]);
+    const width = animationControlWidth + (exportAnimation ? animationControlExportWidth : 0);
 
     const style = useMemo(
       () => ({
-        width: isEnlarged ? `calc(100% - ${animationControlWidth}px)` : '100%'
+        width: isEnlarged ? `calc(100% - ${width}px)` : '100%'
       }),
       [isEnlarged]
     );
@@ -167,6 +171,7 @@ export default function TimeRangeSliderFactory(
               updateAnimationSpeed={updateAnimationSpeed}
               setTimelineValue={throttledOnchange}
               setAnimationWindow={setFilterAnimationWindow}
+              exportAnimation={exportAnimation}
               showTimeDisplay={false}
               timeline={timeline}
             />
@@ -174,13 +179,14 @@ export default function TimeRangeSliderFactory(
           {isEnlarged && !isMinified ? (
             <PlaybackControls
               isAnimatable={isAnimatable}
-              width={animationControlWidth}
+              width={width}
               speed={speed}
               animationWindow={animationWindow}
               updateAnimationSpeed={updateAnimationSpeed}
               setFilterAnimationWindow={setFilterAnimationWindow}
               pauseAnimation={toggleAnimation}
               resetAnimation={resetAnimation}
+              exportAnimation={exportAnimation}
               isAnimating={isAnimating}
               startAnimation={toggleAnimation}
             />
diff --git a/src/components/src/filters/time-range-filter.tsx b/src/components/src/filters/time-range-filter.tsx
index 240ab69bc9..ac2e456e88 100644
--- a/src/components/src/filters/time-range-filter.tsx
+++ b/src/components/src/filters/time-range-filter.tsx
@@ -60,6 +60,7 @@ function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSlid
     setFilter,
     isAnimatable,
     toggleAnimation,
+    exportAnimation,
     hideTimeTitle,
     timeline
   }) => (
@@ -67,6 +68,7 @@ function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSlid
       {...timeRangeSliderFieldsSelector(filter)}
       onChange={setFilter}
       toggleAnimation={toggleAnimation}
+      exportAnimation={exportAnimation}
       isAnimatable={isAnimatable}
       hideTimeTitle={hideTimeTitle}
       timeline={timeline}
diff --git a/src/components/src/filters/time-widget.tsx b/src/components/src/filters/time-widget.tsx
index bfb30d9f43..1fe4a7d51b 100644
--- a/src/components/src/filters/time-widget.tsx
+++ b/src/components/src/filters/time-widget.tsx
@@ -47,6 +47,7 @@ function TimeWidgetFactory(
     setFilterAnimationTime,
     onClose,
     resetAnimation,
+    exportAnimation,
     isAnimatable,
     updateAnimationSpeed,
     toggleAnimation,
@@ -62,6 +63,10 @@ function TimeWidgetFactory(
     ]);
 
     const _toggleAnimation = useCallback(() => toggleAnimation(index), [toggleAnimation, index]);
+    const _exportAnimation = useCallback(() => exportAnimation(/* index */), [
+      exportAnimation,
+      index
+    ]);
 
     const _onToggleMinify = useCallback(() => setMinified(!isMinified), [setMinified, isMinified]);
 
@@ -93,6 +98,7 @@ function TimeWidgetFactory(
           {...timeRangeSliderFieldsSelector(filter)}
           onChange={timeSliderOnChange}
           toggleAnimation={_toggleAnimation}
+          exportAnimation={_exportAnimation}
           updateAnimationSpeed={_updateAnimationSpeed}
           setFilterAnimationWindow={_setFilterAnimationWindow}
           hideTimeTitle={showTimeDisplay}
diff --git a/src/components/src/filters/types.ts b/src/components/src/filters/types.ts
index 2fa29caffe..bee9a9c101 100644
--- a/src/components/src/filters/types.ts
+++ b/src/components/src/filters/types.ts
@@ -38,6 +38,7 @@ export type TimeRangeFilterProps = {
   hideTimeTitle: boolean;
   setFilter: (v: number[]) => void;
   toggleAnimation: () => void;
+  exportAnimation?: () => void;
   timeline: Timeline;
 };
 
@@ -72,6 +73,7 @@ export type TimeWidgetProps = {
   showTimeDisplay: boolean;
   isAnimatable: boolean;
   resetAnimation: () => void;
+  exportAnimation: () => void;
   onClose: () => void;
   setFilterAnimationTime: ActionHandler<typeof setFilterAnimationTime>;
   updateAnimationSpeed: ActionHandler<typeof updateFilterAnimationSpeed>;
diff --git a/src/components/src/index.ts b/src/components/src/index.ts
index 3986b498a2..0687855a75 100644
--- a/src/components/src/index.ts
+++ b/src/components/src/index.ts
@@ -175,6 +175,7 @@ export {default as WindowActionControlFactory} from './common/animation-control/
 export {default as PlayControlFactory} from './common/animation-control/play-control';
 export {default as ResetControlFactory} from './common/animation-control/reset-control';
 export {default as SpeedControlFactory} from './common/animation-control/speed-control';
+export {default as ExportVideoControlFactory} from './common/animation-control/export-video-control';
 export {default as AnimationWindowControlFactory} from './common/animation-control/animation-window-control';
 export {default as FloatingTimeDisplayFactory} from './common/animation-control/floating-time-display';
 export {default as AnimationSpeedSliderFactory} from './common/animation-control/animation-speed-slider';
diff --git a/src/components/src/modal-container.tsx b/src/components/src/modal-container.tsx
index 5af57cbbe5..0acd5e2554 100644
--- a/src/components/src/modal-container.tsx
+++ b/src/components/src/modal-container.tsx
@@ -39,6 +39,7 @@ import OverWriteMapModalFactory from './modals/overwrite-map-modal';
 import DataTableModalFactory from './modals/data-table-modal';
 import LoadDataModalFactory from './modals/load-data-modal';
 import ExportImageModalFactory from './modals/export-image-modal';
+import ExportVideoModalFactory from './modals/export-video-modal';
 import ExportDataModalFactory from './modals/export-data-modal';
 import ExportMapModalFactory from './modals/export-map-modal/export-map-modal';
 import AddMapStyleModalFactory from './modals/add-map-style-modal';
@@ -58,6 +59,7 @@ import {
   DELETE_DATA_ID,
   EXPORT_DATA_ID,
   EXPORT_IMAGE_ID,
+  EXPORT_VIDEO_ID,
   EXPORT_MAP_ID,
   ADD_MAP_STYLE_ID,
   SAVE_MAP_ID,
@@ -134,6 +136,7 @@ ModalContainerFactory.deps = [
   DataTableModalFactory,
   LoadDataModalFactory,
   ExportImageModalFactory,
+  ExportVideoModalFactory,
   ExportDataModalFactory,
   ExportMapModalFactory,
   AddMapStyleModalFactory,
@@ -148,6 +151,7 @@ export default function ModalContainerFactory(
   DataTableModal: ReturnType<typeof DataTableModalFactory>,
   LoadDataModal: ReturnType<typeof LoadDataModalFactory>,
   ExportImageModal: ReturnType<typeof ExportImageModalFactory>,
+  ExportVideoModal: ReturnType<typeof ExportVideoModalFactory>,
   ExportDataModal: ReturnType<typeof ExportDataModalFactory>,
   ExportMapModal: ReturnType<typeof ExportMapModalFactory>,
   AddMapStyleModal: ReturnType<typeof AddMapStyleModalFactory>,
@@ -380,6 +384,23 @@ export default function ModalContainerFactory(
               }
             };
             break;
+          case EXPORT_VIDEO_ID:
+            template = (
+              <ExportVideoModal
+                mapStyle={mapStyle}
+                mapState={mapState}
+                visState={visState}
+                exportVideo={uiState.exportVideo}
+                onUpdateVideoSetting={uiStateActions.setExportVideoSetting}
+              />
+            );
+            modalProps = {
+              title: 'modal.title.exportVideo',
+              cssStyle: '',
+              footer: false,
+              onCancel: this._closeModal
+            };
+            break;
           case EXPORT_DATA_ID:
             template = (
               <ExportDataModal
diff --git a/src/components/src/modals/export-video-modal.tsx b/src/components/src/modals/export-video-modal.tsx
new file mode 100644
index 0000000000..4fe9e7ae4e
--- /dev/null
+++ b/src/components/src/modals/export-video-modal.tsx
@@ -0,0 +1,71 @@
+import React, {useMemo} from 'react';
+import {WithIntlProps} from 'react-intl';
+
+import {setExportVideoSetting} from '@kepler.gl/actions';
+import {ExportVideo, MapState} from '@kepler.gl/types';
+import {VisState} from '@kepler.gl/schemas';
+import {MapStyle} from '@kepler.gl/reducers';
+
+// Hook up mutual hubble imports
+import {ExportVideoPanelContainer, injectKeplerUI} from '@hubble.gl/react';
+import {StyledModalContent, Button, Input} from '../common/styled-components';
+import * as Icons from '../common/icons';
+import ItemSelector from '../common/item-selector/item-selector';
+import Slider from '../common/slider/slider';
+import LoadingSpinner from '../common/loading-spinner';
+import ModalTabsFactory from './modal-tabs';
+
+const KEPLER_UI = {
+  Button,
+  Icons,
+  Input,
+  ItemSelector,
+  Slider,
+  ModalTabsFactory,
+  LoadingSpinner
+};
+
+export type ExportVideoModalProps = WithIntlProps<{
+  visState: VisState;
+  mapState: MapState;
+  mapStyle: MapStyle;
+  exportVideo: ExportVideo;
+  onUpdateVideoSetting: typeof setExportVideoSetting;
+  glContext?: any;
+}>;
+
+const ExportVideoModalFactory = () => {
+  const ExportVideoModal: React.FC<ExportVideoModalProps> = ({
+    exportVideo,
+    onUpdateVideoSetting,
+    visState,
+    mapState,
+    mapStyle,
+    glContext
+  }) => {
+    const hubbleVisState = useMemo(() => {
+      const layerOrder: number[] = [];
+      visState.layerOrder.forEach(layerOrderId => {
+        const id = visState.layers.findIndex(l => l.id === layerOrderId);
+        layerOrder.push(id);
+      });
+      return {...visState, layerOrder};
+    }, [visState]);
+
+    return (
+      <StyledModalContent className="export-video-modal">
+        <ExportVideoPanelContainer
+          initialState={exportVideo}
+          mapData={{visState: hubbleVisState, mapState, mapStyle}}
+          onSettingsChange={onUpdateVideoSetting}
+          header={false}
+          glContext={glContext}
+        />
+      </StyledModalContent>
+    );
+  };
+
+  return injectKeplerUI(ExportVideoModal, KEPLER_UI);
+};
+
+export default ExportVideoModalFactory;
diff --git a/src/constants/src/default-settings.ts b/src/constants/src/default-settings.ts
index bcb810716e..62c406fbbf 100644
--- a/src/constants/src/default-settings.ts
+++ b/src/constants/src/default-settings.ts
@@ -67,6 +67,13 @@ export const ADD_DATA_ID = 'addData';
  * @public
  */
 export const EXPORT_IMAGE_ID = 'exportImage';
+/**
+ * Modal id: export video modal
+ * @constant
+ * @type {string}
+ * @public
+ */
+export const EXPORT_VIDEO_ID = 'exportVideo';
 /**
  * Modal id: export data modal
  * @constant
diff --git a/src/localization/src/translations/en.ts b/src/localization/src/translations/en.ts
index e49df61b77..1b7c115b7d 100644
--- a/src/localization/src/translations/en.ts
+++ b/src/localization/src/translations/en.ts
@@ -253,6 +253,7 @@ export default {
     exportImage: 'Export Image',
     exportData: 'Export Data',
     exportMap: 'Export Map',
+    exportVideo: 'Export Video',
     shareMapURL: 'Share Map URL',
     saveMap: 'Save Map',
     select: 'Select',
@@ -300,6 +301,7 @@ export default {
       mapLegendTitle: 'Map Legend',
       mapLegendAdd: 'Add legend on map'
     },
+    exportVideo: {},
     exportData: {
       datasetTitle: 'Dataset',
       datasetSubtitle: 'Choose the datasets you want to export',
@@ -524,5 +526,10 @@ export default {
   'Bug Report': 'Bug Report',
   'User Guide': 'User Guide',
   Save: 'Save',
-  Share: 'Share'
+  Share: 'Share',
+
+  exportVideoModal: {
+    animation: 'Animation',
+    settings: 'Settings'
+  }
 };
diff --git a/src/reducers/src/ui-state-updaters.ts b/src/reducers/src/ui-state-updaters.ts
index 5745461c26..cf645f716d 100644
--- a/src/reducers/src/ui-state-updaters.ts
+++ b/src/reducers/src/ui-state-updaters.ts
@@ -48,7 +48,8 @@ import {
   ExportMap,
   MapControlItem,
   MapControls,
-  UiState
+  UiState,
+  ExportVideo
 } from '@kepler.gl/types';
 
 export const DEFAULT_ACTIVE_SIDE_PANEL = 'layer';
@@ -167,6 +168,14 @@ export const DEFAULT_EXPORT_IMAGE: ExportImage = {
   escapeXhtmlForWebpack: true
 };
 
+/**
+ * Default video export config (uses hubble.gl defaults)
+ * @memberof uiStateUpdaters
+ * @constant
+ * @public
+ */
+export const DEFAULT_EXPORT_VIDEO: ExportVideo = {};
+
 export const DEFAULT_LOAD_FILES = {
   fileLoading: false
 };
@@ -254,6 +263,8 @@ export const INITIAL_UI_STATE: UiState = {
   visibleDropdown: null,
   // export image modal ui
   exportImage: DEFAULT_EXPORT_IMAGE,
+  // export video modal ui
+  exportVideo: DEFAULT_EXPORT_VIDEO,
   // export data modal ui
   exportData: DEFAULT_EXPORT_DATA,
   // html export
@@ -540,6 +551,24 @@ export const startExportingImageUpdater = (
   ])(state);
 };
 
+/**
+ * @memberof uiStateUpdaters
+ * @param state `uiState`
+ * @returns nextState
+ * @public
+ */
+export const setExportVideoSettingUpdater = (
+  state: UiState,
+  {payload: newSetting}: UIStateActions.SetExportVideoSettingUpdaterAction
+): UiState => {
+  const exportVideo = {...state.exportVideo, ...newSetting};
+
+  return {
+    ...state,
+    exportVideo
+  };
+};
+
 /**
  * Set selected dataset for export
  * @memberof uiStateUpdaters
diff --git a/src/reducers/src/ui-state.ts b/src/reducers/src/ui-state.ts
index 8000d5a520..89b228d60d 100644
--- a/src/reducers/src/ui-state.ts
+++ b/src/reducers/src/ui-state.ts
@@ -45,6 +45,8 @@ const actionHandler = {
   [ActionTypes.CLEANUP_EXPORT_IMAGE]: uiStateUpdaters.cleanupExportImageUpdater,
   [ActionTypes.START_EXPORTING_IMAGE]: uiStateUpdaters.startExportingImageUpdater,
 
+  [ActionTypes.SET_EXPORT_VIDEO_SETTING]: uiStateUpdaters.setExportVideoSettingUpdater,
+
   [ActionTypes.SET_EXPORT_SELECTED_DATASET]: uiStateUpdaters.setExportSelectedDatasetUpdater,
   [ActionTypes.SET_EXPORT_DATA_TYPE]: uiStateUpdaters.setExportDataTypeUpdater,
   [ActionTypes.SET_EXPORT_FILTERED]: uiStateUpdaters.setExportFilteredUpdater,
diff --git a/src/types/reducers.d.ts b/src/types/reducers.d.ts
index 0f4a7ec52a..304ad76d99 100644
--- a/src/types/reducers.d.ts
+++ b/src/types/reducers.d.ts
@@ -334,6 +334,14 @@ export declare type ExportImage = {
   center: boolean;
 };
 
+export type ExportVideo = {
+  mediaType?: string;
+  cameraPreset?: string;
+  fileName?: string;
+  resolution?: string;
+  durationMs?: number;
+};
+
 export type ExportData = {
   selectedDataset: string;
   dataType: string;
@@ -395,6 +403,8 @@ export type UiState = {
   visibleDropdown: string | null;
   // export image modal ui
   exportImage: ExportImage;
+  // export video modal ui
+  exportVideo: ExportVideo;
   // export data modal ui
   exportData: ExportData;
   // html export
diff --git a/test/browser/components/modals/export-video-modal-test.js b/test/browser/components/modals/export-video-modal-test.js
new file mode 100644
index 0000000000..1287e991ec
--- /dev/null
+++ b/test/browser/components/modals/export-video-modal-test.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import test from 'tape-catch';
+import sinon from 'sinon';
+
+import {ExportVideoPanelContainer} from '@hubble.gl/react';
+import {createHeadlessContext} from '@luma.gl/test-utils';
+
+import {IntlWrapper, mountWithTheme} from 'test/helpers/component-utils';
+
+import {ExportVideoModalFactory, appInjector} from '@kepler.gl/components';
+import {
+  INITIAL_UI_STATE,
+  INITIAL_VIS_STATE,
+  INITIAL_MAP_STATE,
+  INITIAL_MAP_STYLE
+} from '@kepler.gl/reducers';
+
+const ExportVideoModal = appInjector.get(ExportVideoModalFactory);
+
+test('Components -> ExportVideoModal.mount', t => {
+  const onUpdateVideoSetting = sinon.spy();
+  let wrapper;
+
+  const glContext = createHeadlessContext({width: 1280, height: 720});
+
+  const mapStyle = {
+    ...INITIAL_MAP_STYLE,
+    bottomMapStyle: {id: 'id', owner: 'user'}
+  };
+
+  t.doesNotThrow(() => {
+    wrapper = mountWithTheme(
+      <IntlWrapper>
+        <ExportVideoModal
+          exportVideo={INITIAL_UI_STATE.exportVideo}
+          onUpdateVideoSetting={onUpdateVideoSetting}
+          mapState={INITIAL_MAP_STATE}
+          mapStyle={mapStyle}
+          visState={INITIAL_VIS_STATE}
+          glContext={glContext}
+        />
+      </IntlWrapper>
+    );
+  }, 'Show not fail with props');
+
+  t.equal(
+    wrapper.find(ExportVideoPanelContainer).length,
+    1,
+    'should render ExportVideoPanelContainer'
+  );
+  /*
+  const ratioOpts = wrapper
+    .find('#export-video-modal__option_ratio')
+    .at(0)
+    .find(SelectionButton)
+    .map(c => c.text());
+  t.deepEqual(ratioOpts, ['Original Screen', '4:3', '16:9'], 'should render correct ratio options');
+  t.ok(
+    wrapper
+      .find('#export-image-modal__option_ratio')
+      .at(0)
+      .find(SelectionButton)
+      .at(0)
+      .props('selected'),
+    'first option should be selected'
+  );
+  wrapper
+    .find('#export-image-modal__option_ratio')
+    .at(0)
+    .find(SelectionButton)
+    .at(0)
+    .simulate('click');
+  t.ok(onUpdateImageSetting.calledWith({ratio: 'SCREEN'}), 'should call update ratio');
+  const resolutionOpts = wrapper
+    .find('#export-image-modal__option_resolution')
+    .at(0)
+    .find(SelectionButton)
+    .map(c => c.text());
+  t.deepEqual(resolutionOpts, ['1x', '2x'], 'should render correct ratio options');
+  t.ok(
+    wrapper
+      .find('#export-image-modal__option_resolution')
+      .at(0)
+      .find(SelectionButton)
+      .at(0)
+      .props('selected'),
+    'first option should be selected'
+  );
+  wrapper
+    .find('#export-image-modal__option_resolution')
+    .at(0)
+    .find(SelectionButton)
+    .at(1)
+    .simulate('click');
+  t.ok(onUpdateImageSetting.calledWith({resolution: 'TWO_X'}), 'should call update resolution');
+  */
+
+  t.end();
+});
diff --git a/test/browser/components/modals/index.js b/test/browser/components/modals/index.js
index 2b612d2a10..c7a35344d9 100644
--- a/test/browser/components/modals/index.js
+++ b/test/browser/components/modals/index.js
@@ -20,4 +20,5 @@
 
 import './data-table-modal-test';
 import './export-image-modal-test';
+import './export-video-modal-test';
 import './load-data-modal-test';
diff --git a/yarn.lock b/yarn.lock
index 475d1bc43b..f3b0c7b84b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1808,13 +1808,6 @@
     "@formatjs/intl-localematcher" "0.4.2"
     tslib "^2.4.0"
 
-"@formatjs/intl-displaynames@^1.2.0":
-  version "1.2.10"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-1.2.10.tgz#bb9625cca90b099978cd967c6a98aaf4e23fc878"
-  integrity sha512-GROA2RP6+7Ouu0WnHFF78O5XIU7pBfI19WM1qm93l6MFWibUk67nCfVCK3VAYJkLy8L8ZxjkYT11VIAfvSz8wg==
-  dependencies:
-    "@formatjs/intl-utils" "^2.3.0"
-
 "@formatjs/intl-listformat@7.4.2":
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.4.2.tgz#c8d86d3b15eead41f74748d1c79d6450fd1bad82"
@@ -1824,13 +1817,6 @@
     "@formatjs/intl-localematcher" "0.4.2"
     tslib "^2.4.0"
 
-"@formatjs/intl-listformat@^1.4.1":
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-1.4.8.tgz#70b81005e7dcf74329cb5b314a940ce5fce36cd0"
-  integrity sha512-WNMQlEg0e50VZrGIkgD5n7+DAMGt3boKi1GJALfhFMymslJb5i+5WzWxyj/3a929Z6MAFsmzRIJjKuv+BxKAOQ==
-  dependencies:
-    "@formatjs/intl-utils" "^2.3.0"
-
 "@formatjs/intl-localematcher@0.4.2":
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz#7e6e596dbaf2f0c5a7c22da5a01d5c55f4c37e9a"
@@ -1838,25 +1824,6 @@
   dependencies:
     tslib "^2.4.0"
 
-"@formatjs/intl-relativetimeformat@^4.5.9":
-  version "4.5.16"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-4.5.16.tgz#7449cef3213dd66d25924ca41f125f87b58df95a"
-  integrity sha512-IQ0haY97oHAH5OYUdykNiepdyEWj3SAT+Fp9ZpR85ov2JNiFx+12WWlxlVS8ehdyncC2ZMt/SwFIy2huK2+6/A==
-  dependencies:
-    "@formatjs/intl-utils" "^2.3.0"
-
-"@formatjs/intl-unified-numberformat@^3.2.0":
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.7.tgz#9995a24568908188e716d81a1de5b702b2ee00e2"
-  integrity sha512-KnWgLRHzCAgT9eyt3OS34RHoyD7dPDYhRcuKn+/6Kv2knDF8Im43J6vlSW6Hm1w63fNq3ZIT1cFk7RuVO3Psag==
-  dependencies:
-    "@formatjs/intl-utils" "^2.3.0"
-
-"@formatjs/intl-utils@^2.2.0", "@formatjs/intl-utils@^2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz#2dc8c57044de0340eb53a7ba602e59abf80dc799"
-  integrity sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==
-
 "@formatjs/intl@2.9.3":
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.9.3.tgz#e570c4b1afb173dfb1f80a42624425dde9841329"
@@ -1875,31 +1842,38 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@hubble.gl/core@1.2.0-alpha.6":
-  version "1.2.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/@hubble.gl/core/-/core-1.2.0-alpha.6.tgz#24aa280218e5b6dd27275841e73edbe8b787a588"
-  integrity sha512-+v8v+J1CSpxgwPzGg79RT5Hbr4Mcqm3vMDSPKlX7YdAkatTRDAq0CWpdc9VvIFpt7SpGUFbOxKDsM1lKn7amXQ==
-  dependencies:
-    "@loaders.gl/core" "^2.1.6"
-    "@loaders.gl/video" "2.2.0-alpha.1"
+"@hubble.gl/core@1.3.7":
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/@hubble.gl/core/-/core-1.3.7.tgz#13e42a6f7e40c1c8d6264f8f38b9487f638acc10"
+  integrity sha512-V0k3QaTDzt4Nf/5jESZj/rri+17ghpo+0+4aRBwQnx1TW+9IFyan738TOol8gLgpNvrsX38gcdrogt0aiRvUNw==
+  dependencies:
+    "@loaders.gl/core" "^3.0.12"
+    "@loaders.gl/video" "^3.0.12"
+    "@loaders.gl/zip" "^3.0.12"
+    "@math.gl/core" "^3.4.2"
+    "@math.gl/web-mercator" "^3.4.2"
     downloadjs "^1.4.7"
     popmotion "^8.6.10"
-    webm-writer "^0.2.2"
+    probe.gl "^3.4.0"
+    webm-writer "^1.0.0"
 
-"@hubble.gl/react@1.2.0-alpha.6":
-  version "1.2.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/@hubble.gl/react/-/react-1.2.0-alpha.6.tgz#79d0fcf07c69bbef9ccbb9eb5a1ed4afb4a757db"
-  integrity sha512-kurLmjTwIoLqLMlP0lVTQDKJ32jsJEDC0JzHw2fRWH8/nX3pd7pTJA69RKaxtdBYGlxx45GOFSrWYQyJy3TUqQ==
+"@hubble.gl/react@1.3.7":
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/@hubble.gl/react/-/react-1.3.7.tgz#a5d281e8c4b17b4feae9f8535c130cd17d6f15d9"
+  integrity sha512-+nEJzpZ0FXDvP68MrNkoaufRr0284wVZM/rXcgvcnZj0fIvhdbHNYheaZrDYxMdHZki9Iq7kwzVMtTS1vLsiYQ==
   dependencies:
+    "@loaders.gl/core" "^3.0.12"
+    "@loaders.gl/zip" "^3.0.12"
     "@turf/helpers" "^5.1.5"
     "@turf/transform-translate" "^5.1.5"
     classnames "^2.2.6"
     fuzzy "^0.1.3"
     global "^4.4.0"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.5.0"
     lodash.uniqby "^4.7.0"
     popmotion "^8.6.10"
     prop-types "^15.7.2"
-    react-intl "^3.12.0"
     react-lifecycles-compat "^3.0.4"
     react-map-gl "^5.2.10"
     react-modal "^3.11.2"
@@ -2177,7 +2151,7 @@
     "@math.gl/polygon" "4.0.0"
     apache-arrow "^13.0.0"
 
-"@loaders.gl/core@^2.1.6", "@loaders.gl/core@^3.4.13", "@loaders.gl/core@^4.1.0-alpha.2":
+"@loaders.gl/core@^3.0.12", "@loaders.gl/core@^3.4.13", "@loaders.gl/core@^4.1.0-alpha.2":
   version "4.1.0-alpha.2"
   resolved "https://registry.yarnpkg.com/@loaders.gl/core/-/core-4.1.0-alpha.2.tgz#d5e348f37fac9a00964d9c8b6f851049c15d2a7f"
   integrity sha512-Tkw5rcTGoTpTwGhN6aGeNgk1YX3NWMmVNHzwCpHnqWV0n+hgLSl6Sr1cUM9yTH6Z/AI9qEZFt1EJnkclfmRGKQ==
@@ -2283,7 +2257,7 @@
     "@loaders.gl/loader-utils" "4.1.0-alpha.2"
     "@loaders.gl/schema" "4.1.0-alpha.2"
 
-"@loaders.gl/loader-utils@3.4.14", "@loaders.gl/loader-utils@4.1.0-alpha.2", "@loaders.gl/loader-utils@^2.1.3", "@loaders.gl/loader-utils@^3.4.13", "@loaders.gl/loader-utils@^4.1.0-alpha.2":
+"@loaders.gl/loader-utils@3.4.14", "@loaders.gl/loader-utils@4.1.0-alpha.2", "@loaders.gl/loader-utils@^3.4.13", "@loaders.gl/loader-utils@^4.1.0-alpha.2":
   version "4.1.0-alpha.2"
   resolved "https://registry.yarnpkg.com/@loaders.gl/loader-utils/-/loader-utils-4.1.0-alpha.2.tgz#811c30b295906aac509bf63704b4dc3aace45d5e"
   integrity sha512-hbU2vdTqCzlNQlFQ/C4VftPXWEKgmPDBUCdXOANCVWcNJW6Qcjj0MSGEKBM+6tlFWYX/OaV8tChPLysVwR6/Sw==
@@ -2378,12 +2352,13 @@
     "@math.gl/web-mercator" "^3.5.1"
     "@probe.gl/stats" "^4.0.1"
 
-"@loaders.gl/video@2.2.0-alpha.1":
-  version "2.2.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@loaders.gl/video/-/video-2.2.0-alpha.1.tgz#1bb09e9e507605a72c6e8a13b34926b69c717191"
-  integrity sha512-4NDe3fNPOTS4MvPxlxrbqr/kKgkB9tOVY2in/s/oYBo0uiDK+WSU0AztnyKxF1b/EsHzTEIzhOEhjvSwbgRQgQ==
+"@loaders.gl/video@^3.0.12":
+  version "3.4.14"
+  resolved "https://registry.yarnpkg.com/@loaders.gl/video/-/video-3.4.14.tgz#6b74670eee7bec3e89953b3a412de056a82850e5"
+  integrity sha512-jnlrqQCt4XWGuWIq2k4z8F05mWpuVnUkSQ49hhaoYhhtIFHwefkCwcmP8HkM2mQUN011RWBjUHuvyshkcGwqmQ==
   dependencies:
-    "@loaders.gl/loader-utils" "^2.1.3"
+    "@loaders.gl/loader-utils" "3.4.14"
+    "@loaders.gl/worker-utils" "3.4.14"
     gifshot "^0.4.5"
 
 "@loaders.gl/wkt@4.1.0-alpha.2", "@loaders.gl/wkt@^4.1.0-alpha.2":
@@ -2432,6 +2407,13 @@
     "@loaders.gl/schema" "3.4.14"
     fast-xml-parser "^4.2.5"
 
+"@loaders.gl/zip@^3.0.12":
+  version "3.4.14"
+  resolved "https://registry.yarnpkg.com/@loaders.gl/zip/-/zip-3.4.14.tgz#796f8aa32a45d70c70e2d2d8c0f34b94f9623dcc"
+  integrity sha512-83lp7ZVleJuPdRC/shCl8C6k5yoPY7sFVyN5iJSA29HhkQmA77E1Pxv6SSNLnySAwB76pbB76LBSYdfX0g0cUQ==
+  dependencies:
+    jszip "^3.1.5"
+
 "@luma.gl/constants@8.5.20", "@luma.gl/constants@^8.5.20", "@luma.gl/constants@^8.5.21":
   version "8.5.20"
   resolved "https://registry.yarnpkg.com/@luma.gl/constants/-/constants-8.5.20.tgz#91de116f68110fb28a000b59747d34d54bc06ab2"
@@ -2631,7 +2613,7 @@
     "@babel/runtime" "^7.12.0"
     gl-matrix "^3.0.0"
 
-"@math.gl/core@3.6.3", "@math.gl/core@^3.6.2":
+"@math.gl/core@3.6.3", "@math.gl/core@^3.4.2", "@math.gl/core@^3.6.2":
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/@math.gl/core/-/core-3.6.3.tgz#a6bf796ed421093099749d609de8d99a3ac20a53"
   integrity sha512-jBABmDkj5uuuE0dTDmwwss7Cup5ZwQ6Qb7h1pgvtkEutTrhkcv8SuItQNXmF45494yIHeoGue08NlyeY6wxq2A==
@@ -2713,6 +2695,14 @@
   resolved "https://registry.yarnpkg.com/@math.gl/types/-/types-4.0.0.tgz#20c649dcef8459d9dd1f83a708d7410fe06a3309"
   integrity sha512-ZqU7o0LFaWQK/0wYobCwQKrKhRHaihps8oE74CLnWAdTTjXkM2vA8dU7vdx238QfXkNkz4Mv+KYklHpXMQJ8Hw==
 
+"@math.gl/web-mercator@^3.4.2", "@math.gl/web-mercator@^3.6.2":
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/@math.gl/web-mercator/-/web-mercator-3.6.3.tgz#ef91168e030eecffc788618d686e8a6c1d7a0bf8"
+  integrity sha512-UVrkSOs02YLehKaehrxhAejYMurehIHPfFQvPFZmdJHglHOU4V2cCUApTVEwOksvCp161ypEqVp+9H6mGhTTcw==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    gl-matrix "^3.4.0"
+
 "@math.gl/web-mercator@^3.5.1":
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/@math.gl/web-mercator/-/web-mercator-3.5.3.tgz#4cc7ba98a48580a18ad683206a6f6002fa9d2d7e"
@@ -2729,14 +2719,6 @@
     "@babel/runtime" "^7.12.0"
     gl-matrix "~3.3.0"
 
-"@math.gl/web-mercator@^3.6.2":
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/@math.gl/web-mercator/-/web-mercator-3.6.3.tgz#ef91168e030eecffc788618d686e8a6c1d7a0bf8"
-  integrity sha512-UVrkSOs02YLehKaehrxhAejYMurehIHPfFQvPFZmdJHglHOU4V2cCUApTVEwOksvCp161ypEqVp+9H6mGhTTcw==
-  dependencies:
-    "@babel/runtime" "^7.12.0"
-    gl-matrix "^3.4.0"
-
 "@mdn/browser-compat-data@^3.3.14":
   version "3.3.14"
   resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-3.3.14.tgz#b72a37c654e598f9ae6f8335faaee182bebc6b28"
@@ -2931,6 +2913,13 @@
     "@babel/runtime" "^7.0.0"
     "@probe.gl/env" "4.0.4"
 
+"@probe.gl/stats@3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@probe.gl/stats/-/stats-3.6.0.tgz#a1bb12860fa6f40b9c028f9eb575d7ada0b4dbdd"
+  integrity sha512-JdALQXB44OP4kUBN/UrQgzbJe4qokbVF4Y8lkIA8iVCFnjVowWIgkD/z/0QO65yELT54tTrtepw1jScjKB+rhQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
 "@probe.gl/stats@^3.5.0":
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/@probe.gl/stats/-/stats-3.5.0.tgz#774495772f06e898aae28c1d315c9edac07f3425"
@@ -3678,11 +3667,6 @@
   resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz#a3ff232bf7d5c55f38e4e45693eda2ebb545794d"
   integrity sha512-V46MYLFp08Wf2mmaBhvgjStM3tPa+2GAdy/iqoX+noX1//zje2x4XmrIU0cAwyClATsTmahbtoQ2EwP7I5WSiA==
 
-"@types/invariant@^2.2.31":
-  version "2.2.34"
-  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.34.tgz#05e4f79f465c2007884374d4795452f995720bbe"
-  integrity sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -10281,6 +10265,11 @@ image-size@^0.7.4:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.7.5.tgz#269f357cf5797cb44683dfa99790e54c705ead04"
   integrity sha512-Hiyv+mXHfFEP7LzUL/llg9RwFxxY+o9N3JVLIeG5E7iFIFAalxvRU9UZthBdYDEVnzHMgjnKJPPpay5BWf1g9g==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 immer@^9.0.7:
   version "9.0.12"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20"
@@ -10449,18 +10438,6 @@ interpret@^1.0.0, interpret@^1.4.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
-intl-format-cache@^4.2.21:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-4.3.1.tgz#484d31a9872161e6c02139349b259a6229ade377"
-  integrity sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q==
-
-intl-messageformat-parser@^3.6.4:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-3.6.4.tgz#5199d106d816c3dda26ee0694362a9cf823978fb"
-  integrity sha512-RgPGwue0mJtoX2Ax8EmMzJzttxjnva7gx0Q7mKJ4oALrTZvtmCeAw5Msz2PcjW4dtCh/h7vN/8GJCxZO1uv+OA==
-  dependencies:
-    "@formatjs/intl-unified-numberformat" "^3.2.0"
-
 intl-messageformat@10.5.3:
   version "10.5.3"
   resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.5.3.tgz#db0779d4a1988faa2977d76574489b7a25f0d5d0"
@@ -10471,14 +10448,6 @@ intl-messageformat@10.5.3:
     "@formatjs/icu-messageformat-parser" "2.6.2"
     tslib "^2.4.0"
 
-intl-messageformat@^7.8.4:
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-7.8.4.tgz#c29146a06b9cd26662978a4d95fff2b133e3642f"
-  integrity sha512-yS0cLESCKCYjseCOGXuV4pxJm/buTfyCJ1nzQjryHmSehlptbZbn9fnlk1I9peLopZGGbjj46yHHiTAEZ1qOTA==
-  dependencies:
-    intl-format-cache "^4.2.21"
-    intl-messageformat-parser "^3.6.4"
-
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -11847,6 +11816,16 @@ jsx-ast-utils@^1.3.4:
     array-includes "^3.1.2"
     object.assign "^4.1.2"
 
+jszip@^3.1.5:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
 just-curry-it@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/just-curry-it/-/just-curry-it-3.1.0.tgz#ab59daed308a58b847ada166edd0a2d40766fbc5"
@@ -11953,6 +11932,13 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -13697,7 +13683,7 @@ pad-left@^2.1.0:
   dependencies:
     repeat-string "^1.5.4"
 
-pako@~1.0.5:
+pako@~1.0.2, pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
@@ -14297,6 +14283,16 @@ pretty-ms@^2.1.0:
     parse-ms "^1.0.0"
     plur "^1.0.0"
 
+probe.gl@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/probe.gl/-/probe.gl-3.6.0.tgz#e816234412b27a70b9be029cb82c8cf96cd72659"
+  integrity sha512-19JydJWI7+DtR4feV+pu4Mn1I5TAc0xojuxVgZdXIyfmTLfUaFnk4OloWK1bKbPtkgGKLr2lnbnCXmpZEcEp9g==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    "@probe.gl/env" "3.6.0"
+    "@probe.gl/log" "3.6.0"
+    "@probe.gl/stats" "3.6.0"
+
 process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -14755,24 +14751,6 @@ react-hot-loader@^4.13.0:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-intl@^3.12.0:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-3.12.1.tgz#e9a783ea20302e9da25e4eda59e5593a43d2ec80"
-  integrity sha512-cgumW29mwROIqyp8NXStYsoIm27+8FqnxykiLSawWjOxGIBeLuN/+p2srei5SRIumcJefOkOIHP+NDck05RgHg==
-  dependencies:
-    "@formatjs/intl-displaynames" "^1.2.0"
-    "@formatjs/intl-listformat" "^1.4.1"
-    "@formatjs/intl-relativetimeformat" "^4.5.9"
-    "@formatjs/intl-unified-numberformat" "^3.2.0"
-    "@formatjs/intl-utils" "^2.2.0"
-    "@types/hoist-non-react-statics" "^3.3.1"
-    "@types/invariant" "^2.2.31"
-    hoist-non-react-statics "^3.3.2"
-    intl-format-cache "^4.2.21"
-    intl-messageformat "^7.8.4"
-    intl-messageformat-parser "^3.6.4"
-    shallow-equal "^1.2.1"
-
 react-intl@^6.3.0:
   version "6.4.7"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.4.7.tgz#28ec40350ff791a6a773f5e76b9e12835ae17e19"
@@ -16106,11 +16084,6 @@ sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shallow-equal@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
-  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
-
 shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
@@ -18477,10 +18450,10 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webm-writer@^0.2.2:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/webm-writer/-/webm-writer-0.2.5.tgz#cca049f392c5e47a328d83590e983f97e8f28fda"
-  integrity sha512-wzHOIZkvKDOC/GJdOalYlzH0NypLvlaXdUhliTkH7Y5akdmBl0TOVmRTPFW3yfw+cAYS3RMtu5nCYIGovDUsvw==
+webm-writer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/webm-writer/-/webm-writer-1.0.0.tgz#78367e435dddf9bed633dd98c7ca9b36438d9943"
+  integrity sha512-xafP4mzUqht03HBXP0Ov2YGsxfD08uncad9fQeshYwQXrcP6Z/4uxd1IUaGKqKigFPAgaD9xb6JEKA8SXLQMLA==
 
 webpack-bundle-analyzer@^3.3.2:
   version "3.9.0"