Remotion 3D - Rotating Monitor with Scrolling Code

A Remotion video project featuring a rotating 3D monitor displaying scrolling "Hello World" code, built with React Three Fiber and server-side rendering capabilities.

🎥 Demo

This project creates a smooth 3D animation of a flat-screen monitor that:

• Rotates continuously in 3D space
• Displays scrolling code with syntax highlighting
• Renders at 1920x1080 @ 30fps

🚀 Quick Start

Installation

npm install

Development

Run the Remotion Studio to preview your video:

npm start

This will open the Remotion Studio in your browser where you can:

• Preview the animation in real-time
• Scrub through frames
• Adjust composition settings

Building

Build the project for rendering:

npm run build

📹 Rendering

Render a Video

Render the Monitor3D composition to an MP4 file:

npx remotion render Monitor3D output.mp4

Render Options

Render with custom settings:

# High quality render
npx remotion render Monitor3D output.mp4 --quality 100

# Render specific frame range
npx remotion render Monitor3D output.mp4 --frames=0-150

# Render as image sequence
npx remotion render Monitor3D output --sequence

🖥️ Server-Side Rendering

This project supports server-side rendering using Remotion's Lambda or server rendering capabilities.

Option 1: Using Remotion Lambda (AWS)

# Install Lambda
npm i @remotion/lambda

# Deploy to AWS Lambda
npx remotion lambda sites create

# Render on Lambda
npx remotion lambda render [site-id] Monitor3D

Option 2: Using Local Server Rendering

Create a simple Node.js server for rendering:

// render-server.js
const { bundle } = require("@remotion/bundler");
const { renderMedia, selectComposition } = require("@remotion/renderer");
const path = require("path");

const renderVideo = async () => {
  const bundleLocation = await bundle({
    entryPoint: path.join(__dirname, "src/index.ts"),
    webpackOverride: (config) => config,
  });

  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: "Monitor3D",
  });

  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: "h264",
    outputLocation: `out/video-${Date.now()}.mp4`,
  });

  console.log("Render complete!");
};

renderVideo();

Install required packages:

npm install @remotion/bundler @remotion/renderer

Run the server:

node render-server.js

Option 3: Docker Server Rendering

Create a Dockerfile:

FROM node:20-slim

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

CMD ["npx", "remotion", "render", "Monitor3D", "/output/video.mp4"]

Build and run:

docker build -t remotion-3d .
docker run -v $(pwd)/output:/output remotion-3d

🎨 Customization

Modify the Code Display

Edit src/CodeTexture.tsx to change the scrolling code content:

const CODE_LINES = [
  'console.log("Your custom code here");',
  // Add more lines...
];

Adjust Monitor Appearance

Edit src/Monitor.tsx to customize:

• Monitor size and proportions
• Rotation speed
• Colors and materials
• Stand design

Change Animation Duration

Edit src/Root.tsx:

<Composition
  id="Monitor3D"
  durationInFrames={300} // Change this value
  fps={30}
  // ...
/>

📁 Project Structure

remotion-3d/
├── src/
│   ├── Root.tsx           # Composition registry
│   ├── MonitorScene.tsx   # Main 3D scene
│   ├── Monitor.tsx        # 3D monitor component
│   ├── CodeTexture.tsx    # Scrolling code texture
│   └── index.ts           # Entry point
├── public/                # Static assets
├── build/                 # Built bundle (generated)
└── package.json

🛠️ Tech Stack

• Remotion - Video rendering framework
• React Three Fiber - React renderer for Three.js
• Three.js - 3D graphics library
• TypeScript - Type-safe development

📚 Documentation

• Remotion Docs
• React Three Fiber Docs
• Three.js Docs

📝 License

See LICENSE.md for details.

🤝 Contributing

Contributions welcome! Feel free to submit issues and pull requests.

---

Built with ❤️ using Remotion and React Three Fiber