Show HN: Hackreels – Animate your code in HD | Hacker News Reader

Show HN: Hackreels – Animate your code in HD

hackreels.com

47 pointsdavidtparks26 comments

Hey there! Just released a project I've been working on for a bit which uses Remotion and other awesome tech. It let's you create code animations by simply entering a series of code snippets and exporting them to popular video formats.

Let me know if anyone has feedback!

Open articleView on HN

I do quite a lot of this kind of stuff for my job. Some thoughts that may be useful.

Often the full IDE is needed. I record a lot of gifs of VSCode, where part of the gif is typing code, part is interacting with the rest of the IDE / terminal - perhaps to run the code and view the output.

For me the killer app would be one which could pre-record keystrokes (and maybe mouse actions) so that I could do them error free. I often attempt a gif 10 times before I'm happy with the outcome.

I don't personally love the transition animation. I would want the option for something that seems like it's being typed.

The closest tools I've found are:

Typewriter VSCode extesion: Allows you to copy text and then "types" it out for you. https://marketplace.visualstudio.com/items?itemName=dansilve...

Ascii Cinema: https://asciinema.org/

This is great feedback! Thanks.

Have you ever looked into Macro Recorder? https://www.macrorecorder.com/

It allows you to record keystrokes and then edit them after to cut out anything you'd like, stuff like the timings between keystrokes and accidental keys.

Looks cool, will check it out next time.

Alternatively: Kinesis RGB Gaming Freestyle with the incredible "macro" button!

Macro, F1, Hello World, Macro => F1, F1, ad-infinitum

You it has a 10-slot non-keyboard zone which you can use without fear, or map fn-1,2,3, ctrl-shift-1,2,3, etc.

On Mac there’s ‘Kap’ which has plugins for recording keystrokes and mouse clicks. https://getkap.co/

Why tween individual letters? I've seen animations that move specific code blocks or keywords, to show the actual movement of those blocks, but individual letters just feels like noise.

So it's a mix of the letters but also I do not consider 100% matching lines in the diff. But I can see how there might be too much noise for very different code snippets. Thanks for your feedback!

Personally, I think it would make sense for the weighted priority of movement to be block > line > characters.

Yeah, I was completely distracted trying to figure out what `import { Button, icons } from "ui"` was derived from. Looks like `<div classname="flex` was partially made up of "beautifully it animates," like a sort of anagram. There's no semantic relationship, of course, between permutations of an anagram. So letter tweening is worse than useless.

That being said, I do like the overall idea of animating code changes. Calls back to that old Facebook sketching app[0] that would let us share replays, and I am a fan of the stories that Gource[1] can tell.

Ultimately, though, the sequential text file is a bad metaphor for code. Best thing for it is to split your modules across files.

0. Can't remember the name of it, but something similar is https://sketchtoy.com/

1. https://gource.io/

What is this for? I understand that it creates animated tweens between two code states, but I've never seen this done, so I'm asking more about the premise that led you to build this. (Thanks!)

I have seen people sharing educational code animations on Twitter, but the process for creating them seemed really tedious (required you to use Keynote, Magic Move etc). So I wanted to automate away the really boring stuff!

It's geared at developer content creators who want to share really nice looking snippets of code on Twitter / use it in their videos.

Oh cool, best of luck!

Thanks Charles!

Good to know the reason and target market. I saw the YouTube video and was not sure how this could be useful but now I understand.

Good luck!

Something like this: https://www.youtube.com/watch?v=wGCWlI4A5z4 code-report does nice source code animations https://www.youtube.com/@code_report

I seem to remember him saying he makes those animations using a PowerPoint transition.

Suggestion: Give a brief flash/highlight on all the code that's about to move or change. This will draw the viewer's eye to the right part of the screen and give them a chance to see what the before-state was.

Awesome suggestion!

Reminds me a little of EMF - Verses (a 1994 demoscene production).

https://youtu.be/oT1_zcosmPg?t=32

Retro! Love it.

> Application error: a client-side exception has occurred

Doesn’t work on iOS. Page crashes.

Looks cool, almost exported but the pricing seems off to me.

I think it looks cool. The pricing is way too steep, though.

There's a free plan! Feel free to shoot me a DM and we can work something out if you are turned off by the pricing / unable to pay.

What about asciinema?

Reply on news.ycombinator.com