Input

The AnimatedInput component provides a rich collection of animated input fields with various effects and styles. Each variant offers unique animations for both the input field and its label, creating engaging user interactions.

Preview

Type something...

Code

import AnimatedInput from '@ignix-ui/input';

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

Installation

CLI

ignix add component input

Manual

"use client";

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

interface AnimatedInputProps {
placeholder: string;
variant: string;
className?: string;
inputClassName?: string;
labelClassName?: string;
value: string;
type?: string;
id?: string;
autoFocus?: boolean;
onChange?: (value: string) => void;
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
onFocus?: () => void;
onBlur?: () => void;
disabled?: boolean;
error?: string;
success?: boolean;
successMessage?: string;
icon?: React.ElementType;
showPasswordToggle?: boolean;
size?: "sm" | "md" | "lg";
}

interface InputVariant {
label: Variants;
input: Variants;
extra?: Variants;
container?: Variants;
}

// Enhanced border beam variants with better animations
const borderBeamVariants = {
initial: {
pathLength: 0,
opacity: 0,
},
animate: {
pathLength: 1,
opacity: 1,
transition: {
  pathLength: {
    duration: 1.5,
    repeat: Infinity,
    ease: "easeInOut",
  },
  opacity: {
    duration: 0.3,
  },
},
},
} as const;

// Enhanced particle creation with better physics
const createEnhancedParticles = (container: HTMLElement, count = 8) => {
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-primary",
  "shadow-lg shadow-primary/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(var(--color-background), 0.6)`;

// Enhanced animation
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;
};

export const AnimatedInput: React.FC<AnimatedInputProps> = ({
placeholder,
variant,
className = "",
inputClassName = "",
labelClassName = "",
value,
onChange,
onKeyDown,
onFocus,
onBlur,
type = "text",
id,
autoFocus,
disabled = false,
error = "",
success = false,
successMessage = "",
icon: Icon,
showPasswordToggle = false,
size = "md",
}) => {
const [isFocused, setIsFocused] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const [inputType, setInputType] = useState(type);

const inputRef = useRef<HTMLInputElement>(null);
const particleRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);

// Enhanced mouse tracking for premium effects
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 handleFocus = () => {
setIsFocused(true);
onFocus?.();
};

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

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange?.(e.target.value);
};

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);
};

const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
setInputType(showPassword ? "password" : "text");
};

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

// Size configurations
const sizeConfig = {
sm: { input: "h-9 px-3 text-sm", label: "text-sm", icon: "h-4 w-4" },
md: { input: "h-11 px-4 text-base", label: "text-base", icon: "h-5 w-5" },
lg: { input: "h-13 px-5 text-lg", label: "text-lg", icon: "h-6 w-6" }
};

// Enhanced particle effects for particleField
useEffect(() => {
if (variant === "particleField" && particleRef.current && isActive) {
  const interval = setInterval(() => {
    if (particleRef.current) {
      createEnhancedParticles(particleRef.current, 6);
    }
  }, 300);

  return () => clearInterval(interval);
}
}, [variant, isActive]);

