Interactive input

InteractiveInput is a highly customizable interactive input component with shimmer effects, glow, and visual styling options.

Installation

npx scrollx-ui@latest add interactive-input

Usage

import { InteractiveInput } from "@/components/ui/interactive-input";

<InteractiveInput
        className="bg-green-500 text-white"
        variant="default"
        inputSize="default"
        glow={true}
        rounded="custom"
        hideAnimations={false}
        uppercase={true}
        textEffect="normal"
        shimmerColor="#39FF14"
        shimmerSize="0.15em"
        shimmerDuration="3s"
        borderRadius="100px"
        background="rgba(0, 0, 0, 1)"
        placeholder="Generate with ScrollX UI"
       />

API Reference

interactive input

InteractiveInput is a customizable input component with animation, shimmer, and visual styling options.

• variant – Controls the visual style of the input.
  Options: default, outline, ghost, glow.

• inputSize – Adjusts the input size.
  Options: sm, default, lg, icon.

• glow – Enables glowing animation around the input.
  Type: boolean.

• textEffect – Applies a text animation or effect.
  Options: normal, spread.

• uppercase – Renders input text in uppercase.
  Type: boolean.

• rounded – Controls border radius style.
  Options: none, default, full, custom.

• borderRadius – Custom border radius (applies if rounded="custom").
  Type: string (e.g. "100px").

• background – Sets custom background color or gradient.
  Type: string (e.g. "rgba(0,0,0,1)" or "linear-gradient(...)").

• shimmerColor – Defines the color used in shimmer effect.
  Type: string (e.g. "#39FF14" for neon green).

• shimmerSize – Sets the size/thickness of the shimmer.
  Type: string (e.g. "0.15em").

• shimmerDuration – Duration of shimmer animation.
  Type: string (e.g. "3s").

• asChild – Renders the input as a child component using Slot.
  Type: boolean.

• hideAnimations – Disables all visual animations when true.
  Type: boolean.

• className – Additional custom class names.

• ...props – Inherits all standard HTML input attributes and event handlers.