Textarea

The Textarea component is an enhanced version of the standard HTML textarea with beautiful animations and interactive features. Built with Framer Motion, it provides various animation variants, auto-expanding capabilities, and interactive effects.

Preview

Type something...

Code

import AnimatedTextarea from '@ignix-ui/textarea';

<AnimatedTextarea
  placeholder="Type something..."
  variant="clean"
  value={value}
  onChange={setValue}
/>

Installation

npm

ignix add component textarea

manual

"use client";

import type React from "react";
import { useState, useRef, useEffect } from "react";
import { motion, type Variants, useMotionValue, useSpring, useTransform } from "framer-motion";
import { cn } from "../../../utils/cn";

interface AnimatedTextareaProps {
  placeholder: string;
  variant: string;
  textareaClassName?: string;
  labelClassName?: string;
  value: string;
  onChange: (value: string) => void;
  onFocus?: () => void;
  onBlur?: () => void;
  disabled?: boolean;
  error?: string;
  success?: boolean;
  icon?: React.ElementType;
  maxLength?: number;
  minRows?: number;
  maxRows?: number;
  size?: "sm" | "md" | "lg";
  showCharacterCount?: boolean;
  autoResize?: boolean;
  theme?: "light" | "dark" | "auto";
  glowEffect?: boolean;
}

interface TextareaVariant {
  label: Variants;
  textarea: Variants;
  extra?: Variants;
  container?: Variants;
}

const createAdvancedParticles = (container: HTMLElement, count = 12) => {
  const particles: HTMLElement[] = [];
  
  for (let i = 0; i < count; i++) {
    const particle = document.createElement("div");
    particle.className = cn(
      "absolute rounded-full pointer-events-none",
      "bg-gradient-to-r from-blue-400 to-cyan-400",
      "shadow-lg shadow-blue-400/50"
    );
    
    const size = Math.random() * 4 + 2;
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    particle.style.left = `${Math.random() * 100}%`;
    particle.style.top = `${Math.random() * 100}%`;
    particle.style.boxShadow = `0 0 ${size * 2}px rgba(59, 130, 246, 0.6)`;
    
    particle.style.animation = `particleFloat ${Math.random() * 3 + 2}s ease-in-out infinite`;
    particle.style.animationDelay = `${Math.random() * 2}s`;
    
    container.appendChild(particle);
    particles.push(particle);
    
    setTimeout(() => {
      if (container.contains(particle)) {
        container.removeChild(particle);
      }
    }, 4000);
  }
  
  return particles;
};