return (
<motion.div
  ref={containerRef}
  className={cn(
    "relative mb-6 group",
    disabled && "opacity-60 cursor-not-allowed",
    className
  )}
  initial="initial"
  animate={isActive ? "animate" : "initial"}
  style={{
    perspective: 2000,
    rotateX: variant === "tilt3D" ? rotateX : undefined,
    rotateY: variant === "tilt3D" ? rotateY : undefined
  }}
  onMouseMove={handleMouseMove}
  onMouseLeave={() => {
    mouseX.set(0);
    mouseY.set(0);
  }}
  variants={variants.container}
>
  {/* Enhanced Label */}
  <motion.label
    className={cn(
      "absolute top-1/2 -translate-y-1/2 pointer-events-none transition-colors duration-300 z-10 origin-left",
      Icon ? "left-9" : "left-4",
      "text-muted-foreground group-focus-within:text-primary",
      error && "text-red-500",
      success && "text-emerald-500",
      sizeConfig[size].label,
      labelClassName
    )}
    variants={variants.label}
    style={variant === "premiumGradient" ? {
      backgroundClip: "text",
      WebkitBackgroundClip: "text",
      color: "transparent",
    } : undefined}
  >
    {placeholder}
  </motion.label>

  {/* Input Container */}
  <div className="relative">
    {/* Leading Icon */}
    {Icon && (
      <motion.div
        className={cn(
          "absolute left-3 top-1/2 -translate-y-1/2 z-20",
          "text-muted-foreground group-focus-within:text-primary transition-colors duration-300",
          sizeConfig[size].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={sizeConfig[size].icon} />
      </motion.div>
    )}

    {/* Enhanced Input Field */}
    <motion.input
      ref={inputRef}
      id={id}
      autoFocus={autoFocus}
      type={inputType}
      className={cn(
        // Base enhanced styles
        "w-full bg-background/90 backdrop-blur-sm border border-border/60 rounded-xl",
        "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",

        // Size variants
        sizeConfig[size].input,

        // Icon padding
        Icon && "pl-9",
        (showPasswordToggle || error || success) && "pr-10",

        // Status variants
        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",

        inputClassName
      )}
      onFocus={handleFocus}
      onBlur={handleBlur}
      onChange={handleChange}
      onKeyDown={onKeyDown}
      value={value}
      disabled={disabled}
      variants={variants.input}
      style={{
        ...(variant === "borderBeam" && {
          border: "2px solid transparent",
        }),
        ...(variant === "typewriter" && {
          caretColor: "var(--primary)",
          ["caretShape" as string]: "block",
        }),
      }}
    />

    {/* Enhanced Border Beam Effect */}
    {variant === "borderBeam" && isActive && (
      <svg
        className="absolute inset-0 pointer-events-none rounded-xl"
        style={{
          transform: "translate(-2px, -2px)",
          width: "calc(100% + 4px)",
          height: "calc(100% + 4px)",
          zIndex: 5,
        }}
      >
        <motion.rect
          x="0"
          y="0"
          width="100%"
          height="100%"
          fill="none"
          stroke="url(#enhancedBorderGradient)"
          strokeWidth="2"
          strokeLinecap="round"
          rx="12"
          initial="initial"
          animate="animate"
          variants={borderBeamVariants}
        />
        <defs>
          <linearGradient
            id="enhancedBorderGradient"
            gradientUnits="userSpaceOnUse"
            x1="0"
            y1="0"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stopColor="var(--primary)" />
            <stop offset="25%" stopColor="var(--primary)" />
            <stop offset="50%" stopColor="var(--primary)" />
            <stop offset="75%" stopColor="var(--primary)" />
            <stop offset="100%" stopColor="var(--primary)" />
          </linearGradient>
        </defs>
      </svg>
    )}

    {/* Enhanced Particle Effects */}
    {variant === "particles" && isActive && (
      <div className="absolute inset-0 pointer-events-none rounded-xl overflow-hidden">
        {[...Array(8)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute w-2 h-2 bg-primary rounded-full shadow-lg shadow-primary/50"
            style={{
              left: `${15 + i * 10}%`,
              top: "50%",
            }}
            variants={variants.extra}
            custom={i * 0.1}
            animate="animate"
            initial="initial"
          />
        ))}
      </div>
    )}

    {/* Enhanced Ripple Effect */}
    {variant === "ripple" && isActive && (
      <motion.div
        className="absolute inset-0 rounded-xl pointer-events-none"
        initial={{ scale: 0, opacity: 0.5 }}
        animate={{
          scale: [0, 2, 0],
          opacity: [0.5, 0.2, 0],
        }}
        transition={{
          duration: 1.5,
          repeat: Infinity,
          ease: "easeOut",
        }}
        style={{
          background: "radial-gradient(circle, var(--primary) 0%, transparent 70%)"
        }}
      />
    )}

    {/* Trailing Icons */}
    <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 z-20">
      {error && <AlertCircle className="h-4 w-4 text-red-500" />}
      {success && <Check className="h-4 w-4 text-emerald-500" />}

      {showPasswordToggle && type === "password" && (
        <motion.button
          type="button"
          onClick={togglePasswordVisibility}
          className="text-muted-foreground hover:text-foreground transition-colors duration-200"
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
        >
          {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
        </motion.button>
      )}
    </div>
  </div>

  {/* Enhanced Particle Field */}
  {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 }}
    />
  )}

  {/* Error/Success Message */}
  {(error || success) && (
    <motion.div
      className={cn(
        "mt-2 text-sm flex items-center gap-2",
        error ? "text-red-500" : "text-emerald-500"
      )}
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      {error ? <AlertCircle className="h-4 w-4" /> : <Check className="h-4 w-4" />}
      {error ? error : successMessage ? successMessage : "Input validated successfully"}
    </motion.div>
  )}
