The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
No After Effects. No manual keyframes.
Just pure React, frame-level spring math, and code.
Built this SaaS product reel completely with Remotion at 60fps. Programmatic motion design makes it effortless to keep animations 100% true to real product UI while allowing programmatic variant generation.
💯 What you receive as a deliverable:
🎬 Production Video: 4K/60fps .mp4 or .webm ready for social, ads, and landing pages
🪟 Transparent Overlays: Alpha-channel .mov (ProRes 4444) to drop over your existing product footage
🔁 Looping Assets: Optimized .gif files for GitHub readmes and email campaigns
💻 Web Native: Interactive React @remotion/player components or automated server-side render scripts
Stack:
• React
• Remotion (useCurrentFrame, spring, interpolate)
• Headless Chromium render pipeline
Taking on 2 new projects this month for SaaS and dev-tool teams looking for high-end product animations.
DMs are open—let’s build.
100% underrated! A typical reel renders in under a minute on a normal setup, but the real time-saver is iteration. Changing colors, text, or timing takes 5 seconds in code without touching heavy project files.
Appreciate the love! Have you tried code-driven video yet?
wonderful. That props workflow is an absolute game-changer. Drop a link to that brand film if it's public.
would love to check it out.
Love that the animations come straight from the real product UI. As a React dev who builds dashboards, I can see how much time that saves when the UI changes. Do you import the product's actual components into Remotion, or rebuild simplified versions just for the video?
Usually simplified, decoupled versions of the real components! I keep the exact same styling, tokens, and markup from the codebase, but swap live state/APIs for mock fixtures and Remotion spring math. That way the render stays fast, deterministic, and completely isolated from backend changes.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Good evening, I'm new here.
Just want to share the new video I made with Motion Graphics for my new portfolio. I built custom Next JS apps with deep integrations, and I focus on efficient infrastructure builds.
Some of my specialty are AI agent platforms for companies and High end Motion Graphics.
Looks great 👏
This Framer Page Load is made by me recently. 🚀
The page effect of Framer took shape in just 5 Steps!
i've tried to build this without any components, so I only set up the animations and loadings ⚡️
Check the replies for the rest of the tutorial.
Clean work, love it.
Day 1 of my 100 days of components 🧩
I saw a post in the Framer community about “100 days, 100 components” and I couldn’t stop thinking about it. So I’m doing it too: one custom Framer component at a time, for 100 days or until I land my next client, whichever comes first.
Day 1: Scroll Frame. A border around the viewport made of four marquee strips that move with your scroll and circulate around the edges. Each strip is a sequence of cells you can edit: wide, condensed and script text, pills, icons, your own logos, and inverted solid blocks.
I’m open for Framer, UX/UI and Shopify projects. See my work at jessicamena.com and let’s talk.
100 days of custom Framer components is a great challenge, and the scroll frame is a strong start. Looking forward to following the series.