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
while reworking our website, we've been wanting to add a few more playful animations
a pretty good excuse to finally dive into some GSAP
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
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.
Made this today, React JS + GSAP
Animated - intro + hero section
text font size change feels little glitchy when noticed which is obvious with text, have to find out more refined way to do the same. (can be an image)
Aurum 2.0: Interactive 3D Luxury Watch Website
A website for a fictional Swiss watch brand where the product is the experience. The watch is a real-time 3D model built in code. It assembles itself when the page loads, comes apart layer by layer as you scroll, flips over to show its working movement, and changes finish while you watch.
What you’ll see in the video:
Assembly intro: after a gold loading ring, the watch flies together from its separate parts.
Live dial: the hands show your real local time, and the light on the metal follows your cursor.
Exploded view: seven layers separate as you scroll, each with a label that tracks it in 3D.
The movement: the watch flips to show the movement through the sapphire caseback, with meshing gears, a swinging balance wheel and a turning rotor.
Configurator: three case finishes and three dials, with the reference code and price updating live.
Viewing request: a “request a private viewing” form with validation.
It works on desktop and phone, and respects reduced-motion settings. There’s also a fallback for older browsers.
Aurum is a fictional brand. The concept was designed and built by Meji Builds.
Wow, the scroll bound exploded view is definitely going to look flawless on the website.