</motion.div>
);
};

// Enhanced input variants (ALL original variants with premium improvements)
const inputVariants: Record<string, InputVariant> = {
clean: {
container: {
  initial: { scale: 1 },
  animate: { scale: 1 },
},
label: {
  initial: { y: 0, scale: 1, color: "var(--primary)" },
  animate: {
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: {
    borderColor: "rgb(226, 232, 240)",
    boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
  },
  animate: {
    borderColor: "var(--primary)",
  },
},
},

springy: {
label: {
  initial: { y: 0, scale: 1, color: "var(--primary)" },
  animate: {
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 450, damping: 10 }
  },
},
input: {
  initial: {
    borderColor: "var(--border)",
    boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
    scale: 1,
  },
  animate: {
    scale: [1, 1.04, 0.98, 1.02, 1],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: { duration: 0.6 }
  },
},
},

underline: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: {
    borderWidth: "0 0 2px 0",
    borderRadius: "4px 4px 0 0",
    borderColor: "rgb(226, 232, 240)",
    background: "rgba(0, 0, 0, 0.02)"
  },
  animate: {
    borderColor: "var(--primary)",
    background: "rgba(var(--primary), 0.02)",
    boxShadow: "0 2px 0 0 rgba(var(--primary), 0.4)"
  },
},
},

floating: {
label: {
  initial: { y: 0, scale: 1, color: "var(--primary)" },
  animate: {
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 400, damping: 25 },
  },
},
input: {
  initial: {
    boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
    transform: "translateY(0px)"
  },
  animate: {
    boxShadow: "0 8px 25px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0,0,0,0.1)",
    transform: "translateY(-2px)"
  },
},
},

borderGlow: {
label: {
  initial: { y: 0, color: "#6b7280" },
  animate: {
    y: -40,
    color: "var(--primary)",
    textShadow: "0 0 12px var(--primary)"
  },
},
input: {
  initial: {
    boxShadow: "0 0 0 0 rgba(var(--primary), 0)",
    borderColor: "rgb(226, 232, 240)"
  },
  animate: {
    boxShadow: "0 0 0 3px rgba(246, 134, 59, 0.3), 0 0 20px rgba(246, 134, 59, 0.2)",
    borderColor: "var(--primary)"
  },
},
},

shimmer: {
label: {
  initial: { y: 0, opacity: 1, color: "#6b7280" },
  animate: {
    y: -40,
    opacity: 0.9,
    color: "var(--primary)",
    textShadow: "0 0 12px var(--primary)"
  },
},
input: {
  initial: {
    backgroundPosition: "200% 0",
    borderColor: "rgb(226, 232, 240)"
  },
  animate: {
    backgroundPosition: "-200% 0",
    backgroundImage: "linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%)",
    borderColor: "var(--primary)",
    boxShadow: "0 4px 12px var(--primary)",
    transition: {
      backgroundPosition: { repeat: Infinity, duration: 2, ease: "linear" },
      borderColor: { duration: 0.3 },
      boxShadow: { duration: 0.3 }
    },
  },
},
},

particles: {
label: {
  initial: { y: 0, color: "#6b7280" },
  animate: {
    y: -40,
    color: "var(--primary)",
    textShadow: "0 0 8px var(--primary)"
  },
},
input: {
  initial: { borderColor: "rgb(226, 232, 240)" },
  animate: {
    borderColor: "var(--primary)",
    boxShadow: "0 0 20px var(--primary)"
  },
},
extra: {
  initial: {
    scale: 0,
    opacity: 0,
    y: 0,
  },
  animate: (i: number) => ({
    scale: [0, 1.5, 0],
    opacity: [0, 1, 0],
    y: [-20, -80, -120],
    x: [0, Math.sin(i) * 15, Math.cos(i) * 20],
    transition: {
      duration: 2.5,
      repeat: Infinity,
      delay: i,
      ease: "easeOut",
    },
  }),
},
},

slide: {
label: {
  initial: { x: 0, y: 0, color: "var(--primary)" },
  animate: {
    x: 0,
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: {
    borderColor: "var(--primary)",
    transform: "translateX(0px)"
  },
  animate: {
    borderColor: "var(--primary)",
    transform: "translateX(3px)",
    boxShadow: "0 4px 15px var(--primary)"
  },
},
},

scale: {
label: {
  initial: { scale: 1, y: 0, color: "var(--primary)" },
  animate: {
    scale: 0.85,
    y: -40,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 400, damping: 25 }
  },
},
input: {
  initial: { scale: 1 },
  animate: {
    scale: 1.02,
    boxShadow: "0 8px 25px var(--primary)",
    borderColor: "var(--primary)"
  },
},
},

