Interactive Input

Sci-fi styled input with shimmer border animation and glow effects

input interactive shimmer glow sci-fi form

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

export function InteractiveInputExample() {
  return (
    <div className="flex flex-col items-center gap-6 p-8 bg-background rounded-lg">
      <InteractiveInput placeholder="Type something..." />
      <InteractiveInput
        variant="glow"
        inputSize="lg"
        placeholder="Glowing input..."
        shimmerColor="#8b5cf6"
      />
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/interactive-input"

Dependencies


pnpm add class-variance-authority