diff --git a/examples/prebuilt-react-integration/package.json b/examples/prebuilt-react-integration/package.json
index ef584acc99..8c838ca36b 100644
--- a/examples/prebuilt-react-integration/package.json
+++ b/examples/prebuilt-react-integration/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@100mslive/roomkit-react": "0.3.24-alpha.9",
+    "@100mslive/roomkit-react": "0.3.24",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json
index 71aa354131..af5c74f56e 100644
--- a/packages/hls-player/package.json
+++ b/packages/hls-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/hls-player",
-  "version": "0.3.24-alpha.9",
+  "version": "0.3.24",
   "description": "HLS client library which uses HTML5 Video element and Media Source Extension for playback",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
   "author": "100ms",
   "license": "MIT",
   "dependencies": {
-    "@100mslive/hls-stats": "0.4.24-alpha.9",
+    "@100mslive/hls-stats": "0.4.24",
     "eventemitter2": "^6.4.9",
     "hls.js": "1.4.12"
   }
diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json
index b8ecd82243..fc3522ae93 100644
--- a/packages/hls-stats/package.json
+++ b/packages/hls-stats/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/hls-stats",
-  "version": "0.4.24-alpha.9",
+  "version": "0.4.24",
   "description": "A simple library that provides stats for your hls stream",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
diff --git a/packages/hms-video-store/package.json b/packages/hms-video-store/package.json
index 73381af46b..dcfed593f6 100644
--- a/packages/hms-video-store/package.json
+++ b/packages/hms-video-store/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.12.24-alpha.9",
+  "version": "0.12.24",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/packages/hms-video-store/src/IHMSActions.ts b/packages/hms-video-store/src/IHMSActions.ts
index 01cc905201..bcfe6dbdbc 100644
--- a/packages/hms-video-store/src/IHMSActions.ts
+++ b/packages/hms-video-store/src/IHMSActions.ts
@@ -40,6 +40,7 @@ import {
   IHMSSessionStoreActions,
 } from './schema';
 import { HMSRoleChangeRequest } from './selectors';
+import { HMSStats } from './webrtc-stats';
 
 /**
  * The below interface defines our SDK API Surface for taking room related actions.
@@ -587,4 +588,10 @@ export interface IHMSActions<T extends HMSGenericTypes = { sessionStore: Record<
    * Method to get enabled flags and endpoints. Should only be called after joining.
    */
   getDebugInfo(): DebugInfo | undefined;
+
+  /**
+   * @internal
+   * Method to check if received bitrate is 0 for all remote peers or whether the room has whiteboard/quiz running. To be used by beam.
+   */
+  hasActiveElements(hmsStats: HMSStats): boolean;
 }
diff --git a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts
index a6f77818a4..9b880b70f7 100644
--- a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts
+++ b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts
@@ -92,6 +92,7 @@ import {
   selectVideoTrackByID,
 } from '../selectors';
 import { FindPeerByNameRequestParams } from '../signal/interfaces';
+import { HMSStats } from '../webrtc-stats';
 
 /**
  * This class implements the IHMSActions interface for 100ms SDK. It connects with SDK
@@ -1671,4 +1672,24 @@ export class HMSSDKActions<T extends HMSGenericTypes = { sessionStore: Record<st
   private setState: NamedSetState<HMSStore<T>> = (fn, name) => {
     return this.store.namedSetState(fn, name);
   };
+
+  /**
+   * @internal
+   * This will be used by beam to check if the recording should continue, it will pass __hms.stats
+   * It will poll at a fixed interval and start an exit timer if the method fails twice consecutively
+   * The exit timer is stopped if the method returns true before that
+   * @param hmsStats
+   */
+  hasActiveElements(hmsStats: HMSStats): boolean {
+    const isWhiteboardPresent = Object.keys(this.store.getState().whiteboards).length > 0;
+    const isQuizOrPollPresent = Object.keys(this.store.getState().polls).length > 0;
+    const peerCount = Object.keys(this.store.getState().peers).length > 0;
+    const remoteTracks = hmsStats.getState().remoteTrackStats;
+    return (
+      peerCount &&
+      (isWhiteboardPresent ||
+        isQuizOrPollPresent ||
+        Object.values(remoteTracks).some(track => track && typeof track.bitrate === 'number' && track.bitrate > 0))
+    );
+  }
 }
diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json
index 6edb04ece3..3948195b3d 100755
--- a/packages/hms-virtual-background/package.json
+++ b/packages/hms-virtual-background/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.13.24-alpha.9",
+  "version": "1.13.24",
   "license": "MIT",
   "name": "@100mslive/hms-virtual-background",
   "author": "100ms",
@@ -62,10 +62,10 @@
     "format": "prettier --write src/**/*.ts"
   },
   "peerDependencies": {
-    "@100mslive/hms-video-store": "0.12.24-alpha.9"
+    "@100mslive/hms-video-store": "0.12.24"
   },
   "devDependencies": {
-    "@100mslive/hms-video-store": "0.12.24-alpha.9"
+    "@100mslive/hms-video-store": "0.12.24"
   },
   "dependencies": {
     "@mediapipe/selfie_segmentation": "^0.1.1632777926",
diff --git a/packages/hms-whiteboard/package.json b/packages/hms-whiteboard/package.json
index 44c3854074..1323e9215e 100644
--- a/packages/hms-whiteboard/package.json
+++ b/packages/hms-whiteboard/package.json
@@ -2,7 +2,7 @@
   "name": "@100mslive/hms-whiteboard",
   "author": "100ms",
   "license": "MIT",
-  "version": "0.0.14-alpha.9",
+  "version": "0.0.14",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 50632f998a..757f6c0f1a 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "version": "0.10.24-alpha.9",
+  "version": "0.10.24",
   "author": "100ms",
   "license": "MIT",
   "repository": {
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
index 8ee1adb99e..eaa962bbec 100644
--- a/packages/react-sdk/package.json
+++ b/packages/react-sdk/package.json
@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "version": "0.10.24-alpha.9",
+  "version": "0.10.24",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -48,7 +48,7 @@
     "react": ">=16.8 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hms-video-store": "0.12.24-alpha.9",
+    "@100mslive/hms-video-store": "0.12.24",
     "react-resize-detector": "^7.0.0",
     "zustand": "^3.6.2"
   }
diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json
index bddfd1e0a4..5c6e1c1253 100644
--- a/packages/roomkit-react/package.json
+++ b/packages/roomkit-react/package.json
@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.24-alpha.9",
+  "version": "0.3.24",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.24-alpha.9",
+    "@100mslive/hls-player": "0.3.24",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.24-alpha.9",
-    "@100mslive/hms-whiteboard": "0.0.14-alpha.9",
-    "@100mslive/react-icons": "0.10.24-alpha.9",
-    "@100mslive/react-sdk": "0.10.24-alpha.9",
+    "@100mslive/hms-virtual-background": "1.13.24",
+    "@100mslive/hms-whiteboard": "0.0.14",
+    "@100mslive/react-icons": "0.10.24",
+    "@100mslive/react-sdk": "0.10.24",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -102,6 +102,7 @@
     "@stitches/react": "1.3.1-1",
     "emoji-mart": "^5.2.2",
     "eventemitter2": "^6.4.9",
+    "framer-motion":"^11.11.0",
     "lodash.merge": "^4.6.2",
     "qrcode.react": "^3.1.0",
     "react-dom": "^18.2.0",
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx
index 751d5eed8b..dfd47f9b0c 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { AnimatePresence } from 'framer-motion';
 import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 // @ts-ignore: No implicit Any
@@ -9,35 +10,37 @@ export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDi
   ({ tiles, edgeToEdge }, ref) => {
     const videoTileProps = useVideoTileContext();
     return (
-      <Box
-        ref={ref}
-        css={{
-          flex: '1 1 0',
-          gap: '$4',
-          display: 'flex',
-          placeContent: 'center',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexFlow: 'row wrap',
-          minHeight: 0,
-          '@lg': { gap: edgeToEdge ? 0 : '$4' },
-        }}
-      >
-        {tiles?.map(tile => {
-          return (
-            <VideoTile
-              key={tile.track?.id || tile.peer?.id}
-              width={tile.width}
-              height={tile.height}
-              peerId={tile.peer?.id}
-              trackId={tile.track?.id}
-              rootCSS={{ padding: 0 }}
-              objectFit="contain"
-              {...videoTileProps}
-            />
-          );
-        })}
-      </Box>
+      <AnimatePresence>
+        <Box
+          ref={ref}
+          css={{
+            flex: '1 1 0',
+            gap: '$4',
+            display: 'flex',
+            placeContent: 'center',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexFlow: 'row wrap',
+            minHeight: 0,
+            '@lg': { gap: edgeToEdge ? 0 : '$4' },
+          }}
+        >
+          {tiles?.map(tile => {
+            return (
+              <VideoTile
+                key={tile.track?.id || tile.peer?.id}
+                width={tile.width}
+                height={tile.height}
+                peerId={tile.peer?.id}
+                trackId={tile.track?.id}
+                rootCSS={{ padding: 0 }}
+                objectFit="contain"
+                {...videoTileProps}
+              />
+            );
+          })}
+        </Box>
+      </AnimatePresence>
     );
   },
 );