rotate: {
label: {
  initial: { rotate: 0, y: 0, color: "var(--primary)" },
  animate: {
    rotate: -8,
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: { rotate: 0 },
  animate: {
    rotate: 1,
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)"
  },
},
},

bounce: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 400, damping: 15 },
  },
},
input: {
  initial: { y: 0 },
  animate: {
    y: [0, -8, 0],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      y: { repeat: Infinity, duration: 1.5, ease: "easeInOut" }
    },
  },
},
},

elastic: {
label: {
  initial: { x: 0, y: 0, color: "var(--primary)" },
  animate: {
    x: [-15, 15, -8, 8, 0],
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: {
      x: { duration: 0.6, ease: "easeInOut" },
      y: { type: "spring", stiffness: 300, damping: 15 },
      scale: { type: "spring", stiffness: 300, damping: 15 },
    },
  },
},
input: {
  initial: { scaleX: 1 },
  animate: {
    scaleX: [1, 1.08, 0.95, 1.03, 1],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: { duration: 0.8 },
  },
},
},

glow: {
label: {
  initial: { y: 0, opacity: 1, color: "var(--primary)" },
  animate: {
    y: -40,
    opacity: 0.9,
    color: "var(--primary)",
    textShadow: "0 0 15px var(--primary)"
  },
},
input: {
  initial: { boxShadow: "0 0 0 var(--primary)" },
  animate: {
    boxShadow: "0 0 25px var(--primary), 0 0 50px var(--primary)",
    borderColor: "var(--primary)"
  },
},
},

shake: {
label: {
  initial: { x: 0, y: 0, color: "var(--primary)" },
  animate: {
    x: [-3, 3, -2, 2, 0],
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: {
      x: { duration: 0.5, ease: "easeInOut" },
      y: { type: "spring", stiffness: 300, damping: 15 },
      scale: { type: "spring", stiffness: 300, damping: 15 },
      color: { duration: 0.2 }
    },
  },
},
input: {
  initial: { x: 0 },
  animate: {
    x: [-2, 2, -1, 1, 0],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      x: {
        repeat: Infinity,
        duration: 0.6,
        ease: "easeInOut",
        repeatDelay: 3
      },
      borderColor: { duration: 0.3 },
      boxShadow: { duration: 0.3 }
    },
  },
},
},

wave: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: (i: number) => ({
    y: -40,
    color: "var(--primary)",
    transition: {
      delay: i * 0.03,
      type: "spring",
      stiffness: 300,
      damping: 15,
    },
  }),
},
input: {
  initial: { y: 0 },
  animate: {
    y: [0, -5, 0, 5, 0],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      y: { repeat: Infinity, duration: 2.5, ease: "easeInOut" },
    },
  },
},
},

typewriter: {
label: {
  initial: { y: 0, scale: 1, color: "var(--primary)" },
  animate: {
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { duration: 0.4, ease: "easeInOut" }
  },
},
input: {
  initial: {
    borderColor: "var(--border)",
  },
  animate: {
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: { duration: 0.4 }
  },
},
},

magnetic: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    textShadow: "0 0 12px var(--primary)"
  },
},
input: {
  initial: { backgroundPosition: "0% 50%" },
  animate: {
    backgroundPosition: "100% 50%",
    backgroundImage: "linear-gradient(90deg, transparent 30%, rgba(59, 130, 246, 0.1) 50%, transparent 70%)",
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      backgroundPosition: { repeat: Infinity, duration: 1.5, ease: "linear" },
    },
  },
},
},

