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
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
Animation starts with imagination, not keyframes
Is there anything I love more than creating animations?
Oh, yes! Coming up with ideas!
For me, it’s an energy-intensive process that takes a lot of focus, creativity, and dedication.
But that’s where the magic happens!
The idea for this little elephant popped into my head in a brainstorming session - literally within seconds.
I was invited to join a rather time-sensitive project for KTG Research & Innovation, so we had to hit the ground running.
And honestly? I think this little guy turned out to be a perfect fit for
the app’s goals and its young audience.
The mission was to create a character who would guide children through their activities.
As they progressed from one level to the next, the character needed to keep their curiosity alive and encourage them to keep going, helping their curiosity take root and their confidence blossom along the way!
That’s when the idea of a tiny garden came to life.
A garden the character could grow, nurture, and water as the children progressed through the app.
But wait… who could possibly be better at watering plants than an elephant with its wonderfully functional trunk?
And just like that, our elephant friend came to life!
From there, the process was pretty straightforward: a paper sketch, a vector character in Sketch, and animations in Rive. My usual workflow, from the first doodle to the final animation!
And now… drumroll, please!
Meet the adorable cute elephant!
He jumps with joy, dances like nobody’s watching, and, of course… waters his garden!
I truly hope he’ll bring an extra joy to the app’s youngest users and inspire them to keep growing, exploring, and learning, one level at a time.
adorable!
Sunny Rock — Cinematic Paris Travel Website | Creative Web Development
Experience Paris through Sunny Rock, a cinematic travel website concept designed to combine immersive visuals, elegant UI/UX, and interactive scrolling into a premium digital experience.
This self-directed project explores modern web design through cinematic imagery, scroll-driven animations, glassmorphism, smooth transitions, and responsive layouts.
🛠️ Technologies & Skills
HTML5 & CSS3 — Semantic structure, modern styling, and responsive layouts
JavaScript (ES6+) / TypeScript — Interactive behavior and animation logic
React.js — Reusable components, hooks, and state management
Tailwind CSS — Utility-first styling and responsive design
HTML5 Canvas API — 2D rendering for visual effects and image sequences
Scroll-Driven Animation — Frame-by-frame image sequences synchronized with scrolling
requestAnimationFrame & Linear Interpolation (Lerp) — Smooth animation updates
Lenis Smooth Scrolling — Fluid scrolling experiences
Intersection Observer API — Scroll-triggered reveals and entrance animations
UI/UX & Visual Design — Visual hierarchy, typography, glassmorphism, and interaction design
SVG Graphics — Scalable icons and vector elements
AI Visual Generation & Prompt Engineering — Cinematic visual assets
Cloudinary — Media hosting and image optimization
Performance Optimization — Efficient asset loading and animation rendering
Python & Browser Automation — Development utilities, asset processing, and testing
✨ Design Highlights
Cinematic, immersive visual storytelling
Premium travel-inspired aesthetic
Smooth, scroll-based animation sequences
Modern glassmorphism interface
Responsive layouts for different screen sizes
Interactive elements and refined micro-interactions
Project Type: Self-Directed Portfolio Project
Focus Areas: Creative Front-End Development · Web Design · UI/UX Design · Interactive Experiences · Animation
Designed and developed by Ubaid | Ubaid Web Studio.🔥
Spent the last few days diving deeper into Rive, focusing heavily on character animation and state machines to bring this fictional German learning app to life.
Learning a new language shouldn't feel like staring at a spreadsheet. Here is how I used smooth, reactive animations to make interactive feedback feel natural and engaging:
Rive CLI + Claude is truly a game changer🔥
