message: docs: adds chakra with framer to recipes page
diff: by Simon Collins
  - [Responsive Header with Chakra UI](#responsive-header-with-chakra-ui) by Jean
  Bauer
  +- [Adding Animation to Chakra UI Components with Framer Motion](#adding-animation-to-chakra-ui-components-with-framer-motion)
  + by Segun Adebayo
  ## Building Forms with Chakra UI and React Hook Form
  @@ -150,5 +152,36 @@ export default Header;
  [![Edit with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chakra-ui-header-sbsh5?fontsize=14&hidenavigation=1&theme=dark)
  +## Adding Animation to Chakra UI Components with Framer Motion
  +
  +_by [Segun Adebayo](https://github.com/segunadebayo)_
  +
  +If you'd like to add some interesting motion interaction or animation to your
  +Chakra UI websites or apps, here's a quick tip:
  +
  +```jsx live=false
  +import { Box } from "@chakra-ui/core";
  +import { motion } from "framer-motion";
  +
  +// 1. Create a custom motion component from Box
  +const MotionBox = motion.custom(Box);
  +
  +// 2. You'll get access to `motion` and `chakra` props in `MotionBox`
  +function Example() {
  + return (
  + <MotionBox
  + size="40px"
  + bg="red.300"
  + drag="x"
  + dragConstraints={{ left: -100, right: 100 }}
  + whileHover={{ scale: 1.1 }}
  + whileTap={{ scale: 0.9 }}
  + />
  + );
  +}
  +```
  +
  +[![Edit with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chakra-ui-framer-motion-example-q5o40?file=/src/Example.js)
  +
  > Are you using Chakra UI to build some cool features in your products, and
  > you'd like to showcase it? Submit a PR to add it to this page.
  