Gemini Input

A Gemini-style animated gradient input built entirely with CSS. Features a rotating gradient border animation with an inner textarea and optional prefix/suffix slots.

Installation

npm install @duskmoon-dev/el-art-gemini-input

Usage

import '@duskmoon-dev/el-art-gemini-input/register';

<el-dm-art-gemini-input></el-dm-art-gemini-input>

Live Demo

Default

Custom Placeholder

Sizes

Properties

Property	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the input
`placeholder`	`string`	`'Ask me anything...'`	Placeholder text for the textarea

Slots

Slot	Description
`prefix`	Content before the textarea (default: attach button)
`suffix`	Content after the textarea (default: send button)

Custom Slots

<el-dm-art-gemini-input placeholder="Search...">
  <span slot="prefix">🔍</span>
  <button slot="suffix" type="button">Go</button>
</el-dm-art-gemini-input>