{ "name": "angry", "type": "registry:ui", "registryDependencies": [], "dependencies": [ "motion" ], "devDependencies": [], "tailwind": {}, "cssVars": { "light": {}, "dark": {} }, "files": [ { "path": "angry.tsx", "content": "'use client';\n\nimport type { Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\n\nconst EYEBROW_ROTATION = 20;\nconst DURATION = 0.6;\n\nconst pathVariantsFace: Variants = {\n normal: { scale: 1, rotate: 0 },\n animate: {\n scale: [1, 1.2, 1.2, 1.2, 1],\n rotate: [0, -3, 3, -1, 1, 0],\n transition: {\n duration: DURATION,\n times: [0, 0.2, 0.4, 0.6, 1],\n ease: 'easeInOut',\n },\n },\n};\n\nconst pathVariantsLeftEyebrow: Variants = {\n normal: { rotate: 0 },\n animate: {\n rotate: [0, EYEBROW_ROTATION, 0],\n transition: {\n duration: DURATION + 0.2,\n },\n },\n};\n\nconst pathVariantsRightEyebrow: Variants = {\n normal: { rotate: 0 },\n animate: {\n rotate: [0, -EYEBROW_ROTATION, 0],\n transition: {\n duration: DURATION + 0.2,\n },\n },\n};\n\nconst pathVariantsEye: Variants = {\n normal: { scale: 1 },\n animate: {\n scale: [1, 1.2, 1],\n transition: {\n duration: DURATION,\n },\n },\n};\n\nconst pathVariantsMouth: Variants = {\n normal: { translateY: 0 },\n animate: {\n translateY: [0, -0.5, 0],\n transition: {\n duration: DURATION,\n },\n },\n};\n\nconst AngryIcon = () => {\n const controls = useAnimation();\n\n return (\n