Frost Input, animated React component

A sign-up field that freezes. Focus it and six-fold frost crystals grow across the glass, every key you type drives a crack through the ice from the caret, and sending it shatters the field from the point of impact into falling shards before it freezes back together. It is a real form field with a label, Enter to submit and an onSubmit callback.

Pro
Inputs & Controls

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Props

Prop	Type	Default	What it does
placeholder	string	"[email protected]"	Placeholder text inside the empty field.
headline	string	"Join the cold list."	Headline above the field.
done	string	"You’re on the list."	Message shown after the field shatters.
onSubmit	(value: string) => void	—	Called with the trimmed value when the form is sent.
height	number	420	Height of the stage, in px.
autoplay	boolean	false	A ghost clicks in, types an address and sends it, in a loop, until a real pointer or key arrives. Pauses off screen and never runs under reduced motion.
className	string	—	Extra classes for the stage.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Frost Input is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```
3
Add the component
Run this from your project root. It adds the component, the helpers it imports and its npm packages.
```
npx shadcn@latest add @nexus-labs/frost-input
```
4
Check what was added
With a project made as in the Quick Start (a src/ folder), these files land in it:
components/
frost-input/
frost-input.tsx
index.ts
5
Copying by hand? Skip the registry
Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:
```
npm install framer-motion
```
Then show the source and create each file at the path it gives:

Use it in a page

Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

// src/app/page.tsx
import { FrostInput } from "@/components/frost-input";

export default function Page() {
  return (
    <main>
      <FrostInput />
    </main>
  );
}

Frost Input, animated React component

Play with it

Props

More inputs & controls