const AnimatedTextarea: React.FC<AnimatedTextareaProps> = ({
  placeholder,
  variant,
  textareaClassName = "",
  labelClassName = "",
  onChange,
  value,
  onFocus,
  onBlur,
  disabled = false,
  error,
  success,
  icon: Icon,
  maxLength = 1000,
  minRows = 3,
  maxRows = 10,
  size = "md",
  showCharacterCount = false,
  autoResize = true,
  glowEffect = false,
}) => {
  const [isFocused, setIsFocused] = useState(false);
  const [height, setHeight] = useState("auto");
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const particleRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  const rotateX = useSpring(useTransform(mouseY, [-100, 100], [2, -2]));
  const rotateY = useSpring(useTransform(mouseX, [-100, 100], [-2, 2]));

  const sizeConfig = {
    sm: { 
      textarea: "min-h-[80px] px-3 py-2 text-sm", 
      label: "text-sm", 
      icon: "h-4 w-4",
      minHeight: 80
    },
    md: { 
      textarea: "min-h-[100px] px-4 py-3 text-base", 
      label: "text-base", 
      icon: "h-5 w-5",
      minHeight: 100
    },
    lg: { 
      textarea: "min-h-[120px] px-5 py-4 text-lg", 
      label: "text-lg", 
      icon: "h-6 w-6",
      minHeight: 120
    }
  };

  const config = sizeConfig[size];

  const handleFocus = () => {
    setIsFocused(true);
    onFocus?.();
  };

  const handleBlur = () => {
    setIsFocused(false);
    onBlur?.();
  };

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    if (disabled) return;
    
    const newValue = e.target.value;
    if (maxLength && newValue.length > maxLength) return;
    
    onChange?.(newValue);
    
    if ((variant === "expandable" || variant === "smoothExpand" || autoResize) && textareaRef.current) {
      const textarea = textareaRef.current;
      textarea.style.height = 'auto';
      const scrollHeight = textarea.scrollHeight;
      const maxHeight = config.minHeight * maxRows / minRows;
      const newHeight = Math.min(Math.max(scrollHeight, config.minHeight), maxHeight);
      setHeight(`${newHeight}px`);
    }
  };

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    mouseX.set((e.clientX - centerX) * 0.3);
    mouseY.set((e.clientY - centerY) * 0.3);
  };

  useEffect(() => {
    if ((variant === "expandable" || variant === "smoothExpand" || autoResize) && textareaRef.current) {
      const textarea = textareaRef.current;
      textarea.style.height = 'auto';
      const scrollHeight = textarea.scrollHeight;
      const maxHeight = config.minHeight * maxRows / minRows;
      const newHeight = Math.min(Math.max(scrollHeight, config.minHeight), maxHeight);
      setHeight(`${newHeight}px`);
    }
  }, [value, variant, autoResize, config.minHeight, maxRows, minRows]);

  useEffect(() => {
    if (variant === "particleField" && particleRef.current && isFocused) {
      const interval = setInterval(() => {
        if (particleRef.current) {
          createAdvancedParticles(particleRef.current, 8);
        }
      }, 300);
      
      return () => clearInterval(interval);
    }
  }, [variant, isFocused]);

  const variants = textareaVariants[variant as keyof typeof textareaVariants];
  const hasValue = value.length > 0;
  const isActive = isFocused || hasValue;

  const characterCount = value.length;
  const isNearLimit = maxLength && characterCount > maxLength * 0.8;
  const isOverLimit = maxLength && characterCount > maxLength;

  return (
    <motion.div
      ref={containerRef}
      className={cn(
        "relative mb-6 group",
        disabled && "opacity-60 cursor-not-allowed"
      )}
      initial="initial"
      animate={isActive ? "animate" : "initial"}
      style={{ 
        perspective: 2000,
        rotateX: variant === "holographic3D" ? rotateX : undefined,
        rotateY: variant === "holographic3D" ? rotateY : undefined
      }}
      onMouseMove={handleMouseMove}
      onMouseLeave={() => {
        mouseX.set(0);
        mouseY.set(0);
      }}
      variants={variants.container}
    >
      {(variant === "glassmorphism" || variant === "premiumGlass") && (
        <motion.div
          className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent backdrop-blur-xl rounded-2xl border border-white/20 dark:border-white/10"
          initial={{ opacity: 0 }}
          animate={{ opacity: isActive ? 1 : 0.7 }}
          transition={{ duration: 0.3 }}
        />
      )}

      {(variant === "luxuryShimmer" || variant === "gradientBorder") && (
        <motion.div
          className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/20 to-transparent -skew-x-12 rounded-xl"
          transition={{
            x: {
              duration: 1.5,
              repeat: isActive ? Infinity : 0,
              repeatDelay: 1,
              ease: "easeInOut"
            }
          }}
        />
      )}

      {glowEffect && isActive && (
        <motion.div
          className="absolute inset-0 rounded-xl opacity-30"
          style={{
            background: `radial-gradient(ellipse, rgba(59, 130, 246, 0.4) 0%, transparent 70%)`,
            filter: "blur(12px)",
            transform: "scale(1.1)"
          }}
          animate={{
            scale: [1.1, 1.2, 1.1],
            opacity: [0.3, 0.5, 0.3]
          }}
          transition={{
            duration: 3,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        />
      )}

      <motion.label
        className={cn(
          "absolute left-4 pointer-events-none transition-colors duration-300 z-10 origin-left",
          "text-muted-foreground group-focus-within:text-primary",
          error && "text-red-500",
          success && "text-emerald-500",
          config.label,
          labelClassName
        )}
        variants={variants.label}
        style={{
          originX: 0,
          originY: 0.5,
        }}
      >
        {placeholder}
      </motion.label>

      <div className="relative">
        {Icon && (
          <motion.div
            className={cn(
              "absolute left-3 top-3 z-20",
              "text-muted-foreground group-focus-within:text-primary transition-colors duration-300",
              config.icon
            )}
            initial={{ scale: 0.8, opacity: 0.6 }}
            animate={{ 
              scale: isActive ? 1 : 0.8, 
              opacity: isActive ? 1 : 0.6,
            }}
            transition={{ duration: 0.3 }}
          >
            <Icon className={config.icon} />
          </motion.div>
        )}

        <motion.textarea
          ref={textareaRef}
          className={cn(
            "w-full bg-background/90 backdrop-blur-sm border border-border/60 rounded-xl resize-none",
            "text-foreground placeholder:text-transparent transition-all duration-300",
            "focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/60",
            "disabled:cursor-not-allowed disabled:opacity-50",
            "shadow-sm hover:shadow-md focus:shadow-lg",
            "shadow-black/5 dark:shadow-white/5",
            
            config.textarea,
            
            Icon && "pl-10",
            
            error && "border-red-500/60 focus:border-red-500 focus:ring-red-500/20",
            success && "border-emerald-500/60 focus:border-emerald-500 focus:ring-emerald-500/20",
            
            "dark:bg-background/60 dark:border-border/40",
            "hover:border-border/80 dark:hover:border-border/60",
            
            textareaClassName
          )}
          style={{
            height: (variant === "expandable" || variant === "smoothExpand" || autoResize) ? height : undefined,
            minHeight: `${config.minHeight}px`,
            maxHeight: variant === "expandable" || variant === "smoothExpand" || autoResize 
              ? `${config.minHeight * maxRows / minRows}px` 
              : undefined,
          }}
          onFocus={handleFocus}
          onBlur={handleBlur}
          onChange={handleChange}
          value={value}
          disabled={disabled}
          maxLength={maxLength}
          variants={variants.textarea}
          rows={minRows}
        />

        {variant === "particleField" && (
          <motion.div
            ref={particleRef}
            className="absolute inset-0 pointer-events-none overflow-hidden rounded-xl"
            initial={{ opacity: 0 }}
            animate={{ opacity: isActive ? 1 : 0 }}
            transition={{ duration: 0.3 }}
          />
        )}

        {(variant === "characterCount" || showCharacterCount) && (
          <motion.div
            className={cn(
              "absolute bottom-3 right-3 text-xs font-medium px-2 py-1 rounded-md backdrop-blur-sm z-20",
              "bg-background/80 border border-border/40",
              isNearLimit && !isOverLimit && "text-amber-600 border-amber-400/40 bg-amber-50/80 dark:bg-amber-950/80",
              isOverLimit && "text-red-600 border-red-400/40 bg-red-50/80 dark:bg-red-950/80",
              !isNearLimit && "text-muted-foreground"
            )}
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ 
              opacity: isActive ? 1 : 0.7,
              scale: isOverLimit ? 1.1 : 1,
            }}
            transition={{ duration: 0.2 }}
          >
            {characterCount}{maxLength && ` / ${maxLength}`}
          </motion.div>
        )}

        {variant === "lineHighlight" && value && (
          <motion.div
            className="absolute left-0 w-full h-6 bg-gradient-to-r from-primary/10 to-primary/5 pointer-events-none rounded"
            style={{
              top: `${Math.floor(value.split('\n').length - 1) * 24 + 12}px`,
            }}
            initial={{ opacity: 0, scaleX: 0 }}
            animate={{ opacity: 0.5, scaleX: 1 }}
            transition={{ duration: 0.3 }}
          />
        )}

        {variant === "rippleEffect" && isActive && (
          <motion.div
            className="absolute inset-0 rounded-xl pointer-events-none"
            initial={{ scale: 0, opacity: 0.5 }}
            animate={{
              scale: 2,
              opacity: 0,
            }}
            transition={{
              duration: 1,
              ease: "easeOut",
            }}
            style={{
              background: "radial-gradient(circle, rgba(59,130,246,0.3) 0%, transparent 70%)"
            }}
          />
        )}

      </div>
    </motion.div>
  );
};

