DEV Community: Mehmet Abak

How We Built a Fast Browser-Based Video Tool

Mehmet Abak — Tue, 25 Aug 2026 10:08:18 +0000

We recently launched Animation Maker on Product Hunt; a free web tool for making kinetic typography, text match cuts, and video effects directly inside your browser.

Most animation tools—whether they create rapid text cuts, typewriter animations, document highlighters, or retro VHS effects—run on desktop software or process video on cloud servers.

We wanted to see if we could do this differently: Can we generate smooth, animated videos directly in the browser with instant previews and no server uploads?

Running everything on the client side gives users fast feedback and keeps their text and files private on their own device. But getting smooth 30fps and 60fps rendering in a browser tab took a few practical adjustments.

Here is a look at what we ran into and how we built it.

1. The Main Problem: Browser Memory & Frame Drops

Rendering a video in JavaScript comes down to four steps:

Draw each animation frame on an HTML5 <canvas>.
Extract the frame image data.
Pass the frames into FFmpeg running via WebAssembly.
Add sound effects and export the final .mp4 file.

The main challenge is memory. A 10-second video at 30 frames per second has 300 frames. If you create new image objects or large arrays on every frame, the browser's garbage collector has to clean up hundreds of megabytes in the background.

When garbage collection kicks in, the browser stutters for a moment. That causes dropped frames and choppy exports. On mobile browsers (like Safari on iOS or Chrome on Android), memory spikes can easily crash the tab.

To fix this, we structured the render loop to reuse the same memory buffers instead of allocating new ones on every frame.

2. Text Match Cut: Keeping the Keyword Centered

In a Text Match Cut, different sentences flash quickly on the screen, while one shared word stays locked in the middle of the screen.

The Alignment Calculation

Because each sentence has different words before and after the keyword, simply centering the whole sentence does not work. If sentence A has 2 words before the keyword and sentence B has 7 words, the keyword jumps back and forth.

To keep it steady, we calculate how far the keyword's center is from the start of the line, and shift the whole line by that exact offset:

// Calculation to center a specific keyword on screen
function getKeywordPosition(ctx, textBefore, keyword, screenCenterX) {
  const widthBefore = ctx.measureText(textBefore).width;
  const keywordWidth = ctx.measureText(keyword).width;

  // Center point of the keyword inside the sentence
  const keywordCenter = widthBefore + (keywordWidth / 2);

  // Shift needed to place the keyword in the middle of the screen
  const drawStartX = screenCenterX - keywordCenter;

  return {
    startX: drawStartX,
    keywordLeft: screenCenterX - (keywordWidth / 2),
    keywordRight: screenCenterX + (keywordWidth / 2)
  };
}

Why We Stopped Measuring Text on Every Frame

In our first prototype, we measured text widths (ctx.measureText), wrapped lines, and calculated font sizes on every single frame of the animation.

Measuring text in the browser is surprisingly slow when called hundreds of times per second. It was taking up most of our render time.

We fixed this by separating the process into two steps:

Before rendering starts: Calculate line breaks, word widths, and positions once for each cut, and store them in memory.
During rendering: Simply draw the text using the saved positions.

This single change cut text rendering time by over 80% with no difference in visual quality.

3. Creating Sound Effects in Code (No Large Audio Downloads)

A quick text cut or typewriter effect feels incomplete without synchronized sound. But downloading dozens of .wav or .mp3 files over the network adds loading time and can fail on slow connections.

Instead, we use the browser's built-in Web Audio API to generate sound effects directly in code.

For example, a mechanical keyboard click or tape snap is basically a short sound pulse shaped with a filter:

// Generating a quick click sound with Web Audio
function makeClickSound(audioContext, startTime) {
  const osc = audioContext.createOscillator();
  const gain = audioContext.createGain();
  const filter = audioContext.createBiquadFilter();

  // Bandpass filter for a clean, snappy tone
  filter.type = 'bandpass';
  filter.frequency.setValueAtTime(1200, startTime);
  filter.Q.setValueAtTime(3.5, startTime);

  // Quick volume drop
  gain.gain.setValueAtTime(0.7, startTime);
  gain.gain.exponentialRampToValueAtTime(0.001, startTime + 0.04);

  osc.connect(filter);
  filter.connect(gain);
  gain.connect(audioContext.destination);

  osc.start(startTime);
  osc.stop(startTime + 0.04);
}

By generating sound effects offline into an audio buffer, the whole soundtrack is created in a few milliseconds and matches the visual cuts down to the millisecond.

4. Making Video Encoding Fast: Benchmarks & Lessons

Once all frames are drawn on the canvas and audio is generated, they are encoded into an .mp4 file using FFmpeg running in WebAssembly. Here are three practical things we learned:

1. JPEG Frames over PNG

canvas.toDataURL('image/png') or canvas.convertToBlob({ type: 'image/png' }) produced clean frames, but PNG compression in the browser took ~30–50ms per frame.
Switching to JPEG encoding (quality: 0.85) reduced frame extraction time to 1–2ms per frame while keeping text sharp.

2. Matching Codec Block Sizes

Video encoders like libx264 work in $16 \times 16$ pixel blocks. Setting export resolutions to standard sizes like $1280 \times 720$ and $720 \times 1280$ uses exact multiples of 16. This avoids extra padding and keeps WebAssembly encoding fast.

3. Tuning x264 Flags & Sending Frames in Batches

In WebAssembly:

Using preset ultrafast with a tuned Constant Rate Factor (crf 23) gives a 4x encoding speedup compared to preset medium, with no noticeable difference on mobile screens.
Instead of keeping all rendered frames in JavaScript memory before sending them to FFmpeg, streaming them in small batches keeps memory low and prevents mobile tabs from running out of RAM.

5. What's Next & The Future of Web-Based Tools

Building Animation Maker showed us how capable modern web standards are. By combining simple Canvas 2D drawings, procedural Web Audio, and WebAssembly, it's possible to build video tools that run anywhere without installing apps or uploading files to a server.

As WebGPU and WebCodecs continue to improve across browsers, we can build tools in the browser that used to require desktop software. We are currently working on new blur effects, sound options, and additional animation modes.

🚀 Try the tool: Animation Maker
💬 Join the conversation on Product Hunt

Mastering Kotlin: A Guide for Java Developers Transitioning with Confidence

Mehmet Abak — Tue, 27 Feb 2024 16:44:24 +0000

In recent years, Kotlin has risen to prominence as a leading programming language, capturing the attention of developers worldwide with its modern syntax, robust features, and seamless interoperability with Java. For Java developers considering a transition to Kotlin, mastering this shift is crucial for staying competitive and harnessing the full potential of Kotlin's expressive language constructs. In this in-depth guide, we'll embark on a comprehensive exploration of Kotlin, covering a broad spectrum of topics ranging from basic syntax to advanced language features, concurrency, functional programming, testing methodologies, and more. By delving into the intricacies of Kotlin's ecosystem, Java developers will gain the knowledge and confidence necessary to embrace Kotlin and elevate their software development skills to new heights.

1. Introduction to Kotlin

Origins and Evolution

Kotlin originated in 2011 as a pragmatic solution to the limitations and verbosity of Java, addressing common pain points encountered in Java development. Developed by JetBrains, Kotlin has since evolved into a mature and versatile language, backed by a vibrant community and widespread adoption across various domains, including Android development.

Key Features Overview

Kotlin boasts a rich set of features designed to enhance developer productivity and code quality:

Concise syntax: Kotlin's expressive syntax minimizes boilerplate code, resulting in cleaner and more readable codebases.
Null safety: Kotlin's type system differentiates between nullable and non-nullable types, reducing the likelihood of NullPointerExceptions.
Interoperability with Java: Kotlin seamlessly integrates with existing Java codebases, enabling gradual adoption and interoperability.
Extension functions: Kotlin's extension functions empower developers to augment existing classes with additional functionality, promoting code reuse and modularity.
Coroutines: Kotlin's coroutine support facilitates asynchronous programming with lightweight, non-blocking concurrency primitives, simplifying the handling of concurrent tasks.
Data classes: Kotlin's data classes provide a concise and intuitive syntax for defining immutable data structures, streamlining the creation of domain models.

Advantages Over Java

Kotlin offers several advantages over Java, including:

Enhanced expressiveness: Kotlin's concise syntax and modern language features enable developers to express complex concepts more succinctly, resulting in more maintainable and elegant code.
Improved null safety: Kotlin's null safety features, such as nullable types and safe call operators, mitigate the risk of null pointer exceptions, enhancing code robustness and reliability.
Seamless interoperability: Kotlin's interoperability with Java allows developers to leverage existing Java libraries and frameworks seamlessly, facilitating the adoption of Kotlin in existing projects.

2. Syntax Comparison: Kotlin vs. Java

Variable Declarations

Kotlin's variable declaration syntax is more concise compared to Java, thanks to type inference and immutable variables:

// Kotlin
val name: String = "Kotlin"
var count = 10 // Type inference infers count as an Int

// Java
String name = "Java";
int count = 10;

Control Flow

Kotlin offers more expressive control flow constructs compared to Java, enhancing code readability and expressiveness:

// Kotlin
val result = if (x > 5) "Greater" else "Lesser"

// Java
String result = (x > 5) ? "Greater" : "Lesser";

Functions and Lambdas

