๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
Today I created a smooth horizontal scroll slider interaction to present content in a more engaging way.
This pattern helps:
โข Highlight featured content
โข Improve storytelling on long pages
โข Add a premium interactive feel
Exploring how motion and layout can work together to create better web experiences.
0
11
๐๐ฎ๐ ๐ฎ๐ต ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I created a mouse hover background reveal interaction to make sections more interactive and engaging.
This type of interaction helps:
โข Improve visual feedback
โข Encourage user exploration
โข Create a more immersive browsing experience
Subtle motion and interaction like this can significantly elevate a websiteโs perceived quality.
Still refining my motion design workflow.
0
7
๐๐ฎ๐ ๐ฎ๐ด ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I recreated the Apple-inspired liquid glass effect using the Workshop plugin.
This style helps:
โข Create depth through transparency
โข Add a modern, premium visual layer
โข Enhance UI hierarchy when used correctly
But it requires strong control to avoid visual clutter.
Still refining how I apply advanced UI effects in real-world projects.
0
27
๐๐ฎ๐ ๐ฎ๐ณ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I used the Workshop plugin to create a reusable image slider component.
This approach helps:
โข Speed up development
โข Maintain design consistency
โข Build scalable systems for client projects
Moving beyond one-off designs into component-driven workflows is key for delivering high-quality, efficient web experiences.
Still refining my process.
0
12
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
Today I created a smooth image scroll animation to improve visual flow and user experience.
This helps:
โข Create seamless transitions
โข Improve content engagement
โข Add a refined, premium feel
Subtle motion like this is what elevates a website from basic to high-quality interactive design.
Still refining my motion workflow for real-world projects.
0
12
๐๐ฎ๐ ๐ฎ๐ฑ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I created a hover image gallery effect using variants to make content more interactive and dynamic.
This approach helps:
โข Improve user engagement
โข Create smooth state transitions
โข Build scalable interaction systems
Using variants properly turns simple components into flexible, high-quality UI systems.
Still refining my workflow for building better interactive experiences.
0
15
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
Today I created a 3D rotation carousel animation to present content in a more engaging and interactive way.
This approach helps:
โข Add depth and visual interest
โข Improve content exploration
โข Create a more modern, premium feel
When done right, it turns a basic carousel into a strong interactive component.
Still refining how I use motion to enhance real-world web experiences.
0
12
Today I worked on a modern 3D hover tilt interaction to enhance user engagement and visual feedback.
This kind of micro-interaction helps:
โข Improve interactivity
โข Add depth to UI elements
โข Create a more premium feel
When used properly, it elevates simple components into high-quality interactive experiences.
Still refining motion and interaction for real-world projects.
0
18
๐๐ฎ๐ ๐ฎ๐ญ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I worked on a 3D parallax scroll animation to create more depth and engagement in web layouts.
This technique helps:
โข Add visual hierarchy
โข Guide user attention
โข Create a more immersive experience
Used properly, it elevates a website from basic to premium interactive design.
Continuing to refine motion and interaction for real-world client projects.
0
27
๐๐ฎ๐ ๐ฎ๐ฌ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
Today I worked on a 3D rotating text cube animation, focusing on scroll transform, depth, and perspective.
This kind of interaction adds:
โข Visual depth
โข Stronger engagement
โข A more modern, premium feel
But it only works when itโs intentional and performance-conscious.
Continuing to refine how I use motion to create high-quality, interactive web experiences for real-world projects.
0
25
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
Today I explored sticky scroll animations using scroll transform to create more controlled and engaging layouts.
This approach helps:
โข Guide user attention
โข Improve content flow
โข Add depth without clutter
For client projects, these details make the difference between a basic site and a premium interactive experience.
Still refining my motion workflow to build better, more engaging websites.
0
27
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ
Today I worked on a text cycle animation using the looping method. I created a smooth text transition that loops through key messages without breaking the flow of the page.
What Iโm learning is this:
You donโt always need complex visuals to grab attention. Sometimes, well-timed text motion does the job better.
It keeps the interface dynamic.
It communicates more in less space.
It guides the user without overwhelming them.
This is the kind of detail that makes a website feel intentional and alive.
Still building. Still refining.
1
52
๐๐ฎ๐ ๐ญ๐ณ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
4
125
๐๐ฎ๐ ๐ญ๐ฒ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
29
๐๐ฎ๐ ๐ญ๐ฑ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
50
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ
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
37
๐๐ฎ๐ ๐ญ๐ฏ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
37
๐๐ฎ๐ ๐ญ๐ฎ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
39
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
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
64
๐๐๐ฒ ๐๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
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
29
๐๐ฎ๐ ๐ต ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
44
๐๐ฎ๐ ๐ด ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
48
๐๐๐ฒ ๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐๐ซ๐๐ฆ๐๐ซ ๐ฎ๐ง๐ญ๐ข๐ฅ ๐ข ๐ ๐๐ญ ๐ฆ๐ฒ ๐๐ข๐ซ๐ฌ๐ญ ๐ ๐ข๐
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
52
๐๐ฎ๐ ๐ฒ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
64
๐๐ฎ๐ ๐ ๐ผ๐ณ ๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ ๐๐ป๐๐ถ๐น ๐ถ ๐ด๐ฒ๐ ๐บ๐ ๐ณ๐ถ๐ฟ๐๐ ๐ด๐ถ๐ด
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
51
๐๐ฎ๐ ๐ฐ ๐ผ๐ณ ๐ฟ๐ฒ-๐น๐ฒ๐ฎ๐ฟ๐ป๐ถ๐ป๐ด ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐ฟ
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
229
๐๐๐ฒ ๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐ ๐ซ๐๐ฆ๐๐ซ
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
66
๐๐๐ฒ ๐ ๐จ๐ ๐ซ๐-๐ฅ๐๐๐ซ๐ง๐ข๐ง๐ ๐ ๐ซ๐๐ฆ๐๐ซ
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
113
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
71
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
119
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
101
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
217
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
79
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
72
Currently building an event app, here is a snapshot of the event tickets page