๐๐ฎ๐ ๐ญ๐ณ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I built a hover image slider animation. As you hover, images slide smoothly, creating a more interactive and engaging way to explore content.
Still building. Still refining.
2
2
20
๐๐ฎ๐ ๐ญ๐ฒ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I took a slightly different turn.
Instead of regular animations, I experimented with scroll-based image and text reveal using variants.
As the user scrolls, the content gradually reveals itself, creating a more interactive storytelling experience.
What Iโm discovering is that scroll interactions can do more than decorate a page. They can control pacing. They decide when the user sees information and how the story unfolds.
Little by little, this challenge is helping me think less like someone designing static pages and more like someone designing experiences.
Still building. Still experimenting.
0
9
๐๐ฎ๐ ๐ญ๐ฑ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I built a hover preview image animation.
When you hover on an element, a preview image smoothly appears.
Simple interactionโฆ but it makes the website feel alive.
Small details like this are what turn a normal website into a premium experience.
Still building every day.
Design โ Build โ Improve.
1
30
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ
Today I experimented with a horizontal smooth scroll animation.
The goal was to make content move naturally as users navigate across sections, instead of feeling abrupt or static.
What I learned:
โข Smooth horizontal movement helps guide attention
โข Transitions make the interface feel more fluid
โข Small motion details improve the overall experience
Animations are not just for aesthetics. They help users understand where they are and where they are going.
Still learning.
Still refining.
1
24
๐๐ฎ๐ ๐ญ๐ฏ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
In order to get more grounded in framer, I focused on optimization for different screens. A website might look perfect on desktop, but the real test is how it behaves on tablet and mobile.
So today was about refining:
โข Breakpoints
โข Spacing adjustments
โข Section behavior across screens
โข Text readability on smaller devices
โข Keeping animations smooth across layouts
Because great websites arenโt just designed for one screen. Theyโre designed for every screen.
Still building. Still improving.
1
22
๐๐ฎ๐ ๐ญ๐ฎ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Still exploring scroll animations today.
I focused on refining how elements appear and move as users scroll through the page making the transitions feel smoother and more natural.
One thing Iโm realizing is that good scroll animation isnโt about doing too much. Itโs about timing, subtlety, and guiding attention.
The goal is simple: Make the experience feel smooth without the user even noticing the effort behind it.
Still building. Still refining.
1
24
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
Todayโs focus was scroll animations.
I experimented with how elements appear and move as users scroll through a page, making the experience feel smoother and more engaging.
What Iโm learning is that scroll animations shouldnโt just look cool. They should guide attention and support the story of the page.
Little by little, these details are helping me understand how to make websites feel more alive and premium.
Still building. Still learning.
0
44
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
Still deep in the world of micro-interactions.
Today I built a checkbox animation, a small interaction, but one that makes a big difference in how an interface feels.
Instead of a static check, I added motion so the action feels responsive and satisfying.
When a user clicks something, the interface should respond in a way that feels alive.
Still learning. Still refining the details.
0
20
๐๐ฎ๐ ๐ต ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I focused on icon animations and experimented with creating a signature animation using the pen tool.
Itโs one of those small details that can instantly make a website feel more personal and premium.
This challenge keeps teaching me that the difference between a normal website and a great one often comes down to motion and tiny interactions.
Still building. Still learning.
0
33
๐๐ฎ๐ ๐ด ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Happy Sunday!
Today I focused on icon animation.
I animated a progress stepper from start to finish and recorded the whole process.
What looked like a small element actually took a lot of thinking:
How the icon transitions
How the progress flows
How the motion feels natural
These tiny details are what make interfaces feel alive and premium.
Still building. Still learning.
0
38
๐๐๐ฒ ๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
Iโve been learning how to properly design landing pages the past few days. Today I focused on micro-interactions and animations to give the site a more premium feel.
Small things like hover effects, smooth entrances, and subtle motion.
Turns out the difference between an average site and a premium oneโฆ is usually the little details.
Still building. Still learning.
#BuildInPublic (https://x.com/hashtag/BuildInPublic?src=hashtag_click) #Framer (https://x.com/hashtag/Framer?src=hashtag_click) #NoCode (https://x.com/hashtag/NoCode?src=hashtag_click) #WebDesign (https://x.com/hashtag/WebDesign?src=hashtag_click)
0
45
๐๐ฎ๐ ๐ฒ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Continuation from yesterdayโs build.
Day 5 was about laying the foundation - Navbar, hero section, and the first subsection.
Today was about expansion and structure.
I focused on building out more subsections, pushing deeper into advanced CMS integration, and working with layout templates to make the system scalable. Then I wrapped it up by structuring the footer to tie the entire page together.
What looked like โjust adding sectionsโ was actually deeper work:
โข Making subsections reusable
โข Structuring CMS collections properly
โข Ensuring layouts stay responsive
โข Keeping animations consistent across sections
Day 6 done. The goal isnโt perfection. The goal is compounding skill, one build at a time.
2
60
๐๐ฎ๐ ๐ ๐ผ๐ณ ๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today wasnโt about skill. It was about resolve. I tested myself by building completely from scratch a framer template from Framer Marketplace. No YouTube, No step-by-step walkthrough, because if Iโm serious about building Framer templates from scratch, I canโt always rely on someone elseโs thinking.
This is a 2-part series.
Part 1: โข Navbar โข Hero section โข
First subsection I used component templates strategically for the header (thinking systems, not just visuals). Then layered in effects like ticker and slideshow.
Part 1 done.
Part 2, we add the other subsections, and footer.
1
47
๐๐ฎ๐ ๐ฐ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ
Today, I still continued with my framer journey by starting from a blank canvas. Followed along the tutorial on YT. The focus was on building an animated, fully responsive website from scratch, making sure:
โข Breakpoints actually made sense
โข Sections flowed naturally
โข Animations felt purposeful
โข Layout held up across devices
โข Nothing broke under resize
Starting from a blank canvas exposes your real understanding. Every day I build, I feel my thinking getting sharper.
Less guessing.
More intention.
More control.
If you can design it and build it, you think differently.
Day 4 complete.
Weโre not stopping.
2
3
222
๐๐๐ฒ ๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐ ๐ซ๐๐ฆ๐๐ซ
Today, I built a high-level animated hero section.
Not just something that โmovesโ but something that feels intentional.
I used effects components from Framer University and pushed them further:
โข Layered entrance animations
โข Staggered text reveals
โข Subtle parallax movement
โข Smooth easing curves
โข Scroll-triggered transitions
Day 3 done. We keep building till i land my first framer gig!
1
62
๐๐๐ฒ ๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐ ๐ซ๐๐ฆ๐๐ซ
Today wasnโt about colors.
It wasnโt about fancy hero sections.
It was about structure.
Setting up proper breakpoints.
Defining clean sections.
Thinking responsive before thinking beautiful.
Because hereโs what most designers wonโt admit:
If your structure is weak, your design will collapse under pressure.
2
109
Iโm starting a Framer building challenge.
Not for clout.
Not for content.
But to stretch myself.
So for the next few weeks, Iโm building consistently in Framer.
No-code isnโt a trend anymore.
Itโs becoming part of a designerโs lifestyle.
The ability to:
โข Design the idea
โข Prototype the interaction
โข Publish the live site
โข Iterate instantly
๐๐ฆ๐ณ๐ฆ'๐ด ๐ต๐ฐ ๐๐ข๐บ 1 ๐ฐ๐ง ๐ณ๐ฆ๐ญ๐ฆ๐ข๐ณ๐ฏ๐ช๐ฏ๐จ ๐ง๐ณ๐ข๐ฎ๐ฆ๐ณ.
I dived deep into the basics, styling, components, Z index, responsiveness and animations. This was a playful design to re-boost my knowledge in designing from scratch without using templates.
2
64
I vibecoded an AI smart scheduler that can help accounting firms consultants schedule task and make it easy for people to see their task, used Figma and Figma make to ship from design to code. The future is AI
#AIcapcutchallenge #maxearnings #aidesignflows #aivideos
2
114
I created an "how it works" section container for a US based immigration company website, and animated it on Jitter, this bringing the design to live. Subtle entrance. Soft easing.
No overdesign, just smooth storytelling through motion. Kindly share your feedback. Thanks.
2
96
Designed a bento grid for AI based start-up that deals with AI Agents to help navigate your journey as an immigrant in the United States.
Actively seeking gigs and open for collaboration. ๐ฅ
4
3
211
Deigned a real estate properties page where clarity does the selling.
No clutter.
No visual noise.
No โlook-at-meโ UI.
Just:
โข Clean layouts
โข Clear hierarchy
โข Properties that feel easy to scan, compare, and trust
Open to collaborations, partnerships, and interesting product work.
#Contra #BuiltOnContra #DesignOnContra #ProductDesign #UXDesign #UIDesign #DesignSystems #StartupDesign #WebDesign #CreativeCollaboration #whennotai #feelsreal #asciidreams
2
77
I explored designing a real estate agent dashboard where agents can track their property listings, manage sales and revenue. It was well thought out layout.
I'm actively looking to collaborate, and open for freelance gigs. I deliver 100%
#clienttips #whennotai #figma #buildinpublic
0
70
Currently building an event app, here is a snapshot of the event tickets page