Mehedi Hasan
10 years of product design experience to Framer, blending business strategy, UX, and expressive motion in websites that converts and work.
10 years of product design experience to Framer, blending business strategy, UX, and expressive motion in websites that converts and work.
Nightjar — a landing page template for products that run while you sleep.
The whole site is one night, told in order. 21:00 lights out. 23:15 the
plan. 02:47 the run. 03:12 what it refused to do. 07:00 it hands you the
morning and stops.
Pricing you set by drawing your own week. An order field you type into in
plain English. A draggable night you can scrub. A 404 that keeps trying
to find the route and gives up out loud.
21 code components, three breakpoints, no dependencies.
Live demo → https://wandavision.framer.website/
Dott landing page - Extended View.
4 cards stacking up one upon another as you go and complete each of your tasks. Gooey UI for the menu bar and some pretty shaders for cards.
Grab Dott for free NOW!
Remix link: https://framer.link/Pgi67NZ
To-do list done. That’s the moment. Built fully in Framer. Scroll-based animation. Finish the last task, and a quiet room fades in: a closed notebook, still air, then “You’re done for the day.”
Remix Link: https://framer.link/Pgi67NZ
Every launch page I open is louder than the last.
So I built one that gets quieter. Dott is a waitlist template for consumer apps, and its hero is a to-do list that completes itself as you scroll — tasks strike through one at a time, the counter falls to "All clear," and the page ends on a single dot.
One long page plus Privacy, Terms and a custom 404. CMS-driven FAQ, three breakpoints built properly, 98 on accessibility.
Free to remix → https://framer.link/Pgi67NZ
Record page from Jarvis project - Desktop version (1200-1440px)
Some SVG based icons animated on this page, nothing but CSS in action.
"Remember" A gallery application landing page.
First draft of the exploration, looking quite strong till now. Not fully convinced on the hero animation, thinking of another round of iteration to nail it down for once and all.
Jarvis/NightJar "Product" page. Desktop version: 1440- 1200px.
The hero is a cozy animation that shows you what the agent does for you throughout the night. Followed by a "How it works" section with a scroll-based interaction where the card on the right side updates to show you what it has done.Simple and minimal, intentionally.
The "How it works" section could use some refinement to make the animation feel more polished.
Here's the final version of "Jarvis/NightJar" Homepage - Tablet Breakpoint! (810px)
Packed with lots of micro animations, this has to be one of the best projects I've worked on till now. Design language is plain and simple.
Drip Hero Exploration!
Extended weekend fun! Trying to convert some X pieces into functional Framer sites.
Weekend experiment, born from a client brief.
A globe spins. It finds a city. The world zooms in — and never quite lets go. The street map fades in below you. A train moves through the districts. Every neighbourhood is clickable. And the clouds that drifted over the globe? They keep drifting. Right across the city. One continuous world. Pure @threejs, raw WebGL, zero geo libs. Clouds were the detail nobody asked for. Couldn't leave them behind.
Here's the final version of "Jarvis/NightJar" Homepage!
Next to come "Tablet and Phone Breakpoints".
Packed with lots of micro animations, this has to be one of the best projects I've worked on till now. Design language is plain and simple.
404 page from "Jarvis" Project!
A cute mascot who has tried all his tricks but couldn't get any result.
What can "Jarvis" do for you?
This animation clearly shows you the answer. It can automate your night so that you can wake up to a fresh and free morning.
Jarvis Plan Page.
Pay for as much as you use. When you use, how ever you use.
Made the video background with Seedance 2.5 and rest of the page fully native in framer.
Orders page hero section from "Jarvis" Project.
Continuing the same story arc, Jarvis already has his task orders written on the board. Time to get them done one by one and publish a full report in the morning.
How it works page from "Jarvis" project!
Nightjar runs one shift a night. Here is every phase of it in order, including the parts where it stops and waits for you, and the part where you stop it.
Detail animation from the NightJar project.
Every job that you create gets a plan you can read in ten seconds. It writes it out before it touches anything - one step at a time, each with a timestamp and a tag and marks the step where it stops and asks you. Ten seconds is the spec, not a nice-to-have.
