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
Cooking up a Product Launch Video for The Brand Kits @Framer Plugin
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
NOMA: Product Launch Template
A bold, loopable launch animation for any product, built entirely in SVGator.
An orange spark bursts into a blue stage, ingredients scatter outward, and the product drops in with real weight before the headline, benefits and call-to-action land beat by beat. Every layer is named, every line of text is editable, and the product image swaps in seconds. Change the copy, colours and photo, and the choreography stays exactly the same.
Built with the SVGator MCP: the full scene, layer structure and keyframed motion were created through MCP calls, then polished in the editor.
Clean animation, smart design, and great execution! 🔥🚀
I’m Rokas - a Framer Developer & Official Framer Expert.
I turn Figma designs into production-ready Framer websites, customize templates, and fix/troubleshoot existing Framer sites.
Have a Framer project, need a template customized, or something fixed? DM me.
Portfolio: https://contra.com/rokas_griskonis1
contra.com
Rokas Griškonis - Framer Designer | Contra
I fix & develop Framer websites. Official Framer Expert. . View Rokas Griškonis’s Profile on Contra. The Independent-first, commission-free freelance marketplace shaping the future of work.
Official Framer Expert status plus the production-ready angle is a strong combo. Positioning around fixing and troubleshooting existing sites is smart, that is usually where the urgent, paid work lives.
Interactive Themed Developer Portfolio & Web Showcase | React, Framer Motion & Tailwind CSS
Key Features & Highlights:
Custom Vector Artwork & Layered Visuals:
Implemented an intricate, responsive fixed SVG backdrop showcasing a night cricket oval under floodlights, illuminated mountain peaks, starry sky, and subtle ambient glows.
Preserved full content readability and contrast using layered dark vignettes and custom opacity masks.
Fluid Framer Motion Animations:
Designed staggered entry transitions, conic orbit rings, continuous pulse indicators, and interactive micro-animations.
Added smooth hover states, reactive button effects, and dynamic drawer transitions.
Modern Glassmorphism UI:
Applied frosted glass design patterns (backdrop-blur, semi-transparent RGBA palettes, and soft glowing border outlines) across all cards, timelines, forms, and navigation elements to allow the themed backdrop to show through elegantly.
Clean Architecture & Iconography:
Streamlined visual consistency by adopting modern vector icon sets via react-icons across navigation, badges, timeline bullets, and interactive controls.
Purged unnecessary toggles and redundant state to enforce a refined, distraction-free aesthetic.
Full-Stack Form Integration:
Configured asynchronous contact messaging using EmailJS with client-side validation, error handling, status banners, and loading indicators.
Optimized & Responsive:
100% mobile, tablet, and desktop responsive layout with a custom slide-out navigation drawer.
Built using Vite for optimized bundle sizes, fast hot module replacement (HMR), and clean production builds.
Tech Stack:
Frontend: React 18, React Router, JavaScript (ES6+)
Styling & Design: Tailwind CSS, PostCSS, Custom CSS Variables, Glassmorphism
Animation & Interactivity: Framer Motion
Icons & Assets: React Icons (react-icons), Custom Vector SVG
Third-Party Services: EmailJS
Build Tooling: Vite
Impressive attention to detail. The themed visuals and smooth animations give the portfolio a distinctive identity.