diff --git a/packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx b/packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx
index a78fa6dbb2..731e33ec8b 100644
--- a/packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx
+++ b/packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx
@@ -1,15 +1,24 @@
+import { motion } from 'framer-motion';
 import { Box } from '../Layout';
 import { styled } from '../Theme';
 import { flexCenter } from '../utils';
 
 export const Root = styled('div', {
   padding: '0.75rem',
-  // show videotile context menu on hover
-  // [`&:hover .tile-menu`]: {
-  //   display: 'inline-block',
-  // },
 });
 
+const MotionRoot = motion(Root);
+MotionRoot.defaultProps = {
+  layout: true,
+  transition: {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    mass: 1,
+    duration: 0.15,
+  },
+};
+
 const Container = styled('div', {
   width: '100%',
   height: '100%',
@@ -128,7 +137,7 @@ const AvatarContainer = styled(Box, {
 });
 
 interface VideoTileType {
-  Root: typeof Root;
+  Root: typeof MotionRoot;
   Container: typeof Container;
   Overlay: typeof Overlay;
   Info: typeof Info;
@@ -139,7 +148,7 @@ interface VideoTileType {
 }
 
 export const StyledVideoTile: VideoTileType = {
-  Root,
+  Root: MotionRoot,
   Container,
   Overlay,
   Info,
diff --git a/packages/roomkit-web/package.json b/packages/roomkit-web/package.json
index cbbbe0dad1..b8ed70a12e 100644
--- a/packages/roomkit-web/package.json
+++ b/packages/roomkit-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/roomkit-web",
-  "version": "0.2.24-alpha.9",
+  "version": "0.2.24",
   "description": "A web component implementation of 100ms Prebuilt component",
   "keywords": [
     "web-components",
@@ -33,7 +33,7 @@
     "build": "rm -rf dist && node ../../scripts/build-webapp"
   },
   "dependencies": {
-    "@100mslive/roomkit-react": "0.3.24-alpha.9",
+    "@100mslive/roomkit-react": "0.3.24",
     "@r2wc/react-to-web-component": "2.0.2"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a4ab58ed6b..e5e417a61a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10433,6 +10433,13 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^11.11.0:
+  version "11.11.9"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.11.9.tgz#a60ddf5abbd924812df923068628537a5c6ad8b9"
+  integrity sha512-XpdZseuCrZehdHGuW22zZt3SF5g6AHJHJi7JwQIigOznW4Jg1n0oGPMJQheMaKLC+0rp5gxUKMRYI6ytd3q4RQ==
+  dependencies:
+    tslib "^2.4.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"