feat: init motion presets rfc

rfcs/2024-08-21-motion-presets.md

@@ -0,0 +1,113 @@
+---
+Start Date: 21-08-2024
+RFC PR: (leave this empty if no PR yet)
+Blade Issue: (leave this empty if no issue yet)
+---
+
+# Motion Presets RFC <!-- omit in toc -->
+
+### Table Of Contents <!-- omit in toc -->
+
+- [Summary](#summary)
+- [Basic Example](#basic-example)
+- [Motivation](#motivation)
+- [Detailed Design](#detailed-design)
+- [Drawbacks/Constraints](#drawbacksconstraints)
+- [Alternatives](#alternatives)
+- [Adoption strategy](#adoption-strategy)
+- [How do we educate people?](#how-do-we-educate-people)
+- [Open Questions](#open-questions)
+- [References](#references)
+
+# Summary
+
+# Basic Example
+
+Include a basic code example. Omit this section if it's not applicable.
+
+# Motivation
+
+- Why are we doing this?
+- What use cases does it support?
+- What is the expected outcome?
+
+Try to focus on explaining the motivation so that if this RFC is not accepted, the motivation could be used to develop alternative solutions. In other words, try to list down the constraints you are trying to solve without coupling them too closely to the solution you have in mind.
+
+# Detailed Design
+
+## POCs
+
+![](./images/motion-presets/hardware-poc-framer-motion.mov)
+
+[![Edit Framer Motion: Hardware Accelarated Animations](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/framer-motion-enter-animation-forked-rk3tvd?file=%2Fsrc%2FApp.tsx%3A27%2C28)
+
+## Goals
+
+1. Performant! Fast transitions
+2. Simple API that makes it easy to implement transitions
+3. React Router Page transition support
+4. Morph transitions support
+5. Small bundle-size
+
+This is the bulk of the RFC. Explain the design in enough detail for somebody familiar with the Design System to understand, and for somebody familiar with the implementation to implement. This should get into specifics and corner-cases, and include examples of how the feature is used. Any new terminology should be defined here.
+
+# Drawbacks/Constraints
+
+Why should we _not_ do this? Maybe try to consider the following constraints
+
+- Implementation cost, both in terms of code size and complexity.
+- The impact of it on new as well as existing consumer projects.
+- Cost of migration.
+
+There are tradeoffs to choosing any path. Attempt to identify them here.
+
+# Alternatives
+
+What other designs/patterns/strategies have been considered?
+
+# Adoption strategy
+
+If we implement this proposal, how will existing consumer projects adopt it?
+
+- Is this a breaking change?
+- Can we write a codemod?
+- How do we prioritise this with business and product folks?
+- How do we communicate with other teams? Will updating docs suffice or do we need a dedicated interaction with them?
+
+# How do we educate people?
+
+- How should this be taught to other folks?
+- What names and terminology work best for these concepts and why?
+- How is this idea best presented?
+
+# Open Questions
+
+- React Native support for presets?
+- Should motion components be imported from `@razorpay/blade/components` like other components or `@razorpay/blade/motion`
+
+# References
+
+- ### Libraries
+
+  - [Framer Motion](https://www.framer.com/motion/)
+  - [Motion One](https://motion.dev/docs)
+  - [GSAP](https://gsap.com/)
+  - [Native Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
+
+- ### Design Systems with Motion Presets
+
+  - [Material UI - Transitions](https://mui.com/material-ui/transitions/)
+  - [Carbon - Motion (Only export easing curves to consumers)](https://carbondesignsystem.com/elements/motion/code)
+  - [Fluent UI - Motion APIs](https://react.fluentui.dev/?path=/docs/motion-apis-createmotioncomponent--docs)
+  - [Atlaskit by Atlassian - Motion Components](https://atlassian.design/components/motion/entering-motions/examples)
+
+- ### Other Motion References
+
+  - [Framer Motion vs Motion One by Matt Perry (Creator of both libraries)](https://motion.dev/blog/should-i-use-framer-motion-or-motion-one)
+  - [Motion One vs Other Libraries - Feature Comparison](https://motion.dev/docs/feature-comparison)
+  - [Motion One & Browser Performance Guide](https://motion.dev/docs/performance)
+  - [Framer Motion - Hardware Accelarated Animations](https://www.framer.com/motion/animation/#hardware-accelerated-animations)
+    - [Release Date](https://github.com/framer/motion/blob/main/CHANGELOG.md#910-2023-02-23)
+    - [Framer Motion Hardware Accelearated Animations POC](https://codesandbox.io/p/sandbox/framer-motion-hardware-accelarated-animations-rk3tvd?file=%2Fsrc%2FApp.tsx%3A17%2C24)
+  - [View Transitions API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+  - [CSS Triggers - What CSS property triggers which type of render](https://csstriggers.com/)