pulse: {
label: {
  initial: { scale: 1, y: 0, color: "var(--primary)" },
  animate: {
    scale: 0.85,
    y: -40,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: { scale: 1 },
  animate: {
    scale: [1, 1.02, 1],
    borderColor: "var(--primary)",
    boxShadow: [
      "0 4px 15px var(--primary)",
      "0 4px 20px var(--primary)",
      "0 4px 15px var(--primary)"
    ],
    transition: {
      scale: { repeat: Infinity, duration: 2, ease: "easeInOut" },
      boxShadow: { repeat: Infinity, duration: 2, ease: "easeInOut" }
    },
  },
},
},

flip: {
label: {
  initial: { rotateX: 0, y: 0, color: "var(--primary)" },
  animate: {
    rotateX: 180,
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { duration: 0.6, ease: "easeInOut" }
  },
},
input: {
  initial: { rotateX: 0 },
  animate: {
    rotateX: [0, 180, 360],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: { duration: 1.2, ease: "easeInOut" }
  },
},
},

morph: {
label: {
  initial: { borderRadius: "0%", y: 0, color: "var(--primary)" },
  animate: {
    borderRadius: "50%",
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { duration: 0.6, ease: "easeInOut" }
  },
},
input: {
  initial: { borderRadius: "12px" },
  animate: {
    borderRadius: ["12px", "30px", "12px"],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      borderRadius: { repeat: Infinity, duration: 2.5, ease: "easeInOut" }
    },
  },
},
},

spotlight: {
label: {
  initial: { y: 0, filter: "brightness(1)", color: "var(--primary)" },
  animate: {
    y: -40,
    filter: "brightness(1.3) drop-shadow(0 0 8px rgba(59, 130, 246, 0.5))",
    color: "var(--primary)"
  },
},
input: {
  initial: { backgroundPosition: "0% 50%" },
  animate: {
    backgroundPosition: "100% 50%",
    backgroundImage: "linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.1) 50%, transparent 100%)",
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      backgroundPosition: { repeat: Infinity, duration: 2, ease: "linear" }
    },
  },
},
extra: {
  initial: { opacity: 0 },
  animate: {
    opacity: 1,
    transition: {
      repeat: Infinity,
      duration: 2,
      repeatType: "reverse" as const,
    },
  },
},
},

liquid: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: { borderRadius: "12px" },
  animate: {
    borderRadius: ["12px", "25px", "12px"],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      borderRadius: { repeat: Infinity, duration: 2.5, ease: "easeInOut" }
    },
  },
},
},

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

origami: {
label: {
  initial: { rotateY: 0, y: 0, color: "var(--primary)" },
  animate: {
    rotateY: 180,
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    transition: { duration: 0.8, ease: "easeInOut" }
  },
},
input: {
  initial: { rotateY: 0 },
  animate: {
    rotateY: [0, -90, 0],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      rotateY: { repeat: Infinity, duration: 3, repeatDelay: 1.5 },
    },
  },
},
},

glitch: {
label: {
  initial: { skewX: 0, y: 0, color: "var(--primary)" },
  animate: {
    skewX: [-8, 8, -4, 4, 0],
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    textShadow: "2px 0 #ff0000, -2px 0 #00ff00",
    transition: {
      skewX: { repeat: Infinity, duration: 0.6, repeatDelay: 2 },
      textShadow: { repeat: Infinity, duration: 0.1, repeatDelay: 2 }
    },
  },
},
input: {
  initial: { skewX: 0 },
  animate: {
    skewX: [0, -3, 3, -2, 2, 0],
    borderColor: "var(--primary)",
    boxShadow: "2px 0 8px var(--primary), -2px 0 8px var(--primary)",
    transition: {
      skewX: { repeat: Infinity, duration: 0.6, repeatDelay: 2 }
    },
  },
},
},

hologram: {
label: {
  initial: { opacity: 1, y: 0, color: "var(--primary)" },
  animate: {
    opacity: [1, 0.6, 1],
    y: -40,
    scale: 0.85,
    color: "var(--primary)",
    textShadow: "0 0 15px var(--primary)",
    transition: {
      opacity: { repeat: Infinity, duration: 2.5, ease: "easeInOut" }
    },
  },
},
input: {
  initial: { opacity: 0.8 },
  animate: {
    opacity: [0.8, 1, 0.8],
    borderColor: "var(--primary)",
    boxShadow: "0 0 20px var(--primary), inset 0 0 20px var(--primary)",
    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" },
  },
},
},

cosmic: {
label: {
  initial: { scale: 1, y: 0, rotate: 0, color: "var(--primary)" },
  animate: {
    scale: 0.85,
    y: -40,
    rotate: 360,
    color: "var(--primary)",
    textShadow: "0 0 15px var(--primary)",
    transition: {
      rotate: { duration: 3, repeat: Infinity, ease: "linear" }
    },
  },
},
input: {
  initial: { backgroundPosition: "0% 50%" },
  animate: {
    backgroundPosition: "100% 50%",
    backgroundImage: "linear-gradient(45deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1), rgba(139, 92, 246, 0.1))",
    borderColor: "var(--primary)",
    boxShadow: "0 0 25px var(--primary)",
    transition: {
      backgroundPosition: { repeat: Infinity, duration: 4, ease: "linear" }
    },
  },
},
},

