@readdy/anim 0.0.21

package/dist/metadata.json

@@ -0,0 +1,1051 @@
+{
+  "schemaVersion": "1.0.0",
+  "libraryVersion": "0.0.21",
+  "animations": [
+    {
+      "id": "anim-readdy-header-letter-bounce",
+      "animationName": "Readdy Letter Bounce",
+      "description": "Bouncy letters: each character of my headline gently bobs up and down in a wave, slightly out of sync with neighbors.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "duration": {
+          "type": "number",
+          "default": 850,
+          "description": "Animation duration in milliseconds."
+        },
+        "amplitude": {
+          "type": "number",
+          "default": 6,
+          "description": "Vertical movement amplitude in pixels."
+        },
+        "stagger": {
+          "type": "number",
+          "default": 60,
+          "description": "Delay between animated units in milliseconds."
+        },
+        "maxChars": {
+          "type": "number",
+          "default": 160,
+          "description": "Maximum characters before falling back to a simpler strategy."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "text-wave",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/letter-bounce.gif",
+      "prompt": "Apply Letter Bounce animation from @readdy/anim@0.0.21\n\nImport: import { AnimLetterBounce } from '@readdy/anim/header/letter-bounce/react';\nUsage: Replace the target text element with <AnimLetterBounce text=\"...\" tag=\"h1\" stagger={60} duration={700} />. Use the original element tag for the tag prop. Preserve dynamic expressions such as i18n calls when possible.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render plain text without character animation.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 101
+    },
+    {
+      "id": "anim-readdy-header-bounce-in-down",
+      "animationName": "Bounce In Down",
+      "description": "A Bounce In Down effect for header elements.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "stagger": {
+          "type": "number",
+          "default": 40,
+          "description": "Delay between animated units in milliseconds."
+        },
+        "maxChars": {
+          "type": "number",
+          "default": 160,
+          "description": "Maximum characters before falling back to a simpler strategy."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "bounce-in-down",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/bounce-in-down.gif",
+      "prompt": "Apply Bounce In Down animation from @readdy/anim@0.0.21\n\nImport: import { AnimBounceInDown } from '@readdy/anim/header/bounce-in-down/react';\nUsage: Wrap the target text element without adding an extra wrapper: <AnimBounceInDown duration={800}>...</AnimBounceInDown>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the text visible without bounce motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 102
+    },
+    {
+      "id": "anim-readdy-header-shimmer-text",
+      "animationName": "Shimmer Text",
+      "description": "A Shimmer Text effect for header elements.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "text-shimmer",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/shimmer-text.gif",
+      "prompt": "Apply Shimmer Text animation from @readdy/anim@0.0.21\n\nImport: import { AnimShimmerText } from '@readdy/anim/header/shimmer-text/react';\nUsage: Replace the target text element with <AnimShimmerText text=\"...\" tag=\"h1\" stagger={45} duration={900} />. Use the original element tag for the tag prop.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render plain text without shimmer motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 102
+    },
+    {
+      "id": "anim-readdy-header-text-type",
+      "animationName": "Text Type",
+      "description": "A Text Type effect for header elements.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "gap": {
+          "type": "string",
+          "default": "0.08em",
+          "description": "Gap between content and caret."
+        },
+        "caretWidth": {
+          "type": "string",
+          "default": "0.08em",
+          "description": "Caret width."
+        },
+        "caretBlinkDuration": {
+          "type": "number",
+          "default": 900,
+          "description": "Caret blink duration in milliseconds."
+        },
+        "typingSpeed": {
+          "type": "number",
+          "default": 75,
+          "description": "Typing speed in milliseconds per character."
+        },
+        "deletingSpeed": {
+          "type": "number",
+          "default": 45,
+          "description": "Deleting speed in milliseconds per character."
+        },
+        "pauseDuration": {
+          "type": "number",
+          "default": 1500,
+          "description": "Pause duration between animation phases in milliseconds."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "text-type",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/text-type.gif",
+      "prompt": "Apply Text Type animation from @readdy/anim@0.0.21\n\nImport: import { AnimTextType } from '@readdy/anim/header/text-type/react';\nUsage: Replace the target text element with <AnimTextType text=\"...\" tag=\"h1\" stagger={35} duration={500} />. Use the original element tag for the tag prop.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render the full text immediately.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 103
+    },
+    {
+      "id": "anim-readdy-header-gradient-text",
+      "animationName": "Gradient Text",
+      "description": "Style my headline with two or more bright colors in a smooth gradient across the letters.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "text-gradient",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/gradient-text.gif",
+      "prompt": "Apply Gradient Text animation from @readdy/anim@0.0.21\n\nImport: import { AnimGradientText } from '@readdy/anim/header/gradient-text/react';\nUsage: Wrap the target text element without adding an extra wrapper: <AnimGradientText duration={2400}>...</AnimGradientText>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the gradient static.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 104
+    },
+    {
+      "id": "anim-readdy-header-fly-in-chars",
+      "animationName": "Readdy Fly In Chars",
+      "description": "Fly-in characters: each letter arrives from a random off-screen direction with slight rotation, then settles into the final line.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "stagger": {
+          "type": "number",
+          "default": 36,
+          "description": "Delay between animated units in milliseconds."
+        },
+        "maxChars": {
+          "type": "number",
+          "default": 160,
+          "description": "Maximum characters before falling back to a simpler strategy."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "text-split",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/fly-in-chars.gif",
+      "prompt": "Apply Fly In Chars animation from @readdy/anim@0.0.21\n\nImport: import { AnimFlyInChars } from '@readdy/anim/header/fly-in-chars/react';\nUsage: Replace the target text element with <AnimFlyInChars text=\"...\" tag=\"h1\" stagger={45} duration={750} />. Use the original element tag for the tag prop.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render plain text without fly-in motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 105
+    },
+    {
+      "id": "anim-readdy-header-blur-to-sharp-rise",
+      "animationName": "Blur-to-sharp Rise",
+      "description": "Bionova: fade-up: translateY(20px) + opacity 0 + blur(4px) to translateY(0) + opacity 1 + blur(0).",
+      "category": "header",
+      "applyTo": [
+        "header",
+        "card",
+        "object"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "box-blur-rise",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/blur-to-sharp-rise.gif",
+      "prompt": "Apply Blur-to-sharp Rise animation from @readdy/anim@0.0.21\n\nImport: import { AnimBlurRise } from '@readdy/anim/card/blur-rise/react';\nUsage: Wrap the target heading or text container without adding an extra wrapper: <AnimBlurRise>...</AnimBlurRise>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, show the text immediately without blur or rise motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 106
+    },
+    {
+      "id": "anim-readdy-header-roll-in",
+      "animationName": "Roll In",
+      "description": "A Roll In effect for header elements.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "stagger": {
+          "type": "number",
+          "default": 45,
+          "description": "Delay between animated units in milliseconds."
+        },
+        "maxChars": {
+          "type": "number",
+          "default": 160,
+          "description": "Maximum characters before falling back to a simpler strategy."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "roll-in",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/roll-in.gif",
+      "prompt": "Apply Roll In animation from @readdy/anim@0.0.21\n\nImport: import { AnimRollIn } from '@readdy/anim/header/roll-in/react';\nUsage: Wrap the target text element without adding an extra wrapper: <AnimRollIn duration={700}>...</AnimRollIn>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the text visible without entrance motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 106
+    },
+    {
+      "id": "anim-readdy-header-split-text",
+      "animationName": "Split Text",
+      "description": "A Split Text effect for header elements.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "stagger": {
+          "type": "number",
+          "default": 50,
+          "description": "Delay between animated units in milliseconds."
+        },
+        "maxChars": {
+          "type": "number",
+          "default": 180,
+          "description": "Maximum characters before falling back to a simpler strategy."
+        },
+        "threshold": {
+          "type": "number",
+          "default": 0.1,
+          "description": "Intersection threshold before the animation triggers."
+        },
+        "rootMargin": {
+          "type": "string",
+          "default": "-100px 0px",
+          "description": "Intersection observer root margin."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "text-split",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/split-text.gif",
+      "prompt": "Apply Split Text animation from @readdy/anim@0.0.21\n\nImport: import { AnimSplitText } from '@readdy/anim/header/split-text/react';\nUsage: Replace the target text element with <AnimSplitText text=\"...\" tag=\"h1\" stagger={50} duration={650} />. Use the original element tag for the tag prop.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render plain text without split animation.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 107
+    },
+    {
+      "id": "anim-readdy-header-shuffle",
+      "animationName": "Shuffle",
+      "description": "A Shuffle effect for header elements.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "stagger": {
+          "type": "number",
+          "default": 35,
+          "description": "Delay between animated units in milliseconds."
+        },
+        "shuffleFrames": {
+          "type": "number",
+          "default": 7,
+          "description": "Shuffle Frames option."
+        },
+        "frameDelay": {
+          "type": "number",
+          "default": 40,
+          "description": "Frame Delay option."
+        },
+        "idleOpacity": {
+          "type": "number",
+          "default": 0.45,
+          "description": "Opacity used in the idle state."
+        },
+        "idleOffset": {
+          "type": "string",
+          "default": "0.08em",
+          "description": "Offset used in the idle state."
+        },
+        "idleScale": {
+          "type": "number",
+          "default": 0.98,
+          "description": "Scale used in the idle state."
+        },
+        "settleDuration": {
+          "type": "number",
+          "default": 180,
+          "description": "Duration of the settle transition in milliseconds."
+        },
+        "maxChars": {
+          "type": "number",
+          "default": 120,
+          "description": "Maximum characters before falling back to a simpler strategy."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "text-shuffle",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/shuffle.gif",
+      "prompt": "Apply Shuffle animation from @readdy/anim@0.0.21\n\nImport: import { AnimShuffle } from '@readdy/anim/header/shuffle/react';\nUsage: Replace the target text element with <AnimShuffle text=\"...\" tag=\"h1\" stagger={30} duration={800} />. Use the original element tag for the tag prop.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render the final text without shuffle motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 108
+    },
+    {
+      "id": "anim-readdy-header-anime-splittext",
+      "animationName": "Anime Splittext",
+      "description": "A Anime Splittext effect for header elements.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "stagger": {
+          "type": "number",
+          "default": 120,
+          "description": "Delay between animated units in milliseconds."
+        },
+        "duration": {
+          "type": "number",
+          "default": 700,
+          "description": "Animation duration in milliseconds."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "text-wave",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/anime-splittext.gif",
+      "prompt": "Apply Anime Split Text animation from @readdy/anim@0.0.21\n\nImport: import { AnimAnimeSplitText } from '@readdy/anim/header/anime-splittext/react';\nUsage: Replace the target text element with <AnimAnimeSplitText text=\"...\" tag=\"h1\" stagger={55} duration={720} />. Use the original element tag for the tag prop.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render plain text without split text motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 110
+    },
+    {
+      "id": "anim-readdy-header-word-curtain-reveal",
+      "animationName": "Word curtain reveal",
+      "description": "WordByWordReveal: Each word in overflow-hidden inline-block span. Inner span y: 100% → 0%. Default stagger: 0.035s, duration: 0.55s.",
+      "category": "header",
+      "applyTo": [
+        "header"
+      ],
+      "options": {
+        "duration": {
+          "type": "number",
+          "default": 550,
+          "description": "Animation duration in milliseconds."
+        },
+        "stagger": {
+          "type": "number",
+          "default": 35,
+          "description": "Delay between animated units in milliseconds."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "text-word-curtain",
+      "previewImage": "https://static.readdy.ai/anim/previews/headers/word-curtain-reveal.gif",
+      "prompt": "Apply Word Curtain Reveal animation from @readdy/anim@0.0.21\n\nImport: import { AnimWordCurtainReveal } from '@readdy/anim/header/word-curtain-reveal/react';\nUsage: Replace the target text element with <AnimWordCurtainReveal text=\"...\" tag=\"h1\" stagger={90} duration={850} />. Use the original element tag for the tag prop.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render the text without masked reveal motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 111
+    },
+    {
+      "id": "anim-readdy-button-3d-flip",
+      "animationName": "3d Flip",
+      "description": "A 3d Flip effect for button elements.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {
+        "maxTilt": {
+          "type": "number",
+          "default": 12,
+          "description": "Maximum tilt angle in degrees."
+        },
+        "translate": {
+          "type": "number",
+          "default": 8,
+          "description": "Maximum translation distance in pixels."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "3d-flip",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/3d-flip.gif",
+      "prompt": "Apply 3D Flip animation from @readdy/anim@0.0.21\n\nImport: import { AnimThreeDFlip } from '@readdy/anim/button/3d-flip/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimThreeDFlip maxTilt={15} duration={450}>...</AnimThreeDFlip>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, do not attach 3D transform behavior.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 201
+    },
+    {
+      "id": "anim-readdy-button-magnetic-hover",
+      "animationName": "Magnetic hover",
+      "description": "Magnet: padding 150, strength 3, translate3d on mousemove, transition 0.3s ease-out active / 0.6s ease-in-out inactive. Jack hero portrait.",
+      "category": "button",
+      "applyTo": [
+        "button",
+        "object"
+      ],
+      "options": {
+        "padding": {
+          "type": "number",
+          "default": 150,
+          "description": "Pointer interaction radius in pixels."
+        },
+        "strength": {
+          "type": "number",
+          "default": 3,
+          "description": "Pointer interaction strength."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "btn-scale",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/magnetic-hover.gif",
+      "prompt": "Apply Magnetic Hover animation from @readdy/anim@0.0.21\n\nImport: import { AnimMagneticHover } from '@readdy/anim/button/magnetic-hover/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimMagneticHover strength={0.08} duration={300}>...</AnimMagneticHover>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, do not attach pointer-driven transform behavior.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 201
+    },
+    {
+      "id": "anim-readdy-button-border-beam",
+      "animationName": "Border Beam",
+      "description": "A Border Beam effect for button elements.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {
+        "duration": {
+          "type": "number",
+          "default": 3000,
+          "description": "Animation duration in milliseconds."
+        },
+        "borderWidth": {
+          "type": "number",
+          "default": 1.35,
+          "description": "Animated border width in pixels."
+        },
+        "glowOpacity": {
+          "type": "number",
+          "default": 0.28,
+          "description": "Glow opacity for the border beam effect."
+        },
+        "colorFrom": {
+          "type": "string",
+          "default": "#ff6b6b",
+          "description": "Color From option."
+        },
+        "colorTo": {
+          "type": "string",
+          "default": "#ffb86b",
+          "description": "Color To option."
+        },
+        "secondaryColorFrom": {
+          "type": "string",
+          "default": "#5ea0ff",
+          "description": "Secondary Color From option."
+        },
+        "secondaryColorTo": {
+          "type": "string",
+          "default": "#9ec5ff",
+          "description": "Secondary Color To option."
+        },
+        "initialOffset": {
+          "type": "number",
+          "default": 0,
+          "description": "Initial Offset option."
+        },
+        "delay": {
+          "type": "number",
+          "default": 0,
+          "description": "Animation delay in milliseconds."
+        },
+        "reverse": {
+          "type": "boolean",
+          "default": false,
+          "description": "Reverse option."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "border-beam",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/border-beam.gif",
+      "prompt": "Apply Border Beam animation from @readdy/anim@0.0.21\n\nImport: import { AnimBorderBeam } from '@readdy/anim/button/border-beam/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimBorderBeam duration={1800}>...</AnimBorderBeam>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the border treatment static.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 203
+    },
+    {
+      "id": "anim-readdy-button-bounce-elastic",
+      "animationName": "Bounce Elastic",
+      "description": "A Bounce Elastic effect for button elements.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "bounce-elastic",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/bounce-elastic.gif",
+      "prompt": "Apply Bounce Elastic animation from @readdy/anim@0.0.21\n\nImport: import { AnimBounceElastic } from '@readdy/anim/button/bounce-elastic/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimBounceElastic duration={650}>...</AnimBounceElastic>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the button static.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 204
+    },
+    {
+      "id": "anim-readdy-button-rainbow-button",
+      "animationName": "Rainbow Button",
+      "description": "Magic UI Rainbow Button (outline): neutral top/left/right edges; animated rainbow gradient line and soft glow on the bottom edge only. Install @magicui/rainbow-button; add rainbow keyframes and --color-1…--color-5 CSS variables per Magic UI docs.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "btn-rainbow",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/rainbow-button.gif",
+      "prompt": "Apply Rainbow Button animation from @readdy/anim@0.0.21\n\nImport: import { AnimRainbowButton } from '@readdy/anim/button/rainbow-button/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimRainbowButton duration={2200}>...</AnimRainbowButton>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the gradient static.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 204
+    },
+    {
+      "id": "anim-readdy-button-sketch-button",
+      "animationName": "Sketch button",
+      "description": "Brutalist sketch button: white fill, black border and text; on hover a hard offset black shadow (4px 4px 0) with smooth transition.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "btn-sketch",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/sketch-button.gif",
+      "prompt": "Apply Sketch Button animation from @readdy/anim@0.0.21\n\nImport: import { AnimSketchButton } from '@readdy/anim/button/sketch-button/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimSketchButton jitter={2} duration={450}>...</AnimSketchButton>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the button static.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 205
+    },
+    {
+      "id": "anim-readdy-button-confetti-button",
+      "animationName": "Confetti button",
+      "description": "Your normal CTA button stays as-is; on click a canvas overlay bursts confetti and sequins from the button. See confetti-button-vanilla.js for physics.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {
+        "pieces": {
+          "type": "number",
+          "default": 18,
+          "description": "Number of generated confetti pieces."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "btn-confetti",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/confetti-button.gif",
+      "prompt": "Apply Confetti Button animation from @readdy/anim@0.0.21\n\nImport: import { AnimConfettiButton } from '@readdy/anim/button/confetti-button/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimConfettiButton particleCount={18} spread={60}>...</AnimConfettiButton>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, do not emit confetti particles.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 206
+    },
+    {
+      "id": "anim-readdy-button-glow-cta",
+      "animationName": "Glow CTA",
+      "description": "hover: scale 1.05, glow opacity 20%→60%, Arrow slides in from left. ClearInvoice primary button.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {
+        "scale": {
+          "type": "number",
+          "default": 1.05,
+          "description": "Scale multiplier for the effect."
+        },
+        "idleOpacity": {
+          "type": "number",
+          "default": 0.2,
+          "description": "Opacity used in the idle state."
+        },
+        "activeOpacity": {
+          "type": "number",
+          "default": 0.6,
+          "description": "Opacity used in the active state."
+        },
+        "inset": {
+          "type": "number",
+          "default": -8,
+          "description": "Inset offset in pixels."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "btn-glow",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/glow-cta.gif",
+      "prompt": "Apply Glow CTA animation from @readdy/anim@0.0.21\n\nImport: import { AnimGlowCta } from '@readdy/anim/button/glow-cta/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimGlowCta duration={1800}>...</AnimGlowCta>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the glow static or remove pulsing.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 207
+    },
+    {
+      "id": "anim-readdy-button-bubble-button",
+      "animationName": "Bubble button",
+      "description": "Goo-filter blob behind your normal CTA on hover only: wrap the button, hide the goo layer until mouseenter, then GSAP animates merged circles. SVG #goo filter required.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "btn-bubble",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/bubble-button.gif",
+      "prompt": "Apply Bubble Button animation from @readdy/anim@0.0.21\n\nImport: import { AnimBubbleButton } from '@readdy/anim/button/bubble-button/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimBubbleButton intensity={1} duration={500}>...</AnimBubbleButton>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, do not attach bubble motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 208
+    },
+    {
+      "id": "anim-readdy-button-pulse",
+      "animationName": "Pulse",
+      "description": "A Pulse effect for button elements.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "pulse",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/pulse.gif",
+      "prompt": "Apply Pulse animation from @readdy/anim@0.0.21\n\nImport: import { AnimPulse } from '@readdy/anim/button/pulse/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimPulse duration={1400}>...</AnimPulse>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, disable pulsing.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 209
+    },
+    {
+      "id": "anim-readdy-button-blur-fade-in",
+      "animationName": "Blur fade in",
+      "description": "Button entrance: fade in while blur clears and element rises slightly — opacity 0→1, filter blur(10px)→blur(0), translateY(8px)→0.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "btn-blur-fade-in",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/blur-fade-in.gif",
+      "prompt": "Apply Blur Fade In animation from @readdy/anim@0.0.21\n\nImport: import { AnimBlurFadeIn } from '@readdy/anim/button/blur-fade-in/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimBlurFadeIn duration={650}>...</AnimBlurFadeIn>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, show the element immediately.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 211
+    },
+    {
+      "id": "anim-readdy-button-shimmer-border",
+      "animationName": "Shimmer Border",
+      "description": "A Shimmer Border effect for button elements.",
+      "category": "button",
+      "applyTo": [
+        "button"
+      ],
+      "options": {
+        "duration": {
+          "type": "number",
+          "default": 800,
+          "description": "Animation duration in milliseconds."
+        },
+        "borderWidth": {
+          "type": "number",
+          "default": 1.5,
+          "description": "Animated border width in pixels."
+        },
+        "opacity": {
+          "type": "number",
+          "default": 0.88,
+          "description": "Opacity value for the visual effect."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "shimmer-border",
+      "previewImage": "https://static.readdy.ai/anim/previews/buttons/shimmer-border.gif",
+      "prompt": "Apply Shimmer Border animation from @readdy/anim@0.0.21\n\nImport: import { AnimShimmerBorder } from '@readdy/anim/button/shimmer-border/react';\nUsage: Wrap the target interactive element without adding an extra wrapper: <AnimShimmerBorder duration={1600}>...</AnimShimmerBorder>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the border treatment static.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 211
+    },
+    {
+      "id": "anim-readdy-card-blur-rise",
+      "animationName": "Blur Rise",
+      "description": "A Blur Rise effect for card elements.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "blur-rise",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/blur-rise.gif",
+      "prompt": "Apply Blur Rise animation from @readdy/anim@0.0.21\n\nImport: import { AnimBlurRise } from '@readdy/anim/card/blur-rise/react';\nUsage: Wrap the target container without adding an extra wrapper: <AnimBlurRise duration={700}>...</AnimBlurRise>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, show the element immediately.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 301
+    },
+    {
+      "id": "anim-readdy-card-bounce-in-bottom",
+      "animationName": "Bounce In Bottom",
+      "description": "A Bounce In Bottom effect for card elements.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "bounce-in-bottom",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/bounce-in-bottom.gif",
+      "prompt": "Apply Bounce In Bottom animation from @readdy/anim@0.0.21\n\nImport: import { AnimBounceInBottom } from '@readdy/anim/card/bounce-in-bottom/react';\nUsage: Wrap the target card without adding an extra wrapper: <AnimBounceInBottom duration={800}>...</AnimBounceInBottom>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, show the element immediately.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 302
+    },
+    {
+      "id": "anim-readdy-card-tilted-card",
+      "animationName": "Tilted Card",
+      "description": "## Integrate TiltedCard from React Bits.",
+      "category": "card",
+      "applyTo": [
+        "card",
+        "object"
+      ],
+      "options": {
+        "perspective": {
+          "type": "number",
+          "default": 900,
+          "description": "Perspective depth in pixels."
+        },
+        "duration": {
+          "type": "number",
+          "default": 550,
+          "description": "Animation duration in milliseconds."
+        },
+        "maxTilt": {
+          "type": "number",
+          "default": 10,
+          "description": "Maximum tilt angle in degrees."
+        },
+        "scale": {
+          "type": "number",
+          "default": 1.02,
+          "description": "Scale multiplier for the effect."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "card-tilt",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/tilted-card.gif",
+      "prompt": "Apply Tilted Card animation from @readdy/anim@0.0.21\n\nImport: import { AnimTiltedCard } from '@readdy/anim/card/tilted-card/react';\nUsage: Wrap the target card without adding an extra wrapper: <AnimTiltedCard maxTilt={12} strength={0.08}>...</AnimTiltedCard>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, do not attach pointer-driven tilt behavior.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 303
+    },
+    {
+      "id": "anim-readdy-card-card-flip",
+      "animationName": "Card Flip",
+      "description": "Kokonut UI card flip with front/back faces, hover-driven rotateY(180deg), glow rings on the front, and staggered feature reveal on the back.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {
+        "duration": {
+          "type": "number",
+          "default": 500,
+          "description": "Animation duration in milliseconds."
+        },
+        "perspective": {
+          "type": "number",
+          "default": 2000,
+          "description": "Perspective depth in pixels."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "card-flip",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/card-flip.gif",
+      "prompt": "Apply Card Flip animation from @readdy/anim@0.0.21\n\nImport: import { AnimCardFlip } from '@readdy/anim/card/card-flip/react';\nUsage: Wrap the target card element with <AnimCardFlip duration={500} perspective={2000}>...</AnimCardFlip>. Preserve the original content, attributes, event handlers, responsive classes, and layout semantics.\nProps: duration: number (default: 500), perspective: number (default: 2000)\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, render the original element without the animation behavior.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 304
+    },
+    {
+      "id": "anim-readdy-card-float-idle",
+      "animationName": "Float Idle",
+      "description": "A Float Idle effect for card elements.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "float-idle",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/float-idle.gif",
+      "prompt": "Apply Float Idle animation from @readdy/anim@0.0.21\n\nImport: import { AnimFloatIdle } from '@readdy/anim/card/float-idle/react';\nUsage: Wrap the target container without adding an extra wrapper: <AnimFloatIdle duration={3000}>...</AnimFloatIdle>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, disable continuous floating.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 305
+    },
+    {
+      "id": "anim-readdy-card-rgb-split-glitch",
+      "animationName": "RGB split glitch",
+      "description": "Digital glitch effect with RGB channel misalignment on the image.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {
+        "duration": {
+          "type": "number",
+          "default": 1100,
+          "description": "Animation duration in milliseconds."
+        },
+        "shift": {
+          "type": "number",
+          "default": 3,
+          "description": "Glitch offset in pixels."
+        },
+        "shadowOffset": {
+          "type": "number",
+          "default": 2,
+          "description": "Shadow offset in pixels."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "card-glitch",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/rgb-split-glitch.gif",
+      "prompt": "Apply RGB Split Glitch animation from @readdy/anim@0.0.21\n\nImport: import { AnimRgbSplitGlitch } from '@readdy/anim/card/rgb-split-glitch/react';\nUsage: Wrap the target card or media element without adding an extra wrapper: <AnimRgbSplitGlitch duration={1200}>...</AnimRgbSplitGlitch>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, avoid glitch motion.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 306
+    },
+    {
+      "id": "anim-readdy-card-card-fan-spread",
+      "animationName": "Card fan spread",
+      "description": "Stack of image cards fans out in 3D on click.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {
+        "spreadDistance": {
+          "type": "number",
+          "default": 72,
+          "description": "Horizontal spread distance in pixels."
+        },
+        "spreadRotate": {
+          "type": "number",
+          "default": 24,
+          "description": "Spread rotation in degrees."
+        },
+        "depthRotate": {
+          "type": "number",
+          "default": 18,
+          "description": "Depth rotation in degrees."
+        },
+        "lift": {
+          "type": "number",
+          "default": 14,
+          "description": "Vertical lift distance in pixels."
+        },
+        "duration": {
+          "type": "number",
+          "default": 550,
+          "description": "Animation duration in milliseconds."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "card-fan",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/card-fan-spread.gif",
+      "prompt": "Apply Card Fan Spread animation from @readdy/anim@0.0.21\n\nImport: import { AnimCardFanSpread } from '@readdy/anim/card/card-fan-spread/react';\nUsage: Wrap the target card stack or container without adding an extra wrapper: <AnimCardFanSpread spread={16} rotation={6}>...</AnimCardFanSpread>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep cards in their resting layout.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 307
+    },
+    {
+      "id": "anim-readdy-card-image-zoom-rotate",
+      "animationName": "Image Zoom Rotate",
+      "description": "A Image Zoom Rotate effect for card elements.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {
+        "scale": {
+          "type": "number",
+          "default": 1.08,
+          "description": "Scale multiplier for the effect."
+        },
+        "rotate": {
+          "type": "number",
+          "default": 2,
+          "description": "Rotation amount in degrees."
+        },
+        "duration": {
+          "type": "number",
+          "default": 500,
+          "description": "Animation duration in milliseconds."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "image-zoom-rotate",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/image-zoom-rotate.gif",
+      "prompt": "Apply Image Zoom Rotate animation from @readdy/anim@0.0.21\n\nImport: import { AnimImageZoomRotate } from '@readdy/anim/card/image-zoom-rotate/react';\nUsage: Wrap the target image or media card without adding an extra wrapper: <AnimImageZoomRotate zoom={1.08} rotate={2}>...</AnimImageZoomRotate>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, avoid transform-driven zoom and rotation.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 307
+    },
+    {
+      "id": "anim-readdy-card-image-magnifier",
+      "animationName": "Image magnifier",
+      "description": "Circular magnifier effect follows the cursor for local zoom on the image.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {
+        "lensSize": {
+          "type": "number",
+          "default": 104,
+          "description": "Magnifier lens size in pixels."
+        },
+        "zoom": {
+          "type": "number",
+          "default": 320,
+          "description": "Zoom percentage for the magnifier effect."
+        },
+        "fadeDuration": {
+          "type": "number",
+          "default": 160,
+          "description": "Fade duration in milliseconds."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "card-magnifier",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/image-magnifier.gif",
+      "prompt": "Apply Image Magnifier animation from @readdy/anim@0.0.21\n\nImport: import { AnimImageMagnifier } from '@readdy/anim/card/image-magnifier/react';\nUsage: Wrap the target image or media element without adding an extra wrapper: <AnimImageMagnifier zoom={2} size={120}>...</AnimImageMagnifier>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, do not attach pointer-following magnifier behavior.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 308
+    },
+    {
+      "id": "anim-readdy-card-pop-in-stack",
+      "animationName": "Pop In Stack",
+      "description": "A Pop In Stack effect for card elements.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {
+        "delay": {
+          "type": "number",
+          "default": 0,
+          "description": "Animation delay in milliseconds."
+        },
+        "duration": {
+          "type": "number",
+          "default": 600,
+          "description": "Animation duration in milliseconds."
+        },
+        "offset": {
+          "type": "number",
+          "default": 18,
+          "description": "Entrance offset in pixels."
+        },
+        "scaleStart": {
+          "type": "number",
+          "default": 0.88,
+          "description": "Initial scale value before the animation starts."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "pop-in-stack",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/pop-in-stack.gif",
+      "prompt": "Apply Pop In Stack animation from @readdy/anim@0.0.21\n\nImport: import { AnimPopInStack } from '@readdy/anim/card/pop-in-stack/react';\nUsage: Wrap the target card or card stack without adding an extra wrapper: <AnimPopInStack distance={12} duration={600}>...</AnimPopInStack>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, show the stack immediately.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 308
+    },
+    {
+      "id": "anim-readdy-card-reveal-from-top",
+      "animationName": "Reveal From Top",
+      "description": "A Reveal From Top effect for card elements.",
+      "category": "card",
+      "applyTo": [
+        "card"
+      ],
+      "options": {},
+      "conflictsWith": [],
+      "previewVariant": "reveal-from-top",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/reveal-from-top.gif",
+      "prompt": "Apply Reveal From Top animation from @readdy/anim@0.0.21\n\nImport: import { AnimRevealFromTop } from '@readdy/anim/card/reveal-from-top/react';\nUsage: Wrap the target card or section without adding an extra wrapper: <AnimRevealFromTop duration={700}>...</AnimRevealFromTop>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, show the element immediately.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 309
+    },
+    {
+      "id": "anim-readdy-card-magic-ui-border-beam",
+      "animationName": "Magic UI Border Beam",
+      "description": "Animated gradient border trace around a card for highlight and focus.",
+      "category": "card",
+      "applyTo": [
+        "card",
+        "section",
+        "container"
+      ],
+      "options": {
+        "duration": {
+          "type": "number",
+          "default": 3000,
+          "description": "Animation duration in milliseconds."
+        },
+        "borderWidth": {
+          "type": "number",
+          "default": 1.35,
+          "description": "Animated border width in pixels."
+        },
+        "glowOpacity": {
+          "type": "number",
+          "default": 0.28,
+          "description": "Glow opacity for the border beam effect."
+        },
+        "colorFrom": {
+          "type": "string",
+          "default": "#ff6b6b",
+          "description": "Color From option."
+        },
+        "colorTo": {
+          "type": "string",
+          "default": "#ffb86b",
+          "description": "Color To option."
+        },
+        "secondaryColorFrom": {
+          "type": "string",
+          "default": "#5ea0ff",
+          "description": "Secondary Color From option."
+        },
+        "secondaryColorTo": {
+          "type": "string",
+          "default": "#9ec5ff",
+          "description": "Secondary Color To option."
+        },
+        "initialOffset": {
+          "type": "number",
+          "default": 0,
+          "description": "Initial Offset option."
+        },
+        "delay": {
+          "type": "number",
+          "default": 0,
+          "description": "Animation delay in milliseconds."
+        },
+        "reverse": {
+          "type": "boolean",
+          "default": false,
+          "description": "Reverse option."
+        }
+      },
+      "conflictsWith": [],
+      "previewVariant": "card-border-beam",
+      "previewImage": "https://static.readdy.ai/anim/previews/cards/magic-ui-border-beam.gif",
+      "prompt": "Apply Magic UI Border Beam animation from @readdy/anim@0.0.21\n\nImport: import { AnimBorderBeam } from '@readdy/anim/button/border-beam/react';\nUsage: Wrap the target card or section without adding an extra wrapper: <AnimBorderBeam duration={3000} borderWidth={1.35} glowOpacity={0.28}>...</AnimBorderBeam>.\n\nAccessibility: Check prefers-reduced-motion. If reduced motion is enabled, keep the card border static without the moving beam.\n\nTarget element selector: {selectorContext}",
+      "enabled": true,
+      "sortOrder": 312
+    }
+  ]
+}