Aura Field

AI chats 1

About

An AI writing textarea whose edge lights up into a rotating conic-gradient band while a rewrite tool runs, streaming the new text in word by word out of a blur, then settling back to a plain hairline border when done.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aura Field to your project and fits it to your theme.

Code

How Aura Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import AuraField from "@/components/ui/aura-field";

export default function AuraFieldDemo() {
  return (
    <div className="flex min-h-full w-full flex-col items-center justify-center gap-5 p-8 bg-[#f2f2f7] text-[#1c1c1e]">
      <AuraField theme="light" />
      <p className="font-[family-name:Geist_Mono] text-[0.625rem] uppercase tracking-[0.14em] text-[#8e8e93]">
        pick a tool · undo to compare
      </p>
    </div>
  );
}