const textareaVariants: Record<string, TextareaVariant> = {
  clean: {
    container: {
      initial: { scale: 1 },
      animate: { scale: 1.005 },
    },
    label: {
      initial: { y: 0, scale: 1, color: "#6b7280" },
      animate: { 
        y: -32, 
        scale: 0.85, 
        color: "var(--primary)",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        borderColor: "var(--border)",
        boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
      },
      animate: { 
        borderColor: "var(--primary)",
        boxShadow: "0 0 0 3px rgba(var(--primary), 0.1), 0 4px 12px rgba(var(--primary), 0.1)"
      },
    },
  },

  expandable: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "var(--primary)",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        borderColor: "var(--border)",
        transform: "scale(1)"
      },
      animate: { 
        borderColor: "var(--primary)",
        transform: "scale(1.01)",
        boxShadow: "0 4px 12px rgba(59, 130, 246, 0.15)"
      },
    },
  },

  smoothExpand: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: {
        y: -32,
        color: "var(--primary)",
        transition: { type: "spring", stiffness: 300, damping: 20 },
      },
    },
    textarea: {
      initial: { 
        borderColor: "var(--border)",
        boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
      },
      animate: {
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)",
        transition: { duration: 0.3, ease: "easeOut" },
      },
    },
  },

  glowBorder: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "var(--primary)",
        textShadow: "0 0 12px rgba(var(--primary), 0.6)"
      },
    },
    textarea: {
      initial: { 
        boxShadow: "0 0 0 0 rgba(var(--border), 0)",
        borderColor: "var(--border)"
      },
      animate: { 
        boxShadow: "0 0 0 3px rgba(var(--border), 0.3), 0 0 20px rgba(var(--border), 0.2)",
        borderColor: "var(--primary)"
      },
    },
  },

  characterCount: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "var(--primary)",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        paddingBottom: "2.5rem",
        borderColor: "var(--border)"
      },
      animate: { 
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)"
      },
    },
  },

  lineHighlight: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "var(--primary)",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        lineHeight: "1.5",
        borderColor: "var(--border)"
      },
      animate: { 
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)"
      },
    },
  },

  typewriterSound: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "#3b82f6",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        borderColor: "var(--border)",
        fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace"
      },
      animate: {
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)",
        transition: { type: "spring", stiffness: 500, damping: 20 },
      },
    },
  },

  markdownPreview: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "#3b82f6",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        borderRadius: "12px",
        borderColor: "var(--border)"
      },
      animate: { 
        borderRadius: "16px",
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)"
      },
    },
  },

  autoComplete: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "#3b82f6",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        backgroundColor: "var(--background)",
        borderColor: "var(--border)"
      },
      animate: { 
        backgroundColor: "var(--card)",
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)"
      },
    },
  },

  syntaxHighlight: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "#3b82f6",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
        borderColor: "var(--border)",
        backgroundColor: "var(--background)"
      },
      animate: { 
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)"
      },
    },
  },

  rippleEffect: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "#3b82f6",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        transform: "scale(1)",
        borderColor: "var(--border)"
      },
      animate: {
        transform: "scale(1.005)",
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)",
        transition: { type: "spring", stiffness: 300, damping: 20 },
      },
    },
  },

  gradientBorder: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "#3b82f6",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: {
        border: "2px solid transparent",
        backgroundImage: `
          linear-gradient(white, white),
          linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6)
        `,
        backgroundClip: "padding-box, border-box",
        backgroundOrigin: "padding-box, border-box",
        backgroundSize: "100% 100%, 300% 100%",
        backgroundPosition: "0 0, 100% 0",
      },
      animate: {
        backgroundPosition: ["0 0, 100% 0", "0 0, -100% 0"],
        boxShadow: "0 4px 15px rgba(var(--primary), 0.15)",
        transition: {
          backgroundPosition: { duration: 2, repeat: Infinity, ease: "linear" },
        },
      },
    },
  },

  neonGlow: {
    label: {
      initial: { 
        textShadow: "0 0 0px #fff", 
        color: "var(--primary)" 
      },
      animate: {
        textShadow: "0 0 12px var(--primary), 0 0 24px var(--primary), 0 0 36px var(--primary)",
        y: -32,
        color: "var(--primary)",
      },
    },
    textarea: {
      initial: { 
        boxShadow: "0 0 0px #fff",
        borderColor: "var(--border)"
      },
      animate: {
        boxShadow: "0 0 8px var(--primary), 0 0 16px var(--primary), 0 0 24px var(--primary)",
        borderColor: "var(--primary)",
        transition: {
          boxShadow: { repeat: Infinity, duration: 2, repeatType: "reverse" as const },
        },
      },
    },
  },

  particleField: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "var(--primary)",
        textShadow: "0 0 12px rgba(var(--primary), 0.4)"
      },
    },
    textarea: {
      initial: {
        borderColor: "var(--border)",
        boxShadow: "0 0 0 rgba(59, 130, 246, 0)",
      },
      animate: {
        borderColor: "var(--primary)",
        boxShadow: "0 0 20px rgba(var(--primary), 0.3)",
      },
    },
    extra: {
      initial: { opacity: 0 },
      animate: {
        opacity: 1,
        transition: { duration: 0.2 },
      },
    },
  },

  elastic: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: {
        y: -32,
        color: "var(--primary)",
        transition: { type: "spring", stiffness: 400, damping: 15 },
      },
    },
    textarea: {
      initial: { 
        scale: 1,
        borderColor: "var(--border)"
      },
      animate: { 
        scale: 1.02,
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)",
        transition: { 
          scale: { 
            type: "spring", 
            stiffness: 300, 
            damping: 15,
            restDelta: 0.001,
            restSpeed: 10
          }
        }
      },
    },
  },

  wave: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "var(--primary)",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        y: 0,
        borderColor: "var(--border)"
      },
      animate: {
        y: [0, -3, 3, 0],
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)",
        transition: { 
          y: { repeat: Infinity, duration: 2.5, ease: "easeInOut" } 
        },
      },
    },
  },

  spotlight: {
    label: {
      initial: { 
        y: 0, 
        filter: "brightness(1)", 
        color: "var(--primary)" 
      },
      animate: { 
        y: -32, 
        filter: "brightness(1.3) drop-shadow(0 0 8px rgba(var(--primary), 0.5))", 
        color: "var(--primary)"
      },
    },
    textarea: {
      initial: { 
        filter: "brightness(1)",
        borderColor: "var(--border)"
      },
      animate: {
        filter: ["brightness(1)", "brightness(1.1)", "brightness(1)"],
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)",
        transition: { 
          filter: { repeat: Infinity, duration: 3, ease: "easeInOut" }
        },
      },
    },
  },

  liquid: {
    label: {
      initial: { y: 0, color: "#6b7280" },
      animate: { 
        y: -32, 
        color: "var(--primary)",
        transition: { type: "spring", stiffness: 300, damping: 20 }
      },
    },
    textarea: {
      initial: { 
        borderRadius: "12px",
        borderColor: "var(--border)"
      },
      animate: {
        borderRadius: ["12px", "16px", "20px", "16px", "12px"],
        borderColor: "var(--primary)",
        boxShadow: "0 4px 12px rgba(var(--primary), 0.15)",
        transition: { 
          borderRadius: { repeat: Infinity, duration: 4, ease: "easeInOut" } 
        },
      },
    },
  },

  cosmic: {
    label: {
      initial: { 
        y: 0, 
        rotate: 0, 
        color: "#6b7280",
        filter: "hue-rotate(0deg)"
      },
      animate: { 
        y: -32, 
        rotate: 360, 
        color: "#8b5cf6",
        filter: "hue-rotate(360deg)",
        textShadow: "0 0 15px rgba(139, 92, 246, 0.6)",
        transition: { 
          rotate: { duration: 2, repeat: Infinity, ease: "linear" },
          filter: { duration: 3, repeat: Infinity, ease: "linear" }
        }
      },
    },
    textarea: {
      initial: { 
        scale: 1,
        borderColor: "rgba(139, 92, 246, 0.2)",
        background: "radial-gradient(ellipse at center, rgba(139, 92, 246, 0.05) 0%, transparent 50%)"
      },
      animate: {
        scale: [1, 1.01, 0.99, 1],
        borderColor: "rgba(139, 92, 246, 0.6)",
        background: "radial-gradient(ellipse at center, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.05) 50%, transparent 100%)",
        boxShadow: "0 0 25px rgba(139, 92, 246, 0.3)",
        transition: { 
          scale: { repeat: Infinity, duration: 3, ease: "easeInOut" } 
        },
      },
    },
  },

  hologram: {
    label: {
      initial: { 
        y: 0, 
        opacity: 0.8, 
        color: "var(--primary)",
        filter: "blur(0px)"
      },
      animate: {
        y: -32,
        opacity: [0.8, 1, 0.6, 1],
        color: "var(--primary)",
        filter: "blur(0px) drop-shadow(0 0 8px rgba(var(--primary), 0.5))",
        textShadow: "0 0 15px rgba(var(--primary), 0.6)",
        transition: { 
          opacity: { repeat: Infinity, duration: 2.5, ease: "easeInOut" } 
        },
      },
    },
    textarea: {
      initial: { 
        opacity: 0.9,
        borderColor: "var(--border)"
      },
      animate: {
        opacity: [0.9, 1, 0.8, 1],
        borderColor: "var(--primary)",
        boxShadow: "0 0 20px rgba(var(--primary), 0.4), inset 0 0 20px rgba(var(--primary), 0.1)",
        transition: { 
          opacity: { repeat: Infinity, duration: 2.5, ease: "easeInOut" } 
        },
      },
    },
    extra: {
      initial: { opacity: 0 },
      animate: {
        opacity: [0, 0.6, 0],
        transition: { repeat: Infinity, duration: 2.5, ease: "easeInOut" },
      },
    },
  },
};

