import React from 'react'; import { Scene3D, Step, useViewportRect, TypeWriter, StaggeredMotion } from 'remotion-bits'; export const metadata = { name: '3D Terminal', description: 'A 3D scene with multiple terminal windows executing commands.', tags: ['3d', 'terminal', 'typewriter', 'code'], duration: 300, width: 1920, height: 1080, registry: { name: 'bit-terminal-3d', title: '3D Terminal', description: 'A 3D scene with multiple terminal windows executing commands.', type: 'bit' as const, add: 'when-needed' as const, registryDependencies: ['scene-3d'], dependencies: [], files: [ { path: 'docs/src/bits/examples/scene-3d/Terminal3D.tsx', }, ], }, }; export const Component: React.FC = () => { const rect = useViewportRect(); // Pre-calculate sizing based on viewport to be responsive const termWidth = rect.width * 0.4; const termHeight = rect.height * 0.5; const TerminalWindow = ({ title, children, width, height, style, }: { title: string; children: React.ReactNode; width: number; height: number; style?: React.CSSProperties; }) => { const fontSize = width * 0.04; return (

{title}

{children}

); }; return ( {/* Step 1: Main terminal */} ➜ ~/project git status {'\n'} {/* Step 2: Side terminal */}

[INFO] Server started on port 3000

{/* Step 3: Top terminal */} build project\n> transpile modules\n> optimize assets\n\nBuild successful! ✨", ]} typeSpeed={1} cursor /> ); };

3D Terminal

Install