{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animation-variants",
  "title": "Animation Variants",
  "description": "animation variants, for your motion components, allows to animate component with transforms, opacity, and blur.",
  "files": [
    {
      "path": "registry/utils/animation-variants/index.tsx",
      "content": "/**\n * @deprecated Use `AnimationVariantsT` instead.\n */\nexport type AnimationT =\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'bottom'\n  | 'z'\n  | 'blur'\n  | 'default';\n\n/**\n * @deprecated Use `animation_variants` instead.\n */\nexport const ANIMATION_VARIANTS = {\n  left: {\n    hidden: { x: '-100%', opacity: 0 },\n    visible: { x: 0, opacity: 1 },\n  },\n  right: {\n    hidden: { x: '100%', opacity: 0 },\n    visible: { x: 0, opacity: 1 },\n  },\n  top: {\n    hidden: { y: '-100%', opacity: 0 },\n    visible: { y: 0, opacity: 1 },\n  },\n  bottom: {\n    hidden: { y: '100%', opacity: 0 },\n    visible: { y: 0, opacity: 1 },\n  },\n  z: {\n    hidden: { scale: 0, opacity: 0 },\n    visible: { scale: 1, opacity: 1 },\n  },\n  blur: {\n    hidden: { filter: 'blur(10px)', opacity: 0 },\n    visible: { filter: 'blur(0px)', opacity: 1 },\n  },\n  default: {\n    hidden: { opacity: 0 },\n    visible: { opacity: 1 },\n  },\n} as const;\n\nexport type AnimationVariantsT =\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'bottom'\n  | 'z'\n  | 'blur'\n  | 'opacity'\n  | 'rotateX'\n  | 'rotateY'\n  | 'rotateZ';\n\nexport const animation_variants = {\n  left: {\n    hidden: { x: '-100%', opacity: 0 },\n    visible: { x: 0, opacity: 1 },\n  },\n  right: {\n    hidden: { x: '100%', opacity: 0 },\n    visible: { x: 0, opacity: 1 },\n  },\n  top: {\n    hidden: { y: '-100%', opacity: 0 },\n    visible: { y: 0, opacity: 1 },\n  },\n  bottom: {\n    hidden: { y: '100%', opacity: 0 },\n    visible: { y: 0, opacity: 1 },\n  },\n  z: {\n    hidden: { scale: 0, opacity: 0 },\n    visible: { scale: 1, opacity: 1 },\n  },\n  blur: {\n    hidden: { filter: 'blur(10px)', opacity: 0 },\n    visible: { filter: 'blur(0px)', opacity: 1 },\n  },\n  rotateX: {\n    hidden: { rotateX: '-180deg', opacity: 0 },\n    visible: { rotateX: '0deg', opacity: 1 },\n  },\n  rotateY: {\n    hidden: { rotateY: '-180deg', opacity: 0 },\n    visible: { rotateY: '0deg', opacity: 1 },\n  },\n  rotateZ: {\n    hidden: { rotateZ: '-180deg', opacity: 0 },\n    visible: { rotateZ: '0deg', opacity: 1 },\n  },\n  opacity: {\n    hidden: { opacity: 0 },\n    visible: { opacity: 1 },\n  },\n} as const;\n",
      "type": "registry:item",
      "target": "components/systaliko-ui/utils/animation-variants.tsx"
    }
  ],
  "type": "registry:item"
}