Replacing After Effects with a text editor

I learned After Effects in 2017. I spent the next eight years there. I shipped network IDs, election graphics, app launch films, twenty-five-second ads that ran on television, a four-minute explainer for a Series B that ended up on the homepage of Hacker News. AE was my native language, and I was, by most measures, fluent.

A year ago I switched. The composition I am writing right now — a 30-second product reveal for a fintech client — is open in VS Code, not AE. The next composition, due Friday, will be in VS Code too. I am not coming back. I want to tell you what that transition was like, because it is the most concrete answer I can give to the question "is HyperFrames really a replacement for After Effects, or is it for a different audience?"

The short answer is: it is for the same audience, doing the same job, with different ergonomics. The longer answer is below — and if you want the feature-by-feature breakdown, the HyperFrames vs After Effects comparison has it.

What I gained

The first thing I gained is diff. I had not realized how much of my professional anxiety in AE was generated by the fear of losing work. AE projects accumulate. You have v3, v3-final, v3-final-CLIENTREVIEW, v3-final-CLIENTREVIEW-marcus-edit, v4. The "what changed since the last review" question is, at best, answerable by opening both files side by side and squinting. At worst, it is unanswerable. You have lost the audit trail of your own thinking.

When the composition is HTML, the diff is the diff. Every edit is a line. Every revision is a commit. Every client comment becomes a branch. When the client says "go back to the version where the title was bigger," I check out the commit from three days ago. The whole concept of "saving over the file" is gone.

The second thing I gained is reusability that actually works. AE has expressions. AE has scripts. AE has Essential Graphics. I used all of them. None of them ever felt like real reuse. The pre-comp I built for one project never quite plugged into the next project. The expression I wrote for one text layer was a copy-paste away from the next text layer, with subtle differences I had to remember.

In HTML, a lower third is a <div> with classes. I reuse the same <div> across thirty compositions. When the brand color updates, I change one CSS variable. When the type system updates, I change one font import. The whole notion of a design system becomes practical, because every composition is built from the same primitives.

0.00s · 0%

The third thing I gained is agents that work. I am not exaggerating when I say this changed my month-to-month output. When I need a routine title card — name, role, transition — I describe it to Claude in one sentence, and it produces the HTML in seconds. I review the output, tweak one thing, render. The bottleneck used to be the routine work; now the routine work is something I delegate. I spend my time on the parts that take taste.

What I lost

I want to be honest about this part, because I have read too many "I switched and never looked back" essays where the writer is performatively enthusiastic. I lost real things.

I lost the timeline. AE's timeline view, where you can see every layer with its keyframes laid out horizontally, is genuinely a great UI for thinking in time. HTML does not have it. I have something resembling it — HyperFrames' preview pane shows a scrubber, and I can scrub through a composition — but I cannot see the structure of every animation at a glance the way I could in AE. The timeline is a loss.

I lost direct manipulation of bezier handles. In AE, when I do not like an ease, I grab the handle and pull. In HTML, I write cubic-bezier(.16, 1, .3, 1) and check the result. The feedback loop is slower. I have a browser extension (cubic-bezier.com) that I use to interactively tune curves and then paste the values into CSS. It is fine. It is not as fast as dragging the handle.

I lost the visual asset browser. AE's project panel, with thumbnails of every clip and image, was a way of seeing my materials. In HTML, my materials are file paths. I keep a separate folder open in Finder and refer to it. This is not catastrophic, but it is friction.

I lost some advanced effects. There are things AE does that the browser does not, or does badly. True 3D camera (not CSS perspective, real 3D camera with depth-of-field). Particle systems with millions of points. Optical flow time remapping. Plug-in ecosystems like Trapcode. For these I still occasionally open AE and render a clip to MP4, which I then composite into my HyperFrames timeline. The escape hatch matters.

What surprised me

A few things I did not expect.

I expected typography to be a downgrade. It is not. CSS has variable fonts, OpenType features, optical sizing, color fonts, and a level of typographic control that AE has never matched. The serif headlines I am setting in HyperFrames look better than what I shipped in AE, because CSS handles type properly and AE handles type adequately. The first time I rendered a small-caps heading with stylistic alternates in a single line of CSS, I knew I was not going back.

I expected rendering to be slower. It is faster. A 30-second 1080p60 composition that took 4 minutes to render in AE (with full quality, real shadows, all the trimmings) renders in 12 seconds in HyperFrames. The reason is that the browser is rendering frames at 60fps live anyway; capturing them to disk is mostly the cost of PNG encoding. AE is doing far more work per frame because AE supports far more per-frame complexity. For the work I do — editorial motion, charts, type — the browser is more than enough, and the speed difference is enormous.

