5 ms·
Show HN: Hackreels – Animate your code in HD
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!
- CharlesW 3y agoWhat 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!)
- davidtparks 3y agoI 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.
- CharlesW 3y agoOh cool, best of luck!
- davidtparks 3y agoThanks Charles!
- Oras 3y agoGood 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!
- ReleaseCandidat 3y agoSomething like this: https://www.youtube.com/watch?v=wGCWlI4A5z4 https://www.youtube.com/watch?v=wGCWlI4A5z4 code-report does nice source code animations https://www.youtube.com/@code_report https://www.youtube.com/@code_report
- petepete 3y agoI seem to remember him saying he makes those animations using a PowerPoint transition.
- mmanfrin 3y agoWhy 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.
- davidtparks 3y agoSo 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!
- therealpygon 3y agoPersonally, I think it would make sense for the weighted priority of movement to be block > line > characters.
- gavmor 3y agoYeah, 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/ https://sketchtoy.com/ 1. https://gource.io/ https://gource.io/
- archiewood 3y agoI 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=dansilver.typewriter https://marketplace.visualstudio.com/items?itemName=dansilve... Ascii Cinema: https://asciinema.org/ https://asciinema.org/
- davidtparks 3y agoThis is great feedback! Thanks.
- zipped 3y agoHave you ever looked into Macro Recorder? https://www.macrorecorder.com/ 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.
- archiewood 3y agoLooks cool, will check it out next time.
- ramses0 3y agoAlternatively: 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.
- elcritch 3y agoOn Mac there’s ‘Kap’ which has plugins for recording keystrokes and mouse clicks. https://getkap.co/ https://getkap.co/
- tpmx 3y agoReminds me a little of EMF - Verses (a 1994 demoscene production). https://youtu.be/oT1_zcosmPg?t=32 https://youtu.be/oT1_zcosmPg?t=32
- davidtparks 3y agoRetro! Love it.
- phyzome 3y agoSuggestion: 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.
- davidtparks 3y agoAwesome suggestion!
- arcticadder 3y agoI think it looks cool. The pricing is way too steep, though.
- davidtparks 3y agoThere'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.
- lencastre 3y agoWhat about asciinema?
- nojvek 3y ago> Application error: a client-side exception has occurred Doesn’t work on iOS. Page crashes.
- arielwein 3y agoLooks cool, almost exported but the pricing seems off to me.