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
Bring your story to life with a cinematic book trailer! 🎬📚 Capture readers’ attention with stunning visuals, engaging scenes, and a powerful atmosphere that makes your book unforgettable. Let your story shine on screen!
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
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.🔥
The brief was simple. Show a new personalized news feature.
The obvious solution was to show a few clicks in the UI as you choose your topics. Clear, but not very interesting.
So I pulled that moment out of the interface first and turned it into a cloud of topics. You get the idea before you even see the product, then the video drops you back into the real UI and shows where it lives.
I really like these tiny decisions. The feature stays the same, but it feels easier to get and a lot more fun to watch.
Pulling the topic cloud outside the UI makes the feature instantly clearer.
KOVA is a coffee concentrate made for busy mornings and long workdays: rich, smooth coffee that's quick to make and easy to enjoy.
I brought KOVA to life online, with one consistent look across every channel:
Website: designed and managed on Shopify, built around the product and easy to buy from
Social media: content and reels that keep the feed fresh and on brand
Ads: campaigns that put KOVA in front of the people it's made for
Need a website, content and ads that work together? Message me here on Contra. Which part of this project would you like to see in more detail?
Oh that's unique great job Awais 🎉🎉🎉
The visuals and motion effects are great ❤️❤️