I expected to miss the community. AE has decades of tutorials, presets, templates, asset packs. HyperFrames has a year. But here is what I underestimated: the broader web design community is the HyperFrames community. Every CSS animation tutorial on the internet is a HyperFrames tutorial. Every typography pattern from Practical Typography or Butterick is a HyperFrames pattern. The asset library is the entire web.

0.00s · 0%

A typical day, before and after

Let me describe a real workflow shift, because abstractions are useless.

Before. A client asks for a 15-second product reveal. I open AE. I import the brand kit (a project file someone else built two years ago, with conventions I do not entirely remember). I set up a new composition, 1920x1080, 30fps. I import the product render (a 4K PNG sequence the 3D team gave me). I build the title sequence — text layer with a "Pop-Up" preset, modified. I tweak the easing. I render to a temp file. I send it to the client. They ask for the title to be bigger. I move the slider. I re-render. I send. They ask for a different color. I move the color picker. I re-render. I send. By end of day, I have five rounds of revisions, five exports, five DM links, and a sense of mild dread about which version is the canonical one.

After. Same brief. I open VS Code. I open the brand brand.css (a single file, version-controlled). I copy title-card.html from a sibling project — same brand, different copy. I change the copy. I open the preview pane (HyperFrames' npx hyperframes preview runs on :3000). I see the result live. The client is on a call; I share my screen. They say make the title bigger. I change font-size: 96px to font-size: 112px. They see it instantly. They say change the color. I change one variable. Instantly. I commit each change with a message describing what they asked for. I render once, at the end, when we are aligned. The final MP4 has a sidecar manifest pointing to the exact commit that produced it.

The day-to-day texture is different. I am no longer waiting for renders. I am no longer in an asynchronous tennis match of "send v3, get notes, render v4." The client and I move together.

What it took to switch

I want to be honest about the cost of switching, because it was nonzero.

The first two weeks were rough. I knew HTML and CSS — I had built websites — but I did not know motion in CSS at the level I knew motion in AE. I had to learn the idioms: animation-delay as a clock, character splitting, the cubic-bezier curves that map to the AE easing presets I had in muscle memory. Reading the motion graphics in 80 lines post would have saved me a week.

The next month was the unlearning. AE had patterns that did not translate. "Pre-comp this and animate the pre-comp" became "wrap in a div and animate the div." "Use a track matte" became "use mask-image." "Use the puppet pin tool" became... not possible, mostly. I had to retire effects I had built my career on.

By month three I was as productive as I had been in AE. By month six I was more productive. By month nine the agent loop kicked in and I started shipping volume I could not have produced in AE with twice the hours.

0.00s · 0%

Should you switch?

Here is my honest matrix.

Switch if: Your work is editorial, type-heavy, brand-driven, repetitive across many variants, or needs to plug into developer workflows (CI, version control, agents). You will be faster, your output will be more consistent, and your files will outlive your employment.

Do not switch if: Your work is heavy 3D, particle systems, advanced compositing, or anything that depends on a specific AE plug-in. The browser is not a replacement for Cinema 4D plus AE plus Mocha.

Hedge if: Your work is mixed. Use HyperFrames for the editorial layer (titles, lower thirds, charts, transitions) and AE for the effects work. Composite the AE outputs as MP4 clips inside your HyperFrames timeline. This is what I do for the rare project that needs both.

I do not think After Effects is going away. It is the right tool for a specific job, and that job is still being done. What I do think is that the field of "motion graphics" — which has lived inside AE for thirty years — is splitting. The editorial, brand-driven, agent-touchable half is moving to text. The cinematic, effects-heavy, manually-tuned half is staying. Both halves will be larger, faster, and more confident in five years than they are today.

The text editor is the new timeline. It looks different. It works better than you would expect. Open a new file — or try the in-browser playground without installing anything. See for yourself. If you came up through declarative-canvas tools, the Motion Canvas comparison is worth a read too.

@misc{okafor2026replacing,
  author = {Marcus Okafor},
  title  = {Replacing After Effects with a text editor},
  year   = {2026},
  url    = {https://hyperframes.video/blog/replacing-after-effects-with-a-text-editor},
  note   = {HyperFrames blog}
}

Marcus Okafor. (2026, May 9). Replacing After Effects with a text editor. HyperFrames. https://hyperframes.video/blog/replacing-after-effects-with-a-text-editor

[Replacing After Effects with a text editor](https://hyperframes.video/blog/replacing-after-effects-with-a-text-editor) — Marcus Okafor, 2026