experimental

Author: JonnyBurger

packages/studio/src/components/RenderModal/WebRenderModal.tsx

@@ -42,6 +42,7 @@ import {
 	ResolveCompositionBeforeModal,
 	ResolvedCompositionContext,
 } from './ResolveCompositionBeforeModal';
+import {WebRendererExperimentalBadge} from './WebRendererExperimentalBadge';
 import {WebRenderModalAdvanced} from './WebRenderModalAdvanced';
 import {WebRenderModalAudio} from './WebRenderModalAudio';
 import {WebRenderModalBasic} from './WebRenderModalBasic';
@@ -540,6 +541,9 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 					<ShortcutHint keyToPress="↵" cmdOrCtrl />
 				</Button>
 			</div>
+			<div style={containerStyle}>
+				<WebRendererExperimentalBadge />
+			</div>
 			<div style={horizontalLayout}>
 				<div style={leftSidebar}>
 					<VerticalTab

packages/studio/src/components/RenderModal/WebRendererExperimentalBadge.tsx

@@ -0,0 +1,58 @@
+import {LIGHT_TEXT, WARNING_COLOR} from '../../helpers/colors';
+import {WarningTriangle} from '../NewComposition/ValidationMessage';
+
+const row: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'row',
+	alignItems: 'center',
+	justifyContent: 'center',
+};
+
+const text: React.CSSProperties = {
+	fontSize: 14,
+	fontFamily: 'sans-serif',
+	color: LIGHT_TEXT,
+};
+
+const icon: React.CSSProperties = {
+	width: 14,
+	height: 14,
+	flexShrink: 0,
+	fill: WARNING_COLOR,
+	marginRight: 8,
+};
+
+const link: React.CSSProperties = {
+	color: 'inherit',
+	textDecoration: 'underline',
+	fontSize: 14,
+};
+
+export const WebRendererExperimentalBadge: React.FC = () => {
+	return (
+		<div style={row}>
+			<WarningTriangle type="warning" style={icon} />
+			<div style={text}>
+				The Remotion Web Renderer is experimental.{' '}
+				<a
+					href="https://github.com/remotion-dev/remotion/issues/5913"
+					target="_blank"
+					rel="noopener noreferrer"
+					style={link}
+				>
+					Track progress on GitHub
+				</a>{' '}
+				and discuss in the{' '}
+				<a
+					href="https://remotion.dev/discord"
+					target="_blank"
+					rel="noopener noreferrer"
+					style={link}
+				>
+					#web-renderer
+				</a>{' '}
+				channel on Discord.
+			</div>
+		</div>
+	);
+};