Install:
pnpm i
Build:
pnpm build
Preview + make changes:
cd animator-app
pnpm run dev
Save video by pressing ๐พ icon and saving to apps/remotion-builder/Code-1-project.json
.
Render a video:
cd remotion-builder
pnpm run build
Code diff animation tool
I did a little Remotion study a few months ago; I was trying to figure out how to use 1 Remotion file/repo to automatically create different aspect ratios for all social media outlets & screen sizes:
https://tombyrer.github.io/remotion-aspectratio-demo/
But I also found the React paradigm of props is a barrier to good DX. Thought about SolidJS driven with Motion One, Motion Canvas, &/or TheatreJS. Also thought of using Svelte/Sveltosis which is more plain HTML.
Let me know if you want to team up!
Would it be possible to programmatically generate code animations?
As I understand, the keyframes representation from apps/remotion-builder/Code-1-project.json
should be easy to be automatically generated, but I'm not sure if it's enough. Nonetheless, it would still require parsing the file as a Project and exporting its animation.
Loading it with the remotion-builder
app yields a poorly rendered output, so I haven't grasped it's use so far.
Closely related, would it be possible to have a standalone app/CLI/API that e.g. takes some input and just outputs the rendered result? code-differ
seems very modular in it's packages, but I'm not sure if it has a clear standalone app/CLI/API entrypoint.
(FYI, I'm a Python developer with little to none js/node/react background)
Hi.
First of all, thanks for this great project! I was looking for an animated code diff and found the results from code-differ
very pleasing to the eye.
I'd like to know if you have any plans on supporting diffs of codes in other programming languages, and how hard you thing it would take to do so. In my use case I'm specifically interested in Python code.
As I was inspecting the code, it seemed to me that it would requires at least 2 changes:
packages/ui-react/components/Editor.tsx
: CodeMirror
supports multiple languages, which means the editor also could with little effortpackages/engine/src{
differ.ts
,javascriptParser.ts
}
: this seems like a harder modification. javascriptParser.ts
implements a custom logic based both on Babel parser
and on manual mapping javascript-specific keywords. Maybe there's some AST library that supports multiple languages out of the box? (e.g., from the python community: tree_sitter
)Am I on the right track?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.