Animate your code, in HD.

Create effortlessly beautiful code animations in seconds.

export default function Page() {    return (        <div>            <h1>Hello, Home page!</h1>            <p>Look at how beautifully it animates!</p>        </div>    )}

Font family

Wallpaper

Padding

Border radius

Features

Syntax highlighting, code diffing, beautiful themes and more.

1
2
3
4
5
6
7
8
9
// TODO: Refactor to client component
"use client"

const button = ({...props}) => {
    return (
        <button
            onClick={async(e) => {
                e.preventDefault()
    //...

Automatic code diffing

Changes are detected and animated automatically.

Outer padding

Inner padding

Border radius

Shadow

Edit everything

Make the scene your own with fine-grained controls.

Gorgeous themes

Hand-crafted code themes, wallpapers, and gradients.

Multiple Aspect Ratios

16:9, 1:1, and 9:16 resolutions for maximum flexibility.

Transparent videos

Export animations as overlays for use in other media.

+ more

Popular language support

Syntax highlighting for your favorite languages.

That's not all

Everything you need to create beautiful code animations.

Fast exports

4k video

ProRes files

Render videos as gifs

Compression level

Custom gradients

See what users are saying

Developers are leveling up their content with Hackreels.

dothash

@dothash_

Oct 21

Testing an animation using hackreels by @dparksdev The example is from one of my previous posts about SSRF. Will definitely test out hackreels a lot more!

Steven Tey

@steventey

Oct 21

Just found my new favorite app → hackreels.com Create beautiful animations of your code snippets just by typing them + adding a frame to the timeline 🤯 Built with @remotion by the amazing @dparksdev