DEV Community

Cover image for Open Source Project of the Day (#81): Recordly - Create Cinema-Grade Demo Videos Without Editing Skills
WonderLab
WonderLab

Posted on

Open Source Project of the Day (#81): Recordly - Create Cinema-Grade Demo Videos Without Editing Skills

#opensource #socialmedia #tooling

Introduction

"Screen recording is easy, but making it look like a professional product demo is hard."

This is the #81 article in the "One Open Source Project per Day" series. Today, we are introducing Recordly.

Do you ever envy the silky-smooth demo videos on top-tier SaaS websites? The camera zooms automatically with the mouse, the cursor moves in graceful arcs, and the background features elegant gradients and shadows. Previously, creating such videos usually required expensive paid software like ScreenStudio or manual tweaking in After Effects. Recordly changes the game—it's a full-featured open-source alternative that lets you create "cinema-grade" product demos in minutes.

What You Will Learn

  • Why Recordly is better than standard screen recorders for demos.
  • Core Features: Auto-zoom, cursor smoothing, and dynamic webcams.
  • Technical Insights: How it combines Electron and PixiJS for high-performance rendering.
  • Quick Start Guide: The complete workflow from recording to exporting.

Project Background

Overview

Recordly is an open-source, cross-platform desktop application designed to simplify the "recording-to-product-video" workflow. It doesn't just record your screen; it includes a powerful built-in editor specifically tailored for adding visual flourishes that elevate video quality.

As of now, Recordly has garnered over 15.6k+ stars on GitHub, with an active community constantly expanding its capabilities through a plugin system.

Core Value

  1. Zero Editing Skills Required: You don't need to learn complex non-linear editing. The software automatically recommends zoom strategies based on your mouse activity.
  2. Completely Free and Open Source: Licensed under AGPL-3.0, you are free to use, modify, or self-host it.
  3. Cross-Platform Support: Whether you're on macOS, Windows, or Linux, you get a consistent and premium experience.

Main Features

Key Characteristics

  • Auto-Zoom & Cursor Polishing: Automatically tracks the mouse position to generate smooth zoom animations while smoothing cursor paths and adding click ripples or shadows.
  • Dynamic Webcam Bubbles: Enables a circular webcam bubble that floats over the recording. It supports customizable borders and shadows and dynamically resizes during zooms.
  • Frames & Backgrounds: Provides built-in wallpapers, gradient borders, background blur, and glassmorphism effects so your recordings aren't just dull full-screen captures.
  • Timeline Editor: Supports trimming, speed adjustments, and adding annotations (text, images, shapes) as well as additional audio tracks.
  • Plugin System: Allows users to install community-developed extensions, such as cursor click sounds or specific device frame templates.

Quick Start

  1. Download & Install: Visit the Recordly Releases to download the version for your OS.
  2. Select Area: Launch the app and choose to record the entire monitor or a specific application window.
  3. Finish Recording: Click stop, and Recordly will automatically transition to the editor interface.
  4. Edit & Export: After a few drag-and-drop adjustments, export your video as a high-quality MP4 or GIF.

Technical Deep Dive

Architecture: Electron + PixiJS

Recordly's performance is driven by its unique architectural choices:

  1. Capture Layer: On macOS, it utilizes the native ScreenCaptureKit, ensuring extremely low CPU usage and perfect system audio capture. On Windows, it uses a WGC (Windows Graphics Capture) helper.
  2. Rendering Engine: The editor and export logic are powered by PixiJS. This means the real-time preview you see in the editor is rendered via 2D WebGL, allowing for motion blur and dynamic shadows to be visualized in real-time without lag.
  3. Extensibility: As seen in EXTENSIONS.md, Recordly has a mature plugin architecture, allowing developers to extend the editor's capabilities via JavaScript or even customize rendering hooks.

Links and Resources

Official Resources

Conclusion

Recordly is currently the closest open-source equivalent to the ScreenStudio experience. It addresses the common pain point of developers who need high-quality demos but aren't video editing experts. If you need to produce a short demo for your open-source project or commercial product, Recordly is undoubtedly the most cost-effective and efficient solution.

Find more useful knowledge and interesting products on my Homepage

Top comments (0)