DEV Community: Burak Bilen

Deailing with OAuth SSR in a Next.js project

Burak Bilen — Tue, 24 Jun 2025 01:16:27 +0000

Welcome to the #CODESESSION001 the first article so far! In today's article, we will practise end-to-end autherization & authentication system for our brand new Next.js app, together.

Very beggining, I would like to inform you about the difficulty of the article that it's quite hard for the begginers. But no worries if you are one — once you understand the core logic of the auth process, you will be able deal with auth services like you are playing with a toy from your childhood.

Check out my new Portfolio!

Burak Bilen — Mon, 24 Feb 2025 18:13:40 +0000

I have been developing my portfolio for the past month. All the details over here I will be waiting your comments under this post 🙌

Links:

Feautures of my portfolio:

Main Page
Dynamic SSG Blog Pages
Documentation of Motion Provider - My Animation Library
Social links
Projects (powered by Motion Provider)

Used Techs

Typescript
React 19 & Redux
Next.js
Motion
Motion Provider
Supabase
Shadcn
RadixUI
Node.js

Introducing The Next Open Sourced Game Changer - Motion Provider.

Burak Bilen — Fri, 21 Feb 2025 22:52:05 +0000

I’m really excited to introduce Motion Provider—an advanced animation library built for React!!

What is Motion Provider?

Motion Provider is an animationed component stack API library providing comprehensive animation
utilities under the hood. Since I built the engines and all the utilities of Motion Provider, my clients appriciates more because I am saving up to ~3 hours of work per day, they receives their project lightning-fast!!

Links:

It comes with powerful 2 engines:

Motion Provider Component Engine, create your own animation in couple of clicks, configure it in 3 seconds, copy the code in 1 second use in project. Your animation is ready in total ~15 sec.
Motion Provider Image Engine, paste your image link, configure your animation in couple of click, test it via engine and use it in your own project. Your animation is ready in total ~30-45 sec.

Built at the top of:

Typescript (For Type-safe API's)
Next.js
React 19
TailwindCSS V4
Motion(formerly framer-motion)

What you will be able to do with Motion Provider?

Here is the list of capabilites.

✅ Animation combinations and sequencing
✅ 20+ transition easings including custom cubic bezier
✅ Viewport-triggered/controlled animations
✅ Animation reversal and pausing controls
✅ Type-safe animation mode declarations
✅ Supports centralized animation system(CAS)
✅ Dynamic image fragmentation (1-900+ pieces)
✅ Interactive hover/click animations
✅ 15+ Recursive animation pattern algorithms
✅ 21,840 built-in animation combination variations
✅ Sequenced animation timelines
✅ Nested animation support
✅ Seamless image transitions using customizable enter and exit animations.
✅ Optimized rendering through memoization and dynamic imports.
✅ Deep merges animation properties
✅ Emergency stop functionality
✅ Debounced state updates

Motion Provider vs Motion(formerly Framer Motion)

Animating simple viewport triggered div element

In Motion(Framer Motion)

<motion.div
  initial={{ scale: 1, opacity: 0, x: 30, filter: "blur(10px)" }}
  animate={{ scale: [1, 1.2, 1], opacity: 1, x: 0, filter: "blur(0px)" }}
  transition={{ type: "spring", duration: 1, ease: "easeInOut" }}
>
    Hello World
</motion.div>

In Motion Provider

<MotionContainer
  mode={["filterBlurIn", "fadeRight", "burakHeartbeat"]}
  elementType="div"
  duration={1}
  transition="smooth"
  children="Hello World"
>

IMPORTANT NOTE

I do not reccomend using unknown code even if it's looking good... Nowadays you may see animationed component libraries like react-bits, accernity etc. I am not saying do not use, but even if you'll use, consider that react is a dynamic framework. You have to be smart when you creating your animationed components, it has to be on client side, it has to use will-change css property, it has to export dynamically it has to memoize everything. Whenever you use external libraries component code, you ignoring this things and you writing in forums Why my h1 element is LCP(LARGE CONTENT PAINT)? Because you are using a code snippet that not follows the react's design patterns. That's why I built Motion Provider. To make the web easier and better.

Check Out My New Markdown Blog App!

Burak Bilen — Fri, 21 Feb 2025 21:47:09 +0000

I have been working on my latest blog integrations to my personal web application since the last month, I'd love to share how was the process, what did I learn through the journey!

✅ Click here to go Blog Page
✅ Click here to go the animation library that I've been building since the last month

Tech stack

Front-end
-- Next.js
-- Motion Provider (for animations)
-- Typescript
-- React 19
-- Redux
-- next-mdx-remote
-- TailwindCSS V4
-- Shadcn
-- Radix UI
Back-end
-- Supabase
-- NextAUTH
-- PostgreSQL
Hosting & Domain
-- Netlify
-- Namecheap

How the blogging system works?

As you may know, reusability is the most important thing that every developer should consider while developing any react application. To stay consistent among the designed components, I used next.js's SSG for my server-side site generated pages at the build time. Remember that I've been using page router for the entire project.

However, before you go with the page router you may consider as a full-stack developer:

Whenever you create a new row in db for blogs which means when you create a new blog, you have to navigate to your project in your code editor then you have to run npx next build to re-create your pages inside blog pages. Therefore we can put it in the list of cons because you can not directly integrate ISR (incremental server rendering) that detects the new blog from the db then render it on UI as long as you continue with the page router.
Whenever you create a new blog and after running npx next build, you will have pages based on the rows in your database. SEO IS CRUCIAL -when it comes to URL- you have to transform the title to a slug like, If you create a blog page named How to animate? then you should use the URL of the page how-to-animate.

Here how I used my SSG integration inside pages/blogs/[slug].tsx:

import { db } from "@/db";
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import { serialize } from "next-mdx-remote/serialize";
import { GetStaticPaths, GetStaticProps, NextPage } from "next";
import Hydrate from "@/components/Blog/hydrate";
import Head from "next/head";
import Image from "next/image";
import { BlogPageProps } from "@/interfaces";
import { useDispatch } from "react-redux";
import { useEffect } from "react";
import { setBlog } from "@/redux/slices/blogSlice";
import Reccomendation from "@/components/Blog/reccomendation";

const BlogPage: NextPage<BlogPageProps> = ({ source, frontMatter }) => {
  const publishedDate = new Date(frontMatter.published_at).toLocaleDateString();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setBlog(frontMatter));
  }, [dispatch]);

  return (
    <>
      <Head>
        <title>{`Burak Bilen | ${frontMatter.title}`}</title>
        <meta
          name="description"
          content={`Read ${frontMatter.title} published on ${frontMatter.published_at}.`}
        />
        <meta property="og:title" content={frontMatter.title} />
        <meta
          property="og:description"
          content={`Read ${frontMatter.title} published on ${publishedDate}.`}
        />
        <meta property="og:type" content="article" />
        <meta property="og:image" content={frontMatter.banner_image} />
        <meta
          property="og:url"
          content={`https://burakdev.com/blogs/${frontMatter.slug}`}
        />
        <meta property="og:site_name" content="burakdev" />
      </Head>
      <main>
        <Image
          alt={`burakdev | ${frontMatter.title}`}
          src={`${frontMatter.banner_image}`}
          height={900}
          className="sr-only"
          width={1200}
        />
        <Hydrate frontMatter={frontMatter} source={source} />
      </main>
      <Reccomendation />
    </>
  );
};

export default BlogPage;

export const getStaticPaths: GetStaticPaths = async () => {
  const { data, error } = await db.from("blog_posts").select("slug");

  if (error) {
    console.error("Error fetching data:", error);
    return { paths: [], fallback: false };
  }

  const paths = data.map((post: { slug: string }) => ({
    params: { slug: post.slug },
  }));

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const slug = params?.slug as string;

  const { data, error } = await db
    .from("blog_posts")
    .select("*")
    .eq("slug", slug)
    .single();

  if (error || !data) {
    console.error("Error fetching data:", error);
    return { notFound: true };
  }

  const mdxSource = await serialize(data.content, {
    mdxOptions: {
      remarkPlugins: [remarkGfm],
      rehypePlugins: [rehypeSlug],
    },
    scope: data,
  });

  return {
    props: {
      source: mdxSource,
      frontMatter: {
        id: data.id,
        title: data.title,
        slug: data.slug,
        tags: data.tags,
        banner_image: data.banner_image,
        description: data.description,
        published_at: data.published_at,
        level: data.level,
        like: data.like,
        view: data.view,
      },
    },
  };
};

What happens in this `blogs/[slug].tsx` ?

Let's break the big picture's workflow down:

getStaticPaths gets the paths from the db using supabase's select() logic, over here:

const { data, error } = await db.from("blog_posts").select("slug")

If an error persist we return an error message with empty path array and fallback: false. And you may ask, fallback: false means other routes should 404. However if you are using app router by assigning the fallback prop as blocking and add revalidate: 3600 you will change the render method of Next.js to ISR which means the app will be able to revalidate the props of the page by sending request to the database, and If data fetching operation successfull, it will render automatically on the UI at runtime in your host without rebuilding.
After that we pass the paths data to getStaticProps using:

const paths = data.map((post: { slug: string }) => ({params: { slug: post.slug }
}));

getStaticProps takes the data and at first checks if the slug is valid or not like:
```
const slug = params?.slug as string;
```

The logic fetches the all data into the specific row according to our slug variable over here:

const { data, error } = await db
    .from("blog_posts")
    .select("*")
    .eq("slug", slug)
    .single();

if (error || !data) {
    console.error("Error fetching data:", error);
    return { notFound: true };
}

After that, finally everything comes to serializing the page content. This is crucial. Because who wants to write HTML formatted blogs? Instead you would prefer Markdown formatted and in this case you have to serialize your data using next-mdx-remote/serialize
Serializing refers to the process of converting MDX content (a format that combines Markdown with JSX/React components) into a format that can be directly rendered by React.

Basically, you have page content's like # Hello World! represents <h1>Hello World!</h1> or > This is a blockquote represents <blockquote>This is a blockquote</blockquote>, this transformed data goes to our actual Page renderer in our case the page renderer is:

const BlogPage: NextPage<BlogPageProps> = ({ source, frontMatter }) => {
const publishedDate = new Date(frontMatter.published_at).toLocaleDateString();
const dispatch = useDispatch();

useEffect(() => {
    dispatch(setBlog(frontMatter));
}, [dispatch]);

return (
    <>
    <Head>
        <title>{`Burak Bilen | ${frontMatter.title}`}</title>
        <meta
        name="description"
        content={`Read ${frontMatter.title} published on ${frontMatter.published_at}.`}
        />
        <meta property="og:title" content={frontMatter.title} />
        <meta
        property="og:description"
        content={`Read ${frontMatter.title} published on ${publishedDate}.`}
        />
        <meta property="og:type" content="article" />
        <meta property="og:image" content={frontMatter.banner_image} />
        <meta
          property="og:url"
          content={`https://burakdev.com/blogs/${frontMatter.slug}`}
        />
        <meta property="og:site_name" content="burakdev" />
      </Head>
      <main>
        <Image
          alt={`burakdev | ${frontMatter.title}`}
          src={`${frontMatter.banner_image}`}
          height={900}
          className="sr-only"
          width={1200}
        />
        <Hydrate frontMatter={frontMatter} source={source} />
      </main>
      <Reccomendation />
    </>
  );
};

Let's dive into rendering our blogs

You may remember we passed our serialized jsx formatted contents from getStaticProps here:

  return {
    props: {
      source: mdxSource,
      frontMatter: {
        id: data.id,
        title: data.title,
        slug: data.slug,
        tags: data.tags,
        banner_image: data.banner_image,
        description: data.description,
        published_at: data.published_at,
        level: data.level,
        like: data.like,
        view: data.view,
      },
    },
  };

I forgot to mention how my db looks like:

create table public.blog_posts (
  id serial not null,
  title text not null default 'title'::text,
  slug character varying(255) not null,
  content text not null,
  tags text[] not null,
  published_at timestamp with time zone null default now(),
  description text not null default 'Burak Bilen '::text,
  banner_image text not null default 'https://ytpmpkgcjlcdidphswzv.supabase.co/storage/v1/object/public/banner//banner-bg.webp'::text,
  level numeric not null default '1'::numeric,
  view numeric not null default '1'::numeric,
  like numeric not null default '24'::numeric,
  constraint blog_posts_pkey primary key (id),
  constraint blog_posts_slug_key unique (slug),
  constraint blog_posts_level_check check ((level > (0)::numeric))
) TABLESPACE pg_default;

Right now, it's time to wrap all this things. First of all we are getting our date data using:

const publishedDate = new Date(frontMatter.published_at).toLocaleDateString();

Secondly, we are sending the all props we got from db to redux slice named blogSlice

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setBlog(frontMatter));
  }, [dispatch]);

After, we starting rendering our content as a plain html for seo wrapping HTML tags into next/head element:

