Flip Grid

pnpm dlx motion-blocks add flip-grid

npx motion-blocks add flip-grid

bunx --bun motion-blocks add flip-grid

yarn dlx motion-blocks add flip-grid

---import "@/components/motion-blocks/flip-grid-element.ts";import "@/components/motion-blocks/flip-grid-item-element.ts";--- <motion-flip-grid  columns="3"  duration="0.5"  ease="power2.inOut"  stagger="0"  gap="1rem"  class="w-full">  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div></motion-flip-grid>

import "@/components/motion-blocks/flip-grid-element.ts";import "@/components/motion-blocks/flip-grid-item-element.ts"; export default function Page() {  return (    <motion-flip-grid      columns={3}      duration={0.5}      ease="power2.inOut"      stagger={0}      gap="1rem"      className="w-full"    >      <div className="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>      <div className="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>      <div className="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>      <div className="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div>    </motion-flip-grid>  );}

<script setup>import "@/components/motion-blocks/flip-grid-element.ts";import "@/components/motion-blocks/flip-grid-item-element.ts";</script> <template>  <motion-flip-grid    :columns="3"    :duration="0.5"    ease="power2.inOut"    :stagger="0"    gap="1rem"    class="w-full"  >    <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>    <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>    <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>    <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div>  </motion-flip-grid></template>

<script>  import "@/components/motion-blocks/flip-grid-element.ts";  import "@/components/motion-blocks/flip-grid-item-element.ts";</script> <motion-flip-grid  columns={3}  duration={0.5}  ease="power2.inOut"  stagger={0}  gap="1rem"  class="w-full">  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div></motion-flip-grid>

<script type="module" src="/components/motion-blocks/flip-grid-element.js"></script><script type="module" src="/components/motion-blocks/flip-grid-item-element.js"></script> <motion-flip-grid  columns="3"  duration="0.5"  ease="power2.inOut"  stagger="0"  gap="1rem"  class="w-full">  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div></motion-flip-grid>