Marcus leads design and motion at HyperFrames. Before that he shipped editorial motion for newsrooms and product launches. He thinks every easing curve has a personality.
Build an animated newsletter header in HTML, render it to a deterministic MP4, and ship a still PNG as the fallback for clients that strip video.
Build a scriptable meme video generator in HTML — top-text bottom-text reveal, punchline punch-scale, shaky-cam emphasis — and render reproducible MP4s from a CSV.
Build a job listing video for LinkedIn: company logo lands, title fades up, requirements stagger in, and an Apply button pulses — exported as deterministic MP4.
Build a fitness recap video generator: distance, pace, and elevation tick up, a route map traces itself, and weekly streak dots fill in — exported as MP4.
Generate a timeline infographic video from a JSON of milestones — a vertical spine draws downward, dots land on dates, labels slide in from alternate sides. Deterministic MP4.
A Twitch overlay alerts generator built in HTML/CSS — slide-in follower alert, deterministic CSS-transform confetti burst, slide-out. Render to MP4 or feed OBS as a browser source.
How to design and render an app splash screen as a deterministic MP4 — spring-scaled monogram, fading wordmark, and a sheen sweep. Ship a real splash screen mp4 in an hour.
Build an animated org chart video from a JSON tree — nodes that pop in level-by-level with SVG connectors that draw themselves. Deterministic MP4 from HTML.
A quote-card generator that produces a still PNG and a short animated MP4 from one HTML template. Same source, every social size.
A glassy weather card with sun, cloud, and rain morphs. Render to MP4 for daily forecasts, OG images, smart-display loops.
Real estate listing videos are a $2B/year market of nearly-identical 30-second clips. Here's how to template one and render thousands.
The Wrapped formula — a per-user year-end recap video — fits inside an HTML template and a deterministic renderer. Here's the architecture.
A count-up counter is the smallest data-viz pattern. Done well, it sells a number; done badly, it dances. Here's the version worth shipping.
A logo reveal in pure CSS — spring overshoot, wordmark stagger, and a render straight to MP4. No timeline tool, no plugins.
Lottie shines for tiny interactive web animations. For everything else — long-form, brand sting, MP4 export — HTML and CSS are a better fit. Here's why.
Five title-card styles from five directors, in pure HTML and CSS. Symmetric framing, serif italics, and the typography choices that signal each one.
Five kinetic typography patterns for headlines, with the CSS and JS that drives each one. No motion designer required.
The lower-third is the most reused asset in broadcast. Here is the HTML version, with variable knobs and a render to MP4.
How well do current LLMs actually produce motion design? An honest field test of the major models on animation prompts, the failure modes that keep recurring, and the few-shot patterns that fix them.
Type, timing, and tonality. The three constraints that turn motion graphics from decoration into editorial design, with examples from the work that taught me each one.
Animated gradients, mesh gradients, and conic sweeps in pure CSS — five techniques that hold up at video resolution, with MP4 export.
Six easing curves I use professionally, what they communicate, and why the difference between an okay curve and a great one is the difference between an ad and a Super Bowl ad.
I spent eight years in After Effects. I spent the last year of work in VS Code. Here is what I gained, what I lost, and what surprised me on the way.
A complete title sequence — bouncy text, parallax backdrop, signal-color accent, cinematic ease — written in 80 lines of plain HTML. No framework. No tooling beyond the browser.
Twelve easing curves visualized side-by-side, with the cubic-bezier values for each. No physics lecture.
The animated checkmark, the elastic ring, the confetti — the full Stripe-style payment success animation in CSS. Free source, MP4 export.
Build broadcast-grade sports scoreboards from JSON. Live-style score bug, animated transitions, team color theming, MP4 export for socials.
Tailwind CSS v4 animations: utility classes, custom keyframes, motion variants. With live examples and copy-pasteable snippets.
Build animated comparison tables for pricing and feature pages. Row-stagger reveal, highlight column, checkmark animation, MP4 export.
Build painterly, generative mesh gradients in pure CSS — animated, deterministic, Stripe-style backgrounds. With seeding for reproducible renders.
Build animated pricing table videos for ads and product pages. Tier reveal, recommended-plan glow, savings counter. Source included, MP4 export.