<Head>
    <title>{`Burak Bilen | ${frontMatter.title}`}</title>
    <meta
      name="description"
      content={`Read ${frontMatter.title} published on ${frontMatter.published_at}.`}
    />
    <meta property="og:title" content={frontMatter.title} />
    <meta
      property="og:description"
      content={`Read ${frontMatter.title} published on ${publishedDate}.`}
    />
    <meta property="og:type" content="article" />
    <meta property="og:image" content={frontMatter.banner_image} />
    <meta
      property="og:url"
      content={`https://burakdev.com/blogs/${frontMatter.slug}`}
    />
    <meta property="og:site_name" content="burakdev" />
</Head>

We pass all of our data as a prop to <Hydrate /> component here:

<Hydrate frontMatter={frontMatter} source={source} />

Here is the <Hydrate /> component:

import { FC } from "react";
import { MDXRemote } from "next-mdx-remote";
import { MdxComponents } from "./components/mdx-components";
import { BannerCard } from "../banner-card";
import { useSelector } from "react-redux";
import { BlogPageProps, PingProps, ReduxThemeProps } from "@/interfaces";
import MotionContainer from "../MotionProvider/motion-container";
import { Badge } from "../ui/badge";
import Ping from "../ui/ping";
import SessionText from "./components/SessionText";
import Socials from "./components/Socials";
import Actions from "./components/Actions";

const Hydrate: FC<BlogPageProps> = ({ source, frontMatter }) => {
  const {
    banner_image,
    id,
    like,
    view,
    description,
    published_at,
    tags,
    title,
    level,
  } = frontMatter;

  const SESSION_NO = `JUSTCODESESSION00${id.toString()}`;
  const appTheme = useSelector(
    (state: { theme: ReduxThemeProps }) => state.theme
  );
  const publishedDate = new Date(published_at).toLocaleDateString();
  console.log(banner_image);

  const levelConfig: PingProps = {
    mode: level === 1 ? "success" : level === 2 ? "warning" : "error",
    size: "sm",
    isAnimated: true,
  };
  const blogLevel =
    level === 1 ? "Beginner" : level === 2 ? "Intermediate" : "Advanced";

  return (
    <>
      <header className="article-header">
        <div className="relative">
          <BannerCard
            theme={appTheme}
            description={description}
            delayLogic="sinusoidal"
            transition="cubicElastic"
            title={title}
            src={banner_image}
            imageAnimationDuration={5}
            animations={["rotateFlipY"]}
            className="mt-4 lg:mt-0 max-h-max min-h-60 "
            duration={1}
          />
          <ul className="absolute bottom-4 left-4 flex gap-2 flex-row">
            {tags.map((val, idx) => (
              <MotionContainer
                key={idx}
                elementType={"li"}
                mode={[idx % 2 === 0 ? "fadeDown" : "fadeUp", "filterBlurIn"]}
                children={<Badge>{val}</Badge>}
                configView={{ once: false, amount: "some" }}
                delay={idx * 0.2}
                duration={1}
                transition="smooth"
              />
            ))}
          </ul>
          <div className="absolute top-4 right-4 flex gap-1 flex-wrap text-muted-foreground font-mono font-light text-xs">
            <span>#</span>
            <div className="flex flex-wrap gap-2">
              <SessionText text={SESSION_NO} />
            </div>
          </div>
          <div className="absolute font-mono text-muted-foreground text-xs top-4 left-4 flex gap-2 items-center justify-center">
            <Ping {...levelConfig} />
            <span>{blogLevel}</span>
          </div>
          <span className="absolute bottom-4 right-4 text-muted-foreground font-mono font-light text-xs">
            {publishedDate}
          </span>
        </div>
        <aside className="sticky top-0 py-4 w-full max-h-max mt-2 flex items-center justify-between">
          <Actions blog_id={id} like={like} view={view} />
          <Socials />
        </aside>
      </header>
      <article>
        <section className="article-content">
          <MDXRemote {...source} components={MdxComponents} />
        </section>
      </article>
    </>
  );
};

export default Hydrate;

Here is the most significant part for UI. My dear developer please use renderer logic.
Renderer logic is the component stack that you import in one file to say the compiler Hey compiler, I have some HTML elements that I want to render, but I want to render in my own method
In our project the actual renderer component that we defined in our <Hydrate /> component is <MDXRemote {...source} components={MdxComponents} />
Let's take a look at what's inside:

import React from "react";
import { MdHeading } from "../ui/MdHeading";
import { MdParagraph } from "../ui/MdParagraph";
import { MdLink } from "../ui/MdLink";
import { MdCode } from "../ui/MdCode";
import { MdBlockquote } from "../ui/MdBlockquote";
import { MdPre } from "../ui/MdPre";
import { MdImage } from "../ui/MdImage";
import { MdUl } from "../ui/MdUl";
import {
  MdTable,
  MdTbody,
  MdTd,
  MdTh,
  MdThead,
  MdTr,
} from "../ui/MdTableComponents";
import { MdHr } from "../ui/MdHr";

type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
  href: string;
};

export const MdxComponents = {
  h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
    <MdHeading as="h1" size="xl" className="my-4" {...props} />
  ),
  h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
    <MdHeading as="h2" size="lg" className="my-4" {...props} />
  ),
  h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
    <MdHeading as="h3" size="md" className="my-4" {...props} />
  ),
  h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
    <MdHeading as="h4" size="sm" className="my-4" {...props} />
  ),
  h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
    <MdHeading as="h5" size="xs" className="my-4" {...props} />
  ),
  p: (props: React.HTMLAttributes<HTMLParagraphElement>) => (
    <MdParagraph className="my-8" {...props} />
  ),
  a: (props: AnchorProps) => <MdLink {...props} />,
  code: (props: React.HTMLAttributes<HTMLElement>) => <MdCode {...props} />,
  blockquote: (props: React.HTMLAttributes<HTMLQuoteElement>) => (
    <MdBlockquote {...props} />
  ),
  pre: (props: React.HTMLAttributes<HTMLPreElement>) => <MdPre {...props} />,
  img: (
    props: React.HTMLAttributes<HTMLImageElement> & { alt: string; src: string }
  ) => (
    <MdImage
      {...props}
      alt={props.alt}
      src={props.src}
      className="rounded-md"
    />
  ),
  ul: (props: React.HTMLAttributes<HTMLUListElement>) => <MdUl {...props} />,
  table: (props: React.HTMLAttributes<HTMLTableElement>) => (
    <MdTable {...props} />
  ),
  thead: (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
    <MdThead {...props} />
  ),
  tbody: (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
    <MdTbody {...props} />
  ),
  tr: (props: React.HTMLAttributes<HTMLTableRowElement>) => <MdTr {...props} />,
  th: (props: React.ThHTMLAttributes<HTMLTableCellElement>) => (
    <MdTh {...props} />
  ),
  td: (props: React.TdHTMLAttributes<HTMLTableCellElement>) => (
    <MdTd {...props} />
  ),
  hr: (props: React.HTMLAttributes<HTMLHRElement>) => (
    <MdHr className="my-24" {...props} />
  ),
};

You get it already but basically we create custom components to assign HTML elements. With this approach instead of rendering the serialized HTML, we render whatever we want on UI at build time. For example here how I made the blockquote component as a animationed component that renders on UI:

import MotionQueue from "@/components/MotionProvider/motion-queue";
import { AnimationQueueAnimationProps } from "@/components/MotionProvider/types";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import extractTextFromReactNode from "@/utils/extractTextFromReactNode";
import { Info } from "lucide-react";
import React, { FC } from "react";

export const MdBlockquote: FC<React.HTMLAttributes<HTMLQuoteElement>> = ({
  className,
  ...props
}) => {
  const text = extractTextFromReactNode(props.children).split(/\s+/);

  return (
    <blockquote className="flex flex-col gap-2 my-6">
      <Alert>
        <AlertTitle className="font-bold lg:text-xl text-lg text-primary flex flex-row-reverse gap-2 justify-between">
          <Info />
          <span>Burak Says,</span>
        </AlertTitle>
        <AlertDescription className="text-muted-foreground text-sm flex flex-wrap gap-1 -ml-1 my-2">
          <MotionQueue
            elementType={"span"}
            animations={
              Array.from({ length: text.length }).fill({
                mode: ["filterBlurIn", "fadeRight"],
                duration: 0.88,
                configView: { once: false, amount: 0.5 },
              }) as AnimationQueueAnimationProps[]
            }
            isDynamicallyQueued
            delayLogic="linear"
            duration={0.25}
            children={text}
          />
        </AlertDescription>
      </Alert>
    </blockquote>
  );
};

Here is an another example for headings

