Create <OrbitImages /> animation

src/constants/Categories.ts

@@ -78,6 +78,7 @@ export const CATEGORIES = [
       'Star Border',
       'Sticker Peel',
       'Target Cursor',
+      'Orbit Images',
     ],
   },
   {

src/constants/Components.ts

@@ -26,6 +26,7 @@ const animations = {
   'ghost-cursor': () => import('../demo/Animations/GhostCursorDemo.vue'),
   'antigravity': () => import('../demo/Animations/AntigravityDemo.vue'),
   'pixel-trail': () => import('../demo/Animations/PixelTrailDemo.vue'),
+  'orbit-images': () => import('../demo/Animations/OrbitImagesDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/orbitImagesCode.ts

@@ -0,0 +1,30 @@
+import code from '@/content/Animations/OrbitImages/OrbitImages.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const orbitImages = createCodeObject(code, 'Animations/OrbitImages', {
+  usage: `<template>
+  <OrbitImages
+    :images="images"
+    shape="ellipse"
+    :radius-x="340"
+    :radius-y="80"
+    :rotation="-8"
+    :duration="30"
+    :item-size="80"
+    :responsive="true"
+  />
+</template>
+
+<script setup lang="ts">
+import OrbitImages from './OrbitImages.vue';
+
+const images = [
+  'https://picsum.photos/300/300?grayscale&random=1',
+  'https://picsum.photos/300/300?grayscale&random=2',
+  'https://picsum.photos/300/300?grayscale&random=3',
+  'https://picsum.photos/300/300?grayscale&random=4',
+  'https://picsum.photos/300/300?grayscale&random=5',
+  'https://picsum.photos/300/300?grayscale&random=6'
+];
+</script>`
+});