borderBeam: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    textShadow: "0 0 12px var(--primary)"
  },
},
input: {
  initial: {
    borderColor: "transparent",
    background: "rgb(255, 255, 255)",
  },
  animate: {
    borderColor: "transparent",
    background: "rgb(255, 255, 255)",
    boxShadow: "0 4px 20px rgba(59, 130, 246, 0.15)",
  },
},
},

gradientBorder: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: {
    border: "2px solid transparent",
    backgroundImage: `
      linear-gradient(white, white),
      linear-gradient(90deg, var(--primary), var(--primary), var(--primary))
    `,
    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(59, 130, 246, 0.15)",
    transition: {
      backgroundPosition: { duration: 2, repeat: Infinity, ease: "linear" },
    },
  },
},
},

ripple: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: { borderColor: "rgb(226, 232, 240)" },
  animate: {
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)"
  },
},
},

materialFloat: {
label: {
  initial: { y: 0, scale: 1, color: "#6b7280" },
  animate: {
    y: -40,
    scale: 0.85,
    color: "#3b82f6",
    transition: { type: "spring", stiffness: 300, damping: 20 },
  },
},
input: {
  initial: {
    borderWidth: "0 0 2px 0",
    borderRadius: "4px 4px 0 0",
    borderColor: "rgb(226, 232, 240)",
    background: "rgba(0, 0, 0, 0.04)",
  },
  animate: {
    borderColor: "var(--primary)",
    background: "var(--primary)",
    boxShadow: "0 2px 0 0 rgba(var(--primary), 0.4)",
    transition: { type: "spring", stiffness: 300, damping: 20 },
  },
},
},

neonPulse: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    textShadow: "0 0 15px var(--primary)"
  },
},
input: {
  initial: {
    boxShadow: "0 0 0 var(--primary)",
    borderColor: "rgb(226, 232, 240)",
  },
  animate: {
    boxShadow: [
      "0 0 8px var(--primary)",
      "0 0 16px var(--primary)",
      "0 0 24px var(--primary)",
      "0 0 8px var(--primary)",
    ],
    borderColor: "var(--primary)",
    transition: {
      boxShadow: { duration: 2.5, repeat: Infinity, ease: "easeInOut" },
    },
  },
},
},

typewriterReveal: {
label: {
  initial: { y: 0, opacity: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    opacity: 1,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 400, damping: 25 },
  },
},
input: {
  initial: { width: "0%" },
  animate: {
    width: "100%",
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: { duration: 0.8, ease: "easeOut" },
  },
},
},

morphing: {
label: {
  initial: { y: 0, borderRadius: "4px", color: "var(--primary)" },
  animate: {
    y: -40,
    borderRadius: "16px",
    color: "var(--primary)",
    transition: { duration: 0.6, ease: "easeInOut" }
  },
},
input: {
  initial: { borderRadius: "12px" },
  animate: {
    borderRadius: ["12px", "20px", "12px"],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      borderRadius: { repeat: Infinity, duration: 2.5, ease: "easeInOut" }
    },
  },
},
},

liquidBorder: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -40,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300, damping: 20 }
  },
},
input: {
  initial: { borderRadius: "12px" },
  animate: {
    borderRadius: ["12px", "20px 8px 20px 8px", "8px 20px 8px 20px", "12px"],
    borderColor: "var(--primary)",
    boxShadow: "0 4px 15px var(--primary)",
    transition: {
      borderRadius: { repeat: Infinity, duration: 3.5, ease: "easeInOut" }
    },
  },
},
},

particleField: {
label: {
  initial: { y: 0, color: "#6b7280" },
  animate: {
    y: -40,
    color: "var(--primary)",
    textShadow: "0 0 12px var(--primary)"
  },
},
input: {
  initial: {
    borderColor: "var(--border)",
    boxShadow: "0 0 0 var(--primary)",
  },
  animate: {
    borderColor: "var(--primary)",
    boxShadow: "0 0 20px var(--primary)",
  },
},
extra: {
  initial: { opacity: 0 },
  animate: {
    opacity: 1,
    transition: { duration: 0.2 },
  },
},
},