import React, { FC } from "react";
import { cn } from "@/lib/utils";
import { MdHeadingProps } from "../types/interfaces";

export const MdHeading: FC<MdHeadingProps> = ({
  as: Component = "h1",
  size = "xl",
  className,
  ...props
}) => {
  const sizeClasses = {
    xl: "text-4xl font-bold",
    lg: "text-3xl font-bold",
    md: "text-2xl font-semibold",
    sm: "text-xl font-semibold",
    xs: "text-lg font-medium",
  };

  return <Component className={cn(sizeClasses[size], className)} {...props} />;
};

Ultimately, nowadays the web requires a good patience and intelligent approaches from developers to create magic but the magic is happening just we should learn how to control it.

When To Animate?

Burak Bilen — Tue, 18 Feb 2025 00:10:01 +0000

Animations can transform a static interface into an engaging, intuitive experience. But—when exactly should you animate? In this blog, we'll explore the ideal moments to introduce motion into your web applications using the Motion Provider library. With the right timing, animations become a natural extension of your UI, guiding your users and improving usability without being overwhelming.

Okay Burak tell me more what I will learn?

When you should animate your UI components,
How to leverage Motion Provider to animate at the right moment,
Best practices to enhance user experience with purposeful animations.

Why and When to Animate?

Animations are more than just decorative flourishes. They serve several critical functions:

On Page Load: Subtle animations can ease users into your content, reducing the abruptness of page transitions.
During User Interaction: Feedback animations on buttons or form elements can signal that an action has been recognized.
While Scrolling: Scroll-triggered animations help reveal content progressively, drawing attention to important details.
State Transitions: Animations between different UI states (like opening modals or switching tabs) provide clarity and continuity.

The key is to animate with purpose. Motion Provider makes it easy to implement these scenarios, ensuring that your animations enhance rather than distract from your content.

Click here to continue reading the post

Lost in the echoes of yesterday

Burak Bilen — Mon, 17 Feb 2025 23:52:46 +0000

This is a submission for Frontend Challenge - February Edition, Glam Up My Markup: Love Language Discovery

What I Built

As part of DEV's Frontend Challenge, I built four stunning Single Page Application (SPA). In this post, I’m spotlighting one of these projects: a dynamic SaaS application demo.

Demo

The project was crafted specifically to illustrate the power and flexibility of this motion engine. It features a clean, modern UI where animations do more than just look pretty—they guide the user experience.

Check out the project here: SaaS Project

Journey

Intuitive Interface: The UI is designed with simplicity and elegance in mind, where each animated transition creates a fluid narrative.
Dynamic Content: The application adapts its layout and content on the fly, powered by the motion engine’s capabilities.
Emotional Storytelling: Beyond functionality, the project infuses poetic narratives into its design. For example:
- "In the silent corridors of our hearts, each lost moment sings a ballad of love and sorrow."
- "In the tapestry of solitude, every shadow speaks of a time when hope and heartbreak danced as one."

Introducing the game-changer: Motion Provider

Burak Bilen — Mon, 17 Feb 2025 22:47:15 +0000

Introduction To Motion Provider

Hello there how is it going?

I'm really excited to introduce Motion Provider—an advanced animation library built for React. Designed with modern web development in mind, Motion Provider not only simplifies adding animations to your projects but also offers advanced features that empower you to craft highly interactive and performance-optimized experiences. I am talking about 1 month work in here

Why Motion Provider?

Motion Provider was created to address the evolving needs of developers who demand both simplicity and power in their animation workflows. Whether you're enhancing a complex dashboard or creating dynamic user interfaces, Motion Provider provides:

Declarative & Imperative APIs: Enjoy the flexibility to choose the style that best fits your project needs.
Advanced Animation Controls: Leverage fine-grained control over transitions, easing functions, and state-driven animations.
Seamless React Integration: Built to work flawlessly with modern React hooks and context, making state-driven animations a breeze.
Customizability: Easily extend and modify default behaviors to create unique, tailored animations that fit your brand and design guidelines.

Advanced Use Cases

For developers looking to dive deeper, here are some advanced fields where Motion Provider truly shines:

Dynamic Animation States: Control animations based on real-time data or user interactions without losing performance.
Gesture-based Interactions: Implement touch and pointer gestures to create fluid, responsive UI components.
Complex Sequence Animations: Orchestrate multiple animated elements with precise timing and coordination.

✅For Documentation please click here

✅For Github repo please click here