Forem: Shoaib

Motion UI with Framer Motion in 2025 — More Than Just Animations

Shoaib — Sun, 13 Jul 2025 07:18:49 +0000

✍️ By Shoaib — A Full-Stack Developer Sharing What Actually Works

🧠 TL;DR

Framer Motion is not just for pretty effects — it’s a serious tool for delivering smooth, accessible, and performant UI.

In 2025, micro-interactions, scroll-based animations, and motion feedback aren’t just “cool” — they’re UX essentials.

I’ll show how I’ve used Framer Motion in real projects (like my portfolio and client work), how to avoid common mistakes, and how to make your animations production-ready.

🚀 Why Motion UI Actually Matters Now

Let’s be honest: I used to think animations were “fluff.”

But after working on multiple production projects, I’ve realized micro-interactions and intentional motion can:

Improve user engagement
Guide attention (especially in forms, navigation)
Add brand identity
And yes — make your UI feel alive

But only when done right.

That’s where Framer Motion comes in.

🛠 What Is Framer Motion?

Framer Motion is a production-ready animation library for React.

It gives you simple primitives like motion.div, variants, and AnimatePresence — all built with performance and accessibility in mind.

It’s built on the Popmotion engine but feels very “React” to use.

🛠 How I Use Framer Motion in My Projects

1. Subtle Page Transitions

I used AnimatePresence with motion.div for smooth transitions between routes — especially in my portfolio and landing pages.

import { motion, AnimatePresence } from "framer-motion";

<AnimatePresence mode="wait">
  <motion.div
    key={route}
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 0.3 }}
  >
    <YourComponent />
  </motion.div>
</AnimatePresence>

These 300ms transitions soften the experience without overloading the UI.

2. Button Feedback & Micro Interactions

Buttons are where users interact the most — yet most devs leave them static.

I use scale on tap to add tactile feedback:

<motion.button
  whileTap={{ scale: 0.95 }}
  whileHover={{ scale: 1.05 }}
  className="btn-primary"
/>

It’s subtle, but it makes the experience feel way more responsive.

3. Scroll Animations Without ScrollTrigger

With whileInView and viewport props, Framer Motion handles scroll-based entrance animations without any extra dependency.

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
  viewport={{ once: true }}
>
  <YourSection />
</motion.div>

Way smoother than handling scroll listeners manually.

⚙️ Performance Tips

A common myth: "Animations hurt performance."

Yes, they can — if done poorly. Here’s how I avoid that:

Animate only what’s visible (viewport={{ once: true }})
Use GPU-accelerated properties (transform, not top or left)
Debounce exit transitions on route changes
Keep transition durations short and consistent
Avoid animating layout shifts that affect CLS (Cumulative Layout Shift)

♿ Accessibility Considerations

You don’t want animations to make your site feel dizzy.

Here's what I check:

Respect user settings (prefers-reduced-motion)
Avoid overly complex motion that distracts
Give control over animated components when needed

Access user preferences easily:

const shouldReduceMotion = useReducedMotion();

💡 When Not to Use Motion

Not every component needs motion. I usually avoid animations on:

Loading skeletons (keep them fast and minimal)
Forms with strict validations (delays can feel laggy)
Hero sections with big background videos + motion (too heavy)

Remember: motion should serve UX, not just aesthetics.

🔮 Motion UI in 2025: Where It’s Headed

What I’m seeing now (and building toward):

Component libraries like shadcn/ui and Radix UI integrating Framer Motion out-of-the-box
Design systems using motion tokens
AI + personalization deciding when and how animations run (e.g., dark mode, screen size, or emotion tracking)

🧑‍💻 My Take as a Developer

I never thought I’d be that guy tweaking animation curves — but once I saw the difference it made in how users feel your product, I couldn’t unsee it.

And honestly?
It made me enjoy building UIs way more.

📌 Final Thoughts

Framer Motion isn’t just “nice to have” — it’s becoming a standard for modern UI development.

If you're a React or Next.js developer, I highly recommend learning it with intention, not just copying code.

It’s the difference between “working UI” and memorable UI.”

🔗 Resources

Framer Motion Docs
My Portfolio
Related Blog: Building Scalable UI Systems with shadcn/ui

Building Scalable UI Systems with Tailwind CSS v4 and shadcn/ui

Shoaib — Mon, 07 Jul 2025 08:40:20 +0000

Hey Devs 👋

I recently implemented a scalable UI system for one of my projects using Tailwind CSS v4 and shadcn/ui. Here’s a complete breakdown — from setup to best practices.

In modern web development, speed and scalability are no longer nice-to-haves—they're non-negotiable. As teams grow and applications evolve, maintaining a consistent and efficient design system becomes critical. That’s where Tailwind CSS and shadcn/ui come in—a pairing that enables developers to build beautiful, accessible, and scalable UI systems without reinventing the wheel.