glassmorphism: {
container: {
  initial: { backdropFilter: "blur(0px)" },
  animate: { backdropFilter: "blur(20px)" },
},
label: {
  initial: { y: 0, scale: 1, color: "var(--primary)" },
  animate: {
    y: -36,
    scale: 0.85,
    color: "var(--primary)",
    transition: { type: "spring", stiffness: 300 },
  },
},
input: {
  initial: {
    background: "rgba(255, 255, 255, 0.1)",
    borderColor: "rgba(255, 255, 255, 0.2)",
    backdropFilter: "blur(10px)",
  },
  animate: {
    background: "rgba(255, 255, 255, 0.15)",
    borderColor: "var(--primary)",
    backdropFilter: "blur(20px)",
    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
  },
},
},

holographic3D: {
container: {
  initial: { rotateX: 0, rotateY: 0 },
  animate: { rotateX: 2, rotateY: 2 },
},
label: {
  initial: {
    y: 0,
    scale: 1,
    color: "var(--primary)",
    textShadow: "none"
  },
  animate: {
    y: -36,
    scale: 0.85,
    color: "#3b82f6",
    textShadow: "0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3)",
  },
},
input: {
  initial: {
    borderColor: "var(--border)",
    boxShadow: "0 4px 6px var(--primary)",
  },
  animate: {
    borderColor: "var(--primary)",
    boxShadow: "0 0 20px var(--primary), 0 8px 16px var(--primary), inset 0 1px 0 var(--primary)",
    transform: "translateZ(10px)",
  },
},
},

quantumParticles: {
label: {
  initial: { y: 0, color: "var(--primary)" },
  animate: {
    y: -36,
    color: "var(--primary)",
    textShadow: "0 0 8px var(--primary)",
  },
},
input: {
  initial: {
    borderColor: "rgb(226, 232, 240)",
    background: "linear-gradient(45deg, transparent 0%, rgba(139, 92, 246, 0.05) 50%, transparent 100%)"
  },
  animate: {
    borderColor: "var(--primary)",
    boxShadow: "0 0 20px var(--primary)",
    background: "linear-gradient(45deg, rgba(var(--primary), 0.05) 0%, rgba(236, 72, 153, 0.05) 50%, rgba(var(--primary), 0.05) 100%)",
  },
},
extra: {
  initial: {
    scale: 0,
    opacity: 0,
    rotate: 0,
  },
  animate: (i: number) => ({
    scale: [0, 1.5, 0],
    opacity: [0, 1, 0],
    rotate: [0, 180, 360],
    y: [-20, -80],
    x: [0, Math.sin(i) * 20],
    transition: {
      duration: 3,
      repeat: Infinity,
      delay: i,
      ease: "easeInOut",
    },
  }),
},
},

premiumGlass: {
container: {
  initial: { scale: 1 },
  animate: {
    scale: 1.01,
    transition: { type: "spring", stiffness: 300 }
  },
},
label: {
  initial: {
    y: 0,
    scale: 1,
    color: "#6b7280",
    filter: "blur(0px)"
  },
  animate: {
    y: -36,
    scale: 0.85,
    color: "#3b82f6",
    filter: "blur(0px) drop-shadow(0 0 8px rgba(59, 130, 246, 0.5))",
  },
},
input: {
  initial: {
    background: "rgba(255, 255, 255, 0.05)",
    borderColor: "rgba(255, 255, 255, 0.1)",
    backdropFilter: "blur(5px)",
  },
  animate: {
    background: "rgba(255, 255, 255, 0.1)",
    borderColor: "rgba(59, 130, 246, 0.4)",
    backdropFilter: "blur(20px)",
    boxShadow: `
      0 8px 32px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(59, 130, 246, 0.2)
    `,
  },
},
},

luxuryShimmer: {
label: {
  initial: {
    y: 0,
    scale: 1,
    color: "#6b7280",
    backgroundImage: "none"
  },
  animate: {
    y: -36,
    scale: 0.85,
    backgroundImage: "linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6)",
    backgroundSize: "200% 100%",
    backgroundClip: "text",
    color: "transparent",
    animation: "shimmer 2s linear infinite",
  },
},
input: {
  initial: {
    borderColor: "rgb(226, 232, 240)",
    background: "linear-gradient(90deg, #ffffff, #ffffff)",
  },
  animate: {
    borderColor: "rgb(59, 130, 246)",
    background: "linear-gradient(90deg, #ffffff, #f8fafc, #ffffff)",
    boxShadow: `
      0 4px 12px rgba(59, 130, 246, 0.15),
      0 0 0 1px rgba(59, 130, 246, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.8)
    `,
  },
},
},

