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
One of my favorite projects this year: a full migration of ecopiatech.com from a legacy PHP CMS to Webflow.
Ecopia builds AI-generated 3D maps, and their site had a lot going on. Smooth scroll, parallax, character reveals, a fullscreen menu with an animated tile grid, timeline carousels, before/after sliders. The brief was simple: rebuild it 1:1.
So instead of eyeballing it, I went into the live site's CSS and measured everything. Easing curves, delays, durations, even the "random" text reveal turned out to be a 6-step delay cycle per word. Then I rebuilt it in Webflow so it feels exactly like the original, but now the team can update everything on their own.
On the content side:
220+ blog posts, news and case studies moved into Webflow CMS
Before/after sliders, videos and map embeds inside rich text, handled with simple shortcodes the editors can use
250 redirects mapped and verified so no old URL breaks
HubSpot forms restyled to match the brand, plus tracking set up for launch
The fun part of projects like this is the details nobody notices when they're done right.
Take a look: https://www.ecopiatech.com/
So, so cool!
Thank you Bella🚀
Well done
Thank you Jos🙌
Thank you, I appreciate it🙌
Clean and elegant
Thank you Nesar🙌
You nailed it! 🚀
Thank you!
Pulling the easing curves and delays straight from the live CSS instead of eyeballing them is the right way to do a 1:1 rebuild, and the 6-step delay cycle behind the "random" reveal is a great find. Did the 250 redirects all fit in Webflow's built-in 301 list, or did you need something in front of it?
amazing
Thank you Sahil🙌
Nice work
Thank you Sujon🙌
Super amazing!
Thank you Damilola🙌
Superb design !
Huge migration! Keeping all those interactions intact on Webflow is really impressive
Nice
Measuring easing curves and delays straight from the live CSS is the right way to do a 1:1 migration. Eyeballing it always shows in the details.
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
Big photo or product mockup: which Webflow hero tells you more?
Wright Implement (Webflow), a John Deere dealer, with a big field photo up front.
Per Diem (Webflow), branded ordering apps for cafes, with the app mockup up front.
Two Webflow sites, one job: tell a visitor what the company does in five seconds.
Which one did you understand faster?
Live: wrightimp.com · tryperdiem.com
More builds: instagram.com/sellwrightstudio · youtube.com/@sellwrightstudio
1 voted
50%
1 voted
50%
2 votes
Closed
The product mockup communicates the value faster for me. A field photo creates atmosphere, but a clear product visual helps visitors understand the offer almost instantly. Great comparison! 👏
Exploring color variations for the Mindora AI companion landing page.
Layout, typography, and 3D elements stayed identical.
I only changed:
- the gradient background, - accent color, -and button styling to test how color changes brand perception.
Which direction would you choose for an AI product?
5 voted
71%
2 voted
29%
7 votes
Closed
This is a great study! Love how you kept layout identical and just tested colors.
The orange gradient makes it feel so warm and friendly for an AI companion. Perfect choice for "better thinking". Smart way to A/B test without redesigning everything.
Inspiring work!
I developed this interactive Webflow website using custom JavaScript, Matter.js, and GSAP to create an engaging, animation-rich user experience.
The project combines modern web design with advanced motion effects, interactive elements, and smooth scrolling animations to deliver a visually distinctive digital experience.
Key Features & Technologies:
Webflow Development: Built and structured the website in Webflow with responsive layouts and reusable components.
GSAP Animations: Implemented smooth transitions, scroll-triggered animations, and dynamic visual effects.
Matter.js Physics: Integrated physics-based interactions to bring dynamic elements to life.
Custom JavaScript: Developed custom interactions and animation logic beyond Webflow's native capabilities.
Responsive Design: Optimized the experience for different screen sizes and devices.
Interactive User Experience: Combined animation, motion, and functionality to create a more engaging browsing experience.
Tech Stack: Webflow, JavaScript, GSAP, Matter.js, HTML, CSS.
Live Project: https://swellydesign-116bb3.webflow.io/home-copy
Matter.js inside Webflow is a fun combo, physics interactions always grab attention. Curious how you handled performance on mobile with GSAP and physics running together.