export default AnimatedTextarea;

Usage

Import the component:

import AnimatedTextarea from '@ignix-ui/textarea';

Basic Usage

import { useState } from 'react';

function BasicTextarea() {
  const [value, setValue] = useState('');
  
  return (
    <AnimatedTextarea
      placeholder="Enter your message"
      variant="clean"
      value={value}
      onChange={setValue}
    />
  );
}

Props

Prop	Type	Default	Description
placeholder	string	required	Label text that floats above the textarea when active
variant	'clean' | 'expandable' | 'smoothExpand' | 'glowBorder' | 'characterCount' | 'lineHighlight' | 'typewriterSound' | 'markdownPreview' | 'autoComplete' | 'syntaxHighlight' | 'rippleEffect' | 'gradientBorder' | 'neonGlow' | 'particleField' | 'elastic' | 'wave' | 'spotlight' | 'liquid' | 'cosmic' | 'hologram'	required	Animation and visual style applied to the textarea
value	string	required	Controlled value of the textarea
onChange	(value: string) => void	required	Callback fired when the textarea value changes
onFocus	() => void	undefined	Callback fired when the textarea gains focus
onBlur	() => void	undefined	Callback fired when the textarea loses focus
disabled	boolean	false	Disables the textarea and applies reduced opacity
error	string	undefined	Error message; turns border and label red when set
success	boolean	undefined	Applies green border and label styling to indicate success
icon	React.ElementType	undefined	Icon component rendered inside the left edge of the textarea
maxLength	number	1000	Maximum number of characters allowed
minRows	number	3	Minimum number of visible rows
maxRows	number	10	Maximum number of rows before scrolling kicks in
size	'sm' | 'md' | 'lg'	'md'	Controls padding, font size, and minimum height
showCharacterCount	boolean	false	Displays a character counter badge in the bottom-right corner
autoResize	boolean	true	Automatically expands the textarea height as content grows
glowEffect	boolean	false	Renders a pulsing radial glow behind the textarea when focused
textareaClassName	string	""	Additional Tailwind classes applied to the <textarea> element
labelClassName	string	""	Additional Tailwind classes applied to the floating label
theme	'light' | 'dark' | 'auto'	undefined	Reserved theme prop (accepted but not yet applied internally)