materialRipple: {
label: {
  initial: { y: 0, scale: 1, color: "#6b7280" },
  animate: {
    y: -36,
    scale: 0.85,
    color: "#3b82f6",
    transition: { type: "spring", stiffness: 400, damping: 25 },
  },
},
input: {
  initial: {
    borderWidth: "0 0 2px 0",
    borderRadius: "4px 4px 0 0",
    borderColor: "rgb(226, 232, 240)",
    background: "rgba(0, 0, 0, 0.04)",
  },
  animate: {
    borderColor: "rgb(59, 130, 246)",
    background: "rgba(59, 130, 246, 0.04)",
    boxShadow: "0 2px 0 0 rgba(59, 130, 246, 0.3)",
  },
},
},

cosmicField: {
container: {
  initial: {
    background: "transparent",
  },
  animate: {
    background: "radial-gradient(ellipse at center, rgba(139, 92, 246, 0.1) 0%, transparent 50%)",
  },
},
label: {
  initial: {
    y: 0,
    scale: 1,
    color: "#6b7280",
    filter: "hue-rotate(0deg)"
  },
  animate: {
    y: -36,
    scale: 0.85,
    color: "#8b5cf6",
    filter: "hue-rotate(360deg)",
    transition: {
      filter: { duration: 3, repeat: Infinity, ease: "linear" }
    },
  },
},
input: {
  initial: {
    borderColor: "rgba(139, 92, 246, 0.2)",
    background: "radial-gradient(ellipse at center, rgba(139, 92, 246, 0.05) 0%, transparent 50%)",
  },
  animate: {
    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 30px rgba(139, 92, 246, 0.3), inset 0 0 20px rgba(139, 92, 246, 0.1)",
  },
},
},

premiumGradient: {
label: {
  initial: {
    y: 0,
    scale: 1,
    backgroundImage: "linear-gradient(90deg, #6b7280, #6b7280)",
    backgroundSize: "200% auto",
    backgroundPosition: "0% 50%",
  },
  animate: {
    y: -36,
    scale: 0.85,
    backgroundImage: "linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6)",
    backgroundSize: "200% auto",
    backgroundPosition: ["0% 50%", "200% 50%"],
    transition: {
      backgroundPosition: {
        repeat: Infinity,
        duration: 3,
        ease: "linear"
      },
      y: { type: "spring", stiffness: 300, damping: 20 },
      scale: { type: "spring", stiffness: 300, damping: 20 }
    }
  },
},
input: {
  initial: {
    background: "linear-gradient(90deg, #ffffff, #ffffff)",
    borderColor: "var(--border)",
    boxShadow: "0 1px 3px rgba(0,0,0,0.05)",
  },
  animate: {
    background: "linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%)",
    borderColor: "var(--primary)",
    boxShadow: `
      0 0 20px rgba(59, 130, 246, 0.25),
      0 0 35px rgba(139, 92, 246, 0.2),
      0 0 50px rgba(236, 72, 153, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.9)
    `,
    transition: {
      borderColor: { duration: 0.3 },
      boxShadow: { duration: 0.3 }
    }
  },
},
},

};

export default AnimatedInput;

Usage

Import the component:

import AnimatedInput from '@ignix-ui/input';

Basic Usage

function BasicInput() {
  const [value, setValue] = useState('');
  
  return (
    <AnimatedInput
      placeholder="Enter your name"
      variant="clean"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}

Props

Prop	Type	Default	Description
placeholder	string	-	The placeholder text for the input and label
variant	string	-	The animation variant to use (e.g., clean, shimmer, neon, glassmorphism, etc.)
value	string	-	The current value of the input
onChange	(value: string) => void	-	Callback function triggered when the input value changes
type	string	"text"	The HTML input type (e.g., "text", "password", "email")
size	"sm" | "md" | "lg"	"md"	The size of the input field
disabled	boolean	false	Whether the input is disabled
error	string	-	Error message to display below the input
success	boolean	-	Whether to show a success state
icon	React.ElementType	-	Optional leading icon to display
showPasswordToggle	boolean	false	Whether to show a toggle button for password visibility (if type is "password")
inputClassName	string	""	Additional CSS classes for the input element
labelClassName	string	""	Additional CSS classes for the label element
onFocus	() => void	-	Callback triggered on focus
onBlur	() => void	-	Callback triggered on blur