Whether you’re building a full-scale design system or simply trying to keep your UI components maintainable across projects, this guide will show you how to make the most of Tailwind and shadcn/ui.

🧱 Why Build a Scalable UI System?

A UI system is more than a component library—it's a design language backed by consistent patterns and reusable components. A scalable system ensures:

Faster development with prebuilt patterns
Visual consistency across pages and features
Easier collaboration between designers and developers
Cleaner, more maintainable code

Without a UI system, your frontend becomes a tangle of inconsistent components, duplicated styles, and guesswork.

🎨 Why Tailwind CSS + shadcn/ui?

✅ Tailwind CSS
A utility-first CSS framework that offers maximum control with minimal code bloat.

Customizable design tokens (colors, spacing, fonts)
Responsive by default
Works seamlessly with any component-based architecture
Removes the need to write and maintain custom CSS files

✅ shadcn/ui
A modern component library built on top of Tailwind and Radix UI. It offers:

Prebuilt, accessible UI components
Theme-aware styling (including dark mode)
Easy customization with global.css
Clean abstraction without locking you into a framework

Together, they provide the perfect foundation for a maintainable, elegant UI system in 2025.

🏗️ Getting Started with Tailwind + shadcn/ui

Here’s how to bootstrap your scalable UI system setup.

🔧 Install Tailwind CSS

npx create-next-app@latest my-project
cd my-project
npm install tailwindcss @tailwindcss/postcss postcss

🧩 Add shadcn/ui
Follow their setup instructions to integrate into your Next.js project:

npx shadcn-ui@latest init

// Then add components using:
npx shadcn-ui@latest add button

// You can now use components like:
import { Button } from "@/components/ui/button"; 
export default function Example() { 
    return <Button>Click Me</Button>; 
}

🧠 Tips for Scalability

As you scale your UI system, follow these best practices:

1️⃣ Use Aliased Component Folders
Organize components clearly with folders like:

/components/ui/
/components/shared/
/components/forms/

2️⃣ Define Design Tokens with @theme in Tailwind v4
Tailwind CSS v4 embraces a more CSS-native approach to theming. Instead of defining colors, fonts, and spacing in tailwind.config.js, you can now use the new @theme directive inside your CSS files — giving you a clean, centralized token system with full IntelliSense support.

In your globals.css

@theme { 
    --color-primary: #4A90E2; 
    --color-muted: #A0A0A0; 
    --font-heading: 'Manrope', sans-serif; 
    --font-body: 'Merriweather', serif; 
}

Then, you can use these custom tokens in your Tailwind utilities like this:

<div class="text-primary font-heading"> 
    Welcome to the UI system 
</div>

This approach aligns with the new standard in Tailwind v4 and gives you complete control over your design system in one place.

3️⃣ Create Wrapper Components
Avoid repeating props like variants, sizes, and state. For example:

// components/shared/PrimaryButton.jsx 
import { Button } from "@/components/ui/button"; 
export const PrimaryButton = ({ children, ...props }) => ( 
<Button variant="default" className="rounded-xl px-6" {...props}> 
    {children} 
</Button> );

🌐 Real-World Use Cases

Here are a few ideas where this scalable system thrives:

Design systems powering client dashboards
Component marketplaces like your own YumeUI
Multi-brand web apps with theme overrides
Landing pages with consistent UX patterns

✅ Final Thoughts

If you're building modern frontends in 2025, creating a scalable UI system with Tailwind CSS and shadcn/ui is more than just smart—it’s essential. You’ll save time, improve consistency, and create user interfaces that are both performant and maintainable.

Start small, refactor smart, and let the system evolve with your product.

🧠 Originally published on shoaibsid.dev

If you’ve built something similar — or have ideas to improve this setup — drop a comment! Let’s learn from each other 🚀

I Just Launched My Developer Portfolio – Built with Next.js, Tailwind & Supabase

Shoaib — Wed, 02 Jul 2025 15:40:48 +0000

🚀 Hey Devs!

After weeks of refining design, optimizing performance, and integrating cool tools — I’m excited to officially launch my personal developer portfolio website!

🔗 Visit here: https://shoaibsid.dev

💻 Built With:

Frontend: Next.js, Tailwind CSS, Framer Motion
Backend: Supabase (for blog views), Express (project-based)
Features: ✅ Fast, minimal, and responsive design ✅ SEO-optimized blog using Ghost CMS ✅ View tracking via Supabase ✅ Designed to scale with my journey

🧩 Why I Built It

As a Full Stack Developer, I wanted a space that not only showcases my projects but also lets me write and share what I learn. The site is built to be a living portfolio that evolves with my skills.

📝 What's Inside:

A glance at my latest projects
Developer blogs focused on frontend performance & real-world learnings
A clean UI with fast load times and device responsiveness

🙌 Let’s Connect

Feel free to check it out and drop any feedback, suggestions, or bugs I missed!

📩 hi@shoaibsid.dev

🌐 https://shoaibsid.dev

Thanks for reading, and happy building!