If you’ve ever wanted to show off your website or landing page with a cinematic 3D demo video, the good news is: you don’t need complex video setup or traditional screen recording programs.

In this post, I’ll share a simple, repeatable workflow that lets you record a website, add smooth scrolling, and apply powerful 3D transforms — all in just a few minutes using a browser‑based tool.

By the end of this process, you’ll have:

• A smooth, auto‑scrolling screen recording of your website
• Cinematic 3D camera movements (rotation, position, and scale)
• A polished demo video perfect for landing pages, product launches, or social media

First, open the website you want to record.

Then open your browser’s DevTools (Inspector / Console). For convenience, you can detach DevTools into a separate window — this makes it easier to control scrolling while recording.

Next, open:

👉 https://screentell.com

Go to the recording page and choose what you want to capture:

• A browser tab
• A window
• Or the entire screen that contains your website

Click “Share”, then “Start Recording.”

At this point, Screentell is actively recording your screen. Unlike many generic screen recording programs, Screentell is optimized for creating professional product walkthroughs with ease.

To get a clean, professional scroll effect, run the following script in the Console of DevTools:

(function smoothScrollDown() {
  // Scrolling speed (higher = faster)
  const speed = 2;

  function step() {
    const currentScroll = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const totalHeight = document.documentElement.scrollHeight;

    if (currentScroll + windowHeight < totalHeight) {
      window.scrollTo(0, currentScroll + speed);
      window.requestAnimationFrame(step);
    } else {
      console.log("Reached the bottom of the page");
    }
  }

  window.requestAnimationFrame(step);
})();

This will smoothly scroll the page from top to bottom while the recording is running.

Tip: This script is optional. You can also use Tampermonkey auto‑scroll scripts or Chrome scrolling extensions if you prefer.

Once the scrolling finishes, click Stop Recording in Screentell.

You’ll be taken directly into the editing interface, where all the magic happens.

In the editor timeline:

1. Find the Motion / Animation track
2. Left‑click at the position where you want a 3D effect
3. Choose Add 3D Transform from the menu

Now select the start of the 3D transform segment. In the main preview area, use these controls:

• Drag → Rotate
• CMD / CTRL + Drag → Move position
• ALT / OPTION + Drag → Scale (zoom in or out)

This defines the starting 3D state.

Next, select the end of the same 3D transform segment and adjust it to a different rotation, position, or scale. Screentell will automatically interpolate between the two states, creating a smooth cinematic motion.

You can:

• Drag the entire 3D segment to reposition it on the timeline
• Drag either edge to adjust its duration

This makes it easy to control the pacing and emphasis of each section.

Repeat the same process to add multiple 3D transform segments across the timeline.

This allows you to:

• Highlight different sections of the page
• Create dynamic camera movements
• Build a more engaging, story‑driven demo

Once you’re familiar with the workflow, the entire process — from recording to export — takes only a few minutes.

The result is a clean, modern, 3D demo video that instantly makes your website feel more polished and professional.

👇 The final effect looks like this

If you’re building landing pages, shipping products, or launching features, this approach is one of the fastest ways to level up how your product is presented.

This article is written by the Screentell Product & Engineering Team, who design and use screen recording tools daily for product demos, tutorials, and developer documentation. The insights in this guide are based on hands‑on experience with both browser‑based and native screen capture workflows.

Last updated: January 2026