How to Create Eye‑Catching 3D Demo Videos for Your Website or Landing page in Minutes

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 a complex video setup or heavy desktop software.

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.

What You’ll Build

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

Step 1: Open the Website and DevTools

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.

Step 2: Start Recording with Screentell

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.

Step 3: Enable Smooth Auto‑Scrolling

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.

Step 4: Stop Recording and Enter the Editor

Once the scrolling finishes, click Stop Recording in Screentell.

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

Step 5: Add 3D Transforms

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.

Step 6: Fine‑Tune the Timing

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.

Step 7: Stack Multiple 3D Effects (Optional)

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

Final Result

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.