Kotlin introduces several enhancements to functions and lambdas, making them more powerful and expressive:

// Kotlin
fun greet(name: String) {
    println("Hello, $name!")
}

// Java
void greet(String name) {
    System.out.println("Hello, " + name + "!");
}

Classes and Inheritance

Kotlin's class and inheritance syntax closely resembles Java's, with some notable differences such as primary constructors and data classes:

// Kotlin
class Person(val name: String, val age: Int)

// Java
public class Person {
    private String name;
    private int age;

    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

3. Advanced Kotlin Features

Null Safety in Kotlin

Kotlin's null safety features play a pivotal role in preventing null pointer exceptions and improving code robustness:

Nullable Types

Kotlin introduces the concept of nullable types, allowing developers to express whether a variable can hold a null value:

// Kotlin
var nullableName: String? = null
val length = nullableName?.length // Safe call operator

// Java
String nullableName = null;
int length = nullableName != null ? nullableName.length() : 0;

Safe Calls and Elvis Operator

Kotlin provides the safe call operator ?. and the Elvis operator ?: for handling null values gracefully:

// Kotlin
val length = nullableName?.length ?: 0 // Elvis operator

// Java
int length = nullableName != null ? nullableName.length() : 0;

Late Initialization

Kotlin supports late initialization, allowing variables to be initialized at a later time, reducing the need for nullable types:

// Kotlin
lateinit var name: String

// Java
String name; // Need to assign a value before using it

Extension Functions

Kotlin's extension functions enable developers to extend the functionality of existing classes without modifying their source code:

// Kotlin
fun String.removeSpaces(): String {
    return this.replace(" ", "")
}

// Usage
val text = "Hello World"
val processedText = text.removeSpaces()

Coroutines

Kotlin's coroutines facilitate asynchronous programming with lightweight concurrency primitives, simplifying the handling of concurrent tasks:

// Kotlin
suspend fun fetchData(): String {
    delay(1000) // Simulate network delay
    return "Data"
}

// Usage
fun main() {
    GlobalScope.launch {
        val data = fetchData()
        println("Data: $data")
    }
    Thread.sleep(2000) // Wait for coroutine to complete
}

Data Classes

Kotlin's data classes provide a concise and intuitive syntax for defining immutable data structures:

// Kotlin
data class Person(val name: String, val age: Int)

// Usage
val person = Person("Alice", 30)
println(person.name) // Output: Alice

Sealed Classes

Kotlin's sealed classes enable developers to define restricted class hierarchies, often used in conjunction with when expressions for exhaustive type checking:

// Kotlin
sealed class Result
class Success(val data: String) : Result()
class Error(val message: String) : Result()

// Usage
fun handleResult(result: Result) {
    when (result) {
        is Success -> println("Success: ${result.data}")
        is Error -> println("Error: ${result.message}")
    }
}

Smart Casts

Kotlin's smart casts automatically cast variables after type checks, eliminating the need for explicit casting:

// Kotlin
fun process(obj: Any) {
    if (obj is String) {
        println(obj.toUpperCase()) // Automatic cast to String
    }
}

4. Interoperability with Java

Kotlin seamlessly integrates with existing Java codebases, enabling developers to leverage Java libraries and frameworks:

Calling Java from Kotlin

Kotlin code can call Java code directly, facilitating interoperability between Kotlin and Java:

// Kotlin calling Java
val list = ArrayList<String>()
list.add("Kotlin")
list.add("Java")

Java Interop Annotations

Kotlin provides annotations for controlling how Kotlin code interacts with Java bytecode, ensuring smooth interoperability:

// Kotlin
@JvmStatic
fun greet(name: String) {
    println("Hello, $name!")
}

// Java
// Can call Kotlin function as a static method

5. Testing and Debugging Kotlin Code

Kotlin offers robust support for testing and debugging, ensuring the quality and reliability of Kotlin codebases:

Unit Testing

Kotlin code can be tested using popular testing frameworks like JUnit, ensuring code behaves as expected under different scenarios:

// Kotlin
fun add(a: Int, b: Int): Int {
    return a + b
}

// JUnit test
class MyTest {
    @Test
    fun testAdd() {
        assertEquals(5, add(2, 3))
    }
}

Conclusion

In conclusion, Kotlin represents a compelling opportunity for Java developers to enhance their programming skills and embrace modern software development practices. By mastering Kotlin's syntax, features, and ecosystem, Java developers can transition with confidence, unlocking new possibilities for building robust, maintainable, and scalable software solutions. Whether you're venturing into asynchronous programming with coroutines, leveraging extension functions for code reuse, or ensuring null safety with Kotlin's type system, embracing Kotlin opens doors to a world of innovation and creativity in software development.

Don’t forget to check these sources:

Happy coding in Kotlin!