Forem: Anik Deb Nath

Infinite Scrollable Image Slider with Framer Motion in Next.js

Anik Deb Nath — Fri, 04 Jul 2025 07:08:46 +0000

✨ Overview

In this blog, we’ll walk through how I built an infinite scrolling image slider using Framer Motion, Next.js, and Tailwind CSS. The slider is powered by scroll velocity and it supports a "Show More" grid view with pagination!

🧱 Tools & Technologies Used

Next.js (App Router)
React
Framer Motion
Tailwind CSS
Lucide Icons

1. 👉Create a New Next.js Project

npx create-next-app@latest scroll-slider-demo
cd scroll-slider-demo

2. 👉Install Required Packages

# Framer Motion for animation
npm install framer-motion

# Tailwind CSS and its dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Lucide React for icons
npm install lucide-react

3. 👉Configure Tailwind

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. 👉globals.css (./app/globals.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 👉Add the Scroll Slider Component

"use client";
import React, { useState, useRef } from "react";
import Image from "next/image";
import {
  motion,
  useScroll,
  useSpring,
  useTransform,
  useMotionValue,
  useVelocity,
  useAnimationFrame,
  wrap,
} from "framer-motion";
import {
  ChevronDown,
  ChevronUp,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";

const images = [
  {
    id: 1,
    title: "Moonbeam",
    description: "Serene moonlit landscape with ethereal beauty",
    thumbnail:
      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=40&w=640",
  },
  {
    id: 2,
    title: "Cursor",
    description: "Digital innovation meets creative design",
    thumbnail:
      "https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=40&w=640",
  },
  {
    id: 3,
    title: "Rogue",
    description: "Adventure awaits in uncharted territories",
    thumbnail:
      "https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?q=40&w=640",
  },
  {
    id: 4,
    title: "Editorially",
    description: "Crafting stories that inspire and engage",
    thumbnail:
      "https://images.unsplash.com/photo-1510784722466-f2aa9c52fff6?q=80&w=640",
  },
  {
    id: 5,
    title: "Editrix AI",
    description: "Artificial intelligence meets human creativity",
    thumbnail:
      "https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?q=80&w=640",
  },
  {
    id: 6,
    title: "Cosmic Dreams",
    description: "Journey through the vast expanse of space",
    thumbnail:
      "https://images.unsplash.com/photo-1446776877081-d282a0f896e2?q=80&w=640",
  },
  {
    id: 7,
    title: "Urban Pulse",
    description: "The heartbeat of modern city life",
    thumbnail:
      "https://images.unsplash.com/photo-1449824913935-59a10b8d2000?q=80&w=640",
  },
  {
    id: 8,
    title: "Natural Wonder",
    description: "Discovering the beauty in untamed nature",
    thumbnail:
      "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=640",
  },
  {
    id: 9,
    title: "Tech Horizon",
    description: "Where technology meets tomorrow",
    thumbnail:
      "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=640",
  },
  {
    id: 10,
    title: "Ocean Depths",
    description: "Exploring the mysteries beneath the waves",
    thumbnail:
      "https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=640",
  },
];

// ScrollVelocity Component
const ScrollVelocity = React.forwardRef(
  (
    {
      children,
      velocity = 5,
      movable = true,
      clamp = false,
      className,
      initialOffset = 0, // New prop for initial offset
      ...props
    },
    ref
  ) => {
    const baseX = useMotionValue(initialOffset); // Use initialOffset here
    const { scrollY } = useScroll();
    const scrollVelocity = useVelocity(scrollY);

    const smoothVelocity = useSpring(scrollVelocity, {
      damping: 100,
      stiffness: 20,
    });
    const velocityFactor = useTransform(smoothVelocity, [0, 10000], [0, 0.6], {
      clamp,
    });
    const x = useTransform(baseX, (v) => `${wrap(-20, -50, v)}%`); // Adjusted wrap values

    const directionFactor = useRef(1);
    const scrollThreshold = useRef(5);

    useAnimationFrame((t, delta) => {
      if (movable) {
        move(delta);
      } else {
        if (Math.abs(scrollVelocity.get()) >= scrollThreshold.current) {
          move(delta);
        }
      }
    });

    function move(delta) {
      let moveBy = directionFactor.current * velocity * (delta / 1000);
      if (velocityFactor.get() < 0) {
        directionFactor.current = -1;
      } else if (velocityFactor.get() > 0) {
        directionFactor.current = 1;
      }
      moveBy += directionFactor.current * moveBy * velocityFactor.get();
      baseX.set(baseX.get() + moveBy);
    }

    return (
      <div
        ref={ref}
        className={`relative m-0 flex flex-nowrap overflow-hidden whitespace-nowrap leading-[0.8] ${className}`}
        {...props}
      >
        <motion.div
          className="flex flex-row flex-nowrap whitespace-nowrap"
          style={{ x }}
        >
          {children}
        </motion.div>
      </div>
    );
  }
);

ScrollVelocity.displayName = "ScrollVelocity";

// Image Card Component
const ImageCard = ({ image, isGrid = false }) => {
  return (
    <div
      className={`relative cursor-pointer mr-6 ${
        isGrid ? "w-full h-80" : "h-[15rem] w-[25rem] flex-shrink-0" // Fixed width of 400px (25rem = 400px, adjust as needed)
      }`}
    >
      <Image
        src={image.thumbnail}
        alt={image.title}
        width={400} // Fixed width
        height={240} // Fixed height (adjust aspect ratio as needed)
        className="w-full h-full object-cover object-center rounded-lg"
        priority={isGrid}
      />

      {/* Prime Badge - Top Left Corner */}
      <div className="absolute top-2 left-2 z-10">
        <div className="tracking-wide bg-gradient-to-r from-yellow-400 to-yellow-600 text-black px-2 py-1 rounded-md text-xs font-bold shadow-lg">
          Popular
        </div>
      </div>

      {/* Gradient Overlay - Black to White from bottom to top */}
      <div className="rounded-lg absolute inset-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent" />

      {/* Content - Always visible with improved spacing */}
      <div
        className={`absolute bottom-0 left-0 right-0 text-white ${
          isGrid ? "p-4" : "p-3 md:p-4"
        }`}
      >
        <h3
          className={`font-semibold ${
            isGrid
              ? "text-lg mb-3 leading-7 tracking-wide"
              : "text-base mb-2 leading-6 tracking-wide"
          }`}
        >
          {image.title}
        </h3>

        <p
          className={`text-gray-300 font-normal ${
            isGrid ? "text-sm tracking-wide" : "text-sm tracking-wide"
          } drop-shadow-md truncate`}
        >
          {image.description}
        </p>
      </div>
    </div>
  );
};

// Grid Layout Component
const GridLayout = ({ images, onClose }) => {
  const [currentPage, setCurrentPage] = useState(0);
  const imagesPerPage = 6;
  const totalPages = Math.ceil(images.length / imagesPerPage);

  const getCurrentImages = () => {
    const start = currentPage * imagesPerPage;
    const end = start + imagesPerPage;
    return images.slice(start, end);
  };

  const goToNext = () => {
    setCurrentPage((prev) => (prev + 1) % totalPages);
  };

  const goToPrevious = () => {
    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
  };

  return (
    <motion.div
      className="w-full"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.5 }}
    >
      <div className="mb-6 flex justify-between items-center">
        <h2 className="text-2xl font-bold text-gray-800">All Projects</h2>
        <button
          onClick={onClose}
          className="flex items-center gap-2 px-5 py-2 rounded-full text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all shadow-md"
        >
          <ChevronUp className="w-4 h-4" />
          Show Less
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        {getCurrentImages().map((image) => (
          <ImageCard key={image.id} image={image} isGrid={true} />
        ))}
      </div>

      {/* Navigation Controls - Below the grid */}
      <div className="flex justify-center items-center flex-wrap gap-4 mt-8">
        {/* Pagination buttons */}
        <div className="flex items-center gap-4 flex-wrap">
          <button
            onClick={goToPrevious}
            disabled={totalPages <= 1}
            className="flex items-center gap-2 px-5 py-2 rounded-full text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <ChevronLeft className="w-4 h-4" />
            Previous
          </button>

          <span className="text-sm font-medium text-gray-700">
            Page {currentPage + 1} of {totalPages}
          </span>

          <button
            onClick={goToNext}
            disabled={totalPages <= 1}
            className="flex items-center gap-2 px-5 py-2 rounded-full text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Next
            <ChevronRight className="w-4 h-4" />
          </button>
        </div>
      </div>
    </motion.div>
  );
};

// Main Component
const EnhancedScrollVelocityDemo = () => {
  const [showGrid, setShowGrid] = useState(false);
  const velocity = [0.2, -0.2];

  if (showGrid) {
    return (
      <div className="w-full p-6">
        <GridLayout images={images} onClose={() => setShowGrid(false)} />
      </div>
    );
  }

  return (
    <div className="w-full">
      <div className="flex flex-col space-y-10 py-10">
        {velocity.map((v, index) => (
          <ScrollVelocity
            key={index}
            velocity={v}
            initialOffset={index % 2 === 0 ? -10 : 10} // Alternate initial offsets
          >
            {images.map((image) => (
              <ImageCard key={image.id} image={image} />
            ))}
            {/* Duplicate images to create infinite scroll effect */}
            {images.map((image) => (
              <ImageCard key={`dup-${image.id}`} image={image} />
            ))}
          </ScrollVelocity>
        ))}
      </div>

      {/* Show More Button */}
      <div className="flex justify-center">
        <motion.button
          onClick={() => setShowGrid(true)}
          className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-full hover:from-blue-700 hover:to-purple-700 transition-all shadow-lg hover:shadow-xl"
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <span className="font-semibold">Show More</span>
          <ChevronDown className="w-5 h-5" />
        </motion.button>
      </div>
    </div>
  );
};

export default EnhancedScrollVelocityDemo;

6. 👉Use It in a Page or Other where you need

import EnhancedScrollVelocityDemo from "./components/EnhancedScrollVelocityDemo";

export default function Home() {
  return (
    <main className="min-h-screen bg-white">
      <EnhancedScrollVelocityDemo />
    </main>
  );
}

7. 👉Run the Project

npm run dev
Visit: http://localhost:3000

You should see your animated scrollable slider with a “Show More” grid view. 🚀

Tips & Enhancements

Here are a few ways you can further enhance the experience:

Add drag support (drag="x") for mobile swiping
Animate image hover state for interactivity
Fetch image data dynamically from API
Add a modal/lightbox on card click

Final Thoughts

This project was a fun experiment combining Framer Motion’s powerful animation utilities with clean, scalable UI design. It showcases how scroll velocity can create visually stunning effects with minimal code.

If you're building a portfolio, product showcase, or creative gallery — this layout can provide a delightful user experience that stands out.❤️

Deploying a Node.js + Express Server to Vercel Using the CLI

Anik Deb Nath — Mon, 18 Nov 2024 21:10:53 +0000

Deploying your Node.js, Express, and MongoDB backend to Vercel is an excellent way to make your application accessible to users worldwide. Vercel offers a simple, serverless, and high-performance deployment platform that integrates seamlessly with the Node.js ecosystem.

In this blog, you'll learn how to deploy your backend server to Vercel using the command line, step-by-step.

Prerequisites

Node.js and npm installed on your machine.
A Vercel account. Sign up here.
Vercel CLI installed globally on your system.
A MongoDB instance, either locally or on a cloud provider like MongoDB Atlas.

Step 1: Install Vercel CLI

First, install the Vercel CLI globally:

npm install -g vercel

Verify the installation:

vercel --version

Step 2: Prepare Your Node.js Application

app.js: Defines your Express app.
server.js: Handles the server setup.
.env: Contains sensitive information like your MongoDB connection string

Step 3: Configure Your vercel.json File

Create a vercel.json file in the root of your project(where package.json file in include) to configure your deployment.

{
  "version": 2,
  "builds": [
    {
      "src": "dist/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/server.js"
    }
  ]
}

builds: Specifies which file to use for the build.
routes: Redirects all traffic to the server.js file.

Step 4: Build Your Application First

Build your application without any error. If any kind of error is occured , remove it then build your application.

npm run build

Step 5: Deploy Your Application

vercel

During deployment Vercel detects your server.js file as the entry point. Environment variables like MONGO_URI are injected automatically.

Step 6: Verify Your Deployment

After the deployment is complete, you'll get a URL like:
Domain: https://your-project-name.vercel.app

Step 7: Update Your Code

To redeploy updated code:

vercel --prod

Conclusion

You've successfully deployed your Node.js + Express + MongoDB server to Vercel using the command line! Vercel makes it incredibly simple to host backend applications, thanks to its serverless capabilities and ease of use.

If you encounter any issues, consult the Vercel documentation or leave a comment below. Happy coding! 🚀

[Anik Deb Nath]

Create a Responsive Navbar Using Tailwind CSS and Next.js

Anik Deb Nath — Wed, 13 Nov 2024 04:26:11 +0000

Intorduction

Creating a responsive and visually appealing navbar is an essential part of building a modern website. This tutorial will guide you through building a navbar using Next.js and Tailwind CSS. The navbar will be fully responsive, including a mobile menu that slides in from the left.

Prerequisites

Make sure you have -

are installed; if not, install first and create a new next js project by running following commands:

npx create-next-app@latest my-navbar-app
cd my-navbar-app

Step 1: Setting Up the Navbar Component

In the components folder, create a new file called Navbar.js (or Navbar.jsx):

"use client";
import Link from "next/link";
import { useState } from "react";

export default function Navbar() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  // Navigation items array
  const navItems = [
    { name: "Home", href: "/" },
    { name: "About", href: "/about" },
    { name: "News", href: "/news" },
    { name: "Contact", href: "/contact" },
  ];

  return (
    <div>
      <nav className="block w-full max-w-screen px-4 py-4 mx-auto bg-white bg-opacity-90 sticky top-3 shadow lg:px-8 backdrop-blur-lg backdrop-saturate-150 z-[9999]">
        <div className="container flex flex-wrap items-center justify-between mx-auto text-slate-800">
          <Link
            href="/"
            className="mr-4 block cursor-pointer py-1.5 text-red-600 font-bold text-2xl"
          >
            NEXTNEWS
          </Link>

          <div className="lg:hidden">
            <button
              className="relative ml-auto h-6 max-h-[40px] w-6 max-w-[40px] select-none rounded-lg text-center align-middle text-xs font-medium uppercase text-inherit transition-all hover:bg-transparent focus:bg-transparent active:bg-transparent disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
              onClick={toggleMobileMenu}
              type="button"
            >
              <span className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="w-8 h-8"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M4 6h16M4 12h16M4 18h16"
                  ></path>
                </svg>
              </span>
            </button>
          </div>

          {/* Mobile Menu */}
          <div
            className={`fixed top-0 left-0 min-h-screen w-64 bg-slate-100 shadow-lg transform transition-transform duration-300 ease-in-out ${
              isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"
            } lg:hidden z-50`}
          >
            <div className="flex flex-row items-center border-b pb-4">
              <Link
                href="/"
                className="cursor-pointer text-red-600 font-bold text-xl pt-4 ps-4"
              >
                NEXTNEWS
              </Link>
              <button
                onClick={toggleMobileMenu}
                className="absolute top-4 right-4 text-slate-600 hover:text-red-500"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="w-8 h-8"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>
            <ul className="flex flex-col h-full gap-4 p-4">
              {navItems.map((item, index) => (
                <li
                  key={index}
                  className="flex items-center p-1 text-lg gap-x-2 text-slate-600 hover:text-red-500"
                >
                  <Link onClick={() => {setIsMobileMenuOpen(false);}} href={item.href} className="flex items-center">
                    {item.name}
                  </Link>
                </li>
              ))}
              <li className="mt-4">
                <button className="bg-red-600 text-white px-8 py-2 rounded-md hover:bg-red-500">
                  Login
                </button>
              </li>
            </ul>
          </div>

          {/* Desktop Menu */}
          <div className="hidden lg:block">
            <ul className="flex flex-col gap-2 mt-2 mb-4 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
              {navItems.map((item, index) => (
                <li
                  key={index}
                  className="flex items-center p-1 text-lg gap-x-2 text-slate-600 hover:text-red-500"
                >
                  <Link href={item.href} className="flex items-center">
                    {item.name}
                  </Link>
                </li>
              ))}
              <li>
                <button className="bg-red-600 hover:bg-red-500 text-white px-8 py-2 rounded-md">
                  Login
                </button>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  );
}

Step 2: Use your Navbar Component

Use this navbar component in layout.js file of app folder.

export default function RootLayout({ children }) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Navbar /> //use here
{children}
</body>
</html>
);
}

Step 3: Testing Responsiveness

To see your navbar in action, run your Next.js local server:

npm run dev

Conclusion

This responsive navbar combines the power of Next.js with the flexibility of Tailwind CSS, creating a modern and functional user interface. With a few customizations, you can tailor this navbar to suit any project’s needs.

Happy coding!
[Anik Deb Nath]

Union and intersection type in Typescript

Anik Deb Nath — Mon, 20 May 2024 05:27:27 +0000

Union:

In typescript we can use union type when we need to use more than a single type. We can also say that union means “OR”. To use union type we can use pipe (‘|’) symbol as union type. By this type we can also combine multiple data types in typescript. Let’s see union type’s syntax below:

const checkNum : number | string ; 
checkNum = 10; 
checkNum = "Hello"; 
checkNum = true; // give here error becasue checkNum value should be number or string.

So here we see that myNum can be number or string which is provide more flexibility in our code.

Use Union as function parameters:

const sayHi = (param:string | number) => {
 return console.log(param);
}
sayHi("Hello!")
sayHi(89.6)
sayHi(true) //Argument of type 'boolean' is not assignable to parameter of type 'string | number'.

Union of Literal Types:

we can declare a union type including of literal types, such as string literals, number literals or boolean literals etc. Example :

type Sports = 'cricket' | 'football' | 'tenis';
function watchMovie(game: Sports) {
    console.log(`You are playing ${game}.`);
}
watchMovie('cricket');
watchMovie('football');

This will make our code more type-safe and error-free, and help us to avoid unnecessary type checks or type assertions.

Intersection:

Intersection type is allowing us to combine multiple types into a single type with all of the properties. We must use “&” and operator to create intersection type in typescript. Let’s see union type’s syntax below:

type Name = variable_1 & variable_2;
let var: variable_3;

Intersection can Combine interface:

In typescript we can define a type by combining two different interface using intersection that means type can get all properties of both interfaces. Let’s see the example below:

interface Student{
    name: string;
    age: number;
    stdId: number;
}
interface Teacher{
    teachingId: string;
}
type User = Student & Teacher;
User.age = 5;
User.teachingId ="CSE123";
User.name = 'Karim';

Here the order of the types in an intersection does not concern. Suppose Student & Teacher is equivalent to Teacher & Student.

Use intersection types to extend or override existing types

Let’s see an example:

type area = {
  width:string;
  height:string;
};
type volume = area & { depth: string };

In short union and intersection types in TypeScript:

Union

Can combine one or more types into one type.
By using the pipe ‘|’ operator, we can perform union.
Example: type value = string | number;

In functions or variables, union types are useful for accepting various types of values.

Intersection

Can merge properties from one or more types.
By using the ampersand ‘&’ operator, we can perform intersection.
Example: type User = Student & Teacher;

In composing types and enforcing strict type contracts, intersection types are useful.

Summary:

In summary we can say that union types provide versatility by allowing variables to hold values from many types, whereas intersection types combine numerous types into a single, more exact type. Depending on the needs of our code, we may opt to utilize union types to handle a variety of data circumstances or intersection types to compose exact type structures and execute strict type contracts.