create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/queue.md

@@ -0,0 +1,172 @@
+# Queue
+
+A comprehensive queue component system for displaying message lists, todos, and collapsible task sections in AI applications.
+
+The `Queue` component provides a flexible system for displaying lists of messages, todos, attachments, and collapsible sections. Perfect for showing AI workflow progress, pending tasks, message history, or any structured list of items in your application.
+
+See `scripts/queue.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add queue
+```
+
+## Features
+
+- Flexible component system with composable parts
+- Collapsible sections with smooth animations
+- Support for completed/pending state indicators
+- Built-in scroll area for long lists
+- Attachment display with images and file indicators
+- Hover-revealed action buttons for queue items
+- TypeScript support with comprehensive type definitions
+- Customizable styling with Tailwind CSS
+- Responsive design with mobile-friendly interactions
+- Keyboard navigation and accessibility support
+- Theme-aware with automatic dark mode support
+
+## Examples
+
+### With PromptInput
+
+See `scripts/queue-prompt-input.tsx` for this example.
+
+## Props
+
+### `<Queue />`
+
+| Prop       | Type                    | Default | Description                                 |
+| ---------- | ----------------------- | ------- | ------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the root div. |
+
+### `<QueueSection />`
+
+| Prop          | Type                                       | Default | Description                                              |
+| ------------- | ------------------------------------------ | ------- | -------------------------------------------------------- |
+| `defaultOpen` | `boolean`                                  | `true`  | Whether the section is open by default.                  |
+| `...props`    | `React.ComponentProps<typeof Collapsible>` | -       | Any other props are spread to the Collapsible component. |
+
+### `<QueueSectionTrigger />`
+
+| Prop       | Type                    | Default | Description                                       |
+| ---------- | ----------------------- | ------- | ------------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the button element. |
+
+### `<QueueSectionLabel />`
+
+| Prop       | Type                    | Default | Description                                     |
+| ---------- | ----------------------- | ------- | ----------------------------------------------- |
+| `label`    | `string`                | -       | The label text to display.                      |
+| `count`    | `number`                | -       | The count to display before the label.          |
+| `icon`     | `React.ReactNode`       | -       | An optional icon to display before the count.   |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the span element. |
+
+### `<QueueSectionContent />`
+
+| Prop       | Type                                              | Default | Description                                                     |
+| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | -       | Any other props are spread to the CollapsibleContent component. |
+
+### `<QueueList />`
+
+| Prop       | Type                                      | Default | Description                                             |
+| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof ScrollArea>` | -       | Any other props are spread to the ScrollArea component. |
+
+### `<QueueItem />`
+
+| Prop       | Type                    | Default | Description                                   |
+| ---------- | ----------------------- | ------- | --------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the li element. |
+
+### `<QueueItemIndicator />`
+
+| Prop        | Type                    | Default | Description                                                   |
+| ----------- | ----------------------- | ------- | ------------------------------------------------------------- |
+| `completed` | `boolean`               | `false` | Whether the item is completed. Affects the indicator styling. |
+| `...props`  | `React.ComponentProps<` | -       | Any other props are spread to the span element.               |
+
+### `<QueueItemContent />`
+
+| Prop        | Type                    | Default | Description                                                                         |
+| ----------- | ----------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `completed` | `boolean`               | `false` | Whether the item is completed. Affects text styling with strikethrough and opacity. |
+| `...props`  | `React.ComponentProps<` | -       | Any other props are spread to the span element.                                     |
+
+### `<QueueItemDescription />`
+
+| Prop        | Type                    | Default | Description                                          |
+| ----------- | ----------------------- | ------- | ---------------------------------------------------- |
+| `completed` | `boolean`               | `false` | Whether the item is completed. Affects text styling. |
+| `...props`  | `React.ComponentProps<` | -       | Any other props are spread to the div element.       |
+
+### `<QueueItemActions />`
+
+| Prop       | Type                    | Default | Description                                    |
+| ---------- | ----------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the div element. |
+
+### `<QueueItemAction />`
+
+| Prop       | Type                                         | Default | Description                                                                   |
+| ---------- | -------------------------------------------- | ------- | ----------------------------------------------------------------------------- |
+| `...props` | `Omit<React.ComponentProps<typeof Button>, ` | -       | Any other props (except variant and size) are spread to the Button component. |
+
+### `<QueueItemAttachment />`
+
+| Prop       | Type                    | Default | Description                                    |
+| ---------- | ----------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the div element. |
+
+### `<QueueItemImage />`
+
+| Prop       | Type                    | Default | Description                                    |
+| ---------- | ----------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the img element. |
+
+### `<QueueItemFile />`
+
+| Prop       | Type                    | Default | Description                                     |
+| ---------- | ----------------------- | ------- | ----------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the span element. |
+
+## Type Exports
+
+### `QueueMessagePart`
+
+Interface for message parts within queue messages.
+
+```tsx
+interface QueueMessagePart {
+  type: string;
+  text?: string;
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+}
+```
+
+### `QueueMessage`
+
+Interface for queue message items.
+
+```tsx
+interface QueueMessage {
+  id: string;
+  parts: QueueMessagePart[];
+}
+```
+
+### `QueueTodo`
+
+Interface for todo items in the queue.
+
+```tsx
+interface QueueTodo {
+  id: string;
+  title: string;
+  description?: string;
+  status?: "pending" | "completed";
+}
+```

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/reasoning.md

@@ -0,0 +1,219 @@
+# Reasoning
+
+A collapsible component that displays AI reasoning content, automatically opening during streaming and closing when finished.
+
+The `Reasoning` component displays AI reasoning content, automatically opening during streaming and closing when finished.
+
+See `scripts/reasoning.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add reasoning
+```
+
+## Usage with AI SDK
+
+Build a chatbot with reasoning using Deepseek R1 or other reasoning models.
+
+Some models (like GPT with high reasoning effort) return multiple reasoning parts instead of a single streaming block. The example below consolidates all reasoning parts into a single component to avoid displaying multiple "Thinking..." indicators.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import {
+  PromptInput,
+  PromptInputTextarea,
+  PromptInputSubmit,
+} from "@/components/ai-elements/prompt-input";
+import { Spinner } from "@/components/ui/spinner";
+import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
+import { useState } from "react";
+import { useChat } from "@ai-sdk/react";
+import type { UIMessage } from "ai";
+
+const MessageParts = ({
+  message,
+  isLastMessage,
+  isStreaming,
+}: {
+  message: UIMessage;
+  isLastMessage: boolean;
+  isStreaming: boolean;
+}) => {
+  // Consolidate all reasoning parts into one block
+  const reasoningParts = message.parts.filter((part) => part.type === "reasoning");
+  const reasoningText = reasoningParts.map((part) => part.text).join("\n\n");
+  const hasReasoning = reasoningParts.length > 0;
+
+  // Check if reasoning is still streaming (last part is reasoning on last message)
+  const lastPart = message.parts.at(-1);
+  const isReasoningStreaming = isLastMessage && isStreaming && lastPart?.type === "reasoning";
+
+  return (
+    <>
+      {hasReasoning && (
+        <Reasoning className="w-full" isStreaming={isReasoningStreaming}>
+          <ReasoningTrigger />
+          <ReasoningContent>{reasoningText}</ReasoningContent>
+        </Reasoning>
+      )}
+      {message.parts.map((part, i) => {
+        if (part.type === "text") {
+          return <MessageResponse key={`${message.id}-${i}`}>{part.text}</MessageResponse>;
+        }
+        return null;
+      })}
+    </>
+  );
+};
+
+const ReasoningDemo = () => {
+  const [input, setInput] = useState("");
+
+  const { messages, sendMessage, status } = useChat();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage({ text: input });
+    setInput("");
+  };
+
+  const isStreaming = status === "streaming";
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <Conversation>
+          <ConversationContent>
+            {messages.map((message, index) => (
+              <Message from={message.role} key={message.id}>
+                <MessageContent>
+                  <MessageParts
+                    message={message}
+                    isLastMessage={index === messages.length - 1}
+                    isStreaming={isStreaming}
+                  />
+                </MessageContent>
+              </Message>
+            ))}
+            {status === "submitted" && <Spinner />}
+          </ConversationContent>
+          <ConversationScrollButton />
+        </Conversation>
+
+        <PromptInput onSubmit={handleSubmit} className="mt-4 w-full max-w-2xl mx-auto relative">
+          <PromptInputTextarea
+            value={input}
+            placeholder="Say something..."
+            onChange={(e) => setInput(e.currentTarget.value)}
+            className="pr-12"
+          />
+          <PromptInputSubmit
+            status={isStreaming ? "streaming" : "ready"}
+            disabled={!input.trim()}
+            className="absolute bottom-1 right-1"
+          />
+        </PromptInput>
+      </div>
+    </div>
+  );
+};
+
+export default ReasoningDemo;
+```
+
+Add the following route to your backend:
+
+```ts title="app/api/chat/route.ts"
+import { streamText, UIMessage, convertToModelMessages } from "ai";
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { model, messages }: { messages: UIMessage[]; model: string } = await req.json();
+
+  const result = streamText({
+    model: "deepseek/deepseek-r1",
+    messages: await convertToModelMessages(messages),
+  });
+
+  return result.toUIMessageStreamResponse({
+    sendReasoning: true,
+  });
+}
+```
+
+## Reasoning vs Chain of Thought
+
+Use the `Reasoning` component when your model outputs thinking content as a single block or continuous stream (Deepseek R1, Claude with extended thinking, etc.).
+
+If your model outputs discrete, labeled steps (search queries, tool calls, distinct thought stages), consider using the [Chain of Thought](/components/chain-of-thought) component instead for a more structured visual representation.
+
+## Features
+
+- Automatically opens when streaming content and closes when finished
+- Manual toggle control for user interaction
+- Smooth animations and transitions powered by Radix UI
+- Visual streaming indicator with pulsing animation
+- Composable architecture with separate trigger and content components
+- Built with accessibility in mind including keyboard navigation
+- Responsive design that works across different screen sizes
+- Seamlessly integrates with both light and dark themes
+- Built on top of shadcn/ui Collapsible primitives
+- TypeScript support with proper type definitions
+
+## Props
+
+### `<Reasoning />`
+
+| Prop           | Type                                       | Default | Description                                                                     |
+| -------------- | ------------------------------------------ | ------- | ------------------------------------------------------------------------------- |
+| `isStreaming`  | `boolean`                                  | `false` | Whether the reasoning is currently streaming (auto-opens and closes the panel). |
+| `open`         | `boolean`                                  | -       | Controlled open state.                                                          |
+| `defaultOpen`  | `boolean`                                  | `true`  | Default open state when uncontrolled.                                           |
+| `onOpenChange` | `(open: boolean) => void`                  | -       | Callback when open state changes.                                               |
+| `duration`     | `number`                                   | -       | Duration in seconds to display (can be controlled externally).                  |
+| `...props`     | `React.ComponentProps<typeof Collapsible>` | -       | Any other props are spread to the underlying Collapsible component.             |
+
+### `<ReasoningTrigger />`
+
+| Prop                 | Type                                                     | Default | Description                                                                                        |
+| -------------------- | -------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
+| `getThinkingMessage` | `(isStreaming: boolean, duration?: number) => ReactNode` | -       | Optional function to customize the thinking message. Receives isStreaming and duration parameters. |
+| `...props`           | `React.ComponentProps<typeof CollapsibleTrigger>`        | -       | Any other props are spread to the underlying CollapsibleTrigger component.                         |
+
+### `<ReasoningContent />`
+
+| Prop       | Type                                              | Default  | Description                                                                |
+| ---------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------------- |
+| `children` | `string`                                          | Required | The reasoning text to display (rendered via Streamdown).                   |
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | -        | Any other props are spread to the underlying CollapsibleContent component. |
+
+## Hooks
+
+### `useReasoning`
+
+Access the reasoning context from child components.
+
+```tsx
+const { isStreaming, isOpen, setIsOpen, duration } = useReasoning();
+```
+
+Returns:
+
+| Prop          | Type                      | Default    | Description                               |
+| ------------- | ------------------------- | ---------- | ----------------------------------------- | ------------------------------------------------ |
+| `isStreaming` | `boolean`                 | -          | Whether reasoning is currently streaming. |
+| `isOpen`      | `boolean`                 | -          | Whether the reasoning panel is open.      |
+| `setIsOpen`   | `(open: boolean) => void` | -          | Function to set the open state.           |
+| `duration`    | `number                   | undefined` | -                                         | Duration in seconds (undefined while streaming). |

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/sandbox.md

@@ -0,0 +1,126 @@
+# Sandbox
+
+A collapsible container for displaying AI-generated code and output in chat interfaces.
+
+The `Sandbox` component provides a structured way to display AI-generated code alongside its execution output in chat conversations. It features a collapsible container with status indicators and tabbed navigation between code and output views. It's designed to be used with `CodeBlock` for displaying code and `StackTrace` for displaying errors.
+
+See `scripts/sandbox.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add sandbox
+```
+
+## Features
+
+- Collapsible container with smooth animations
+- Status badges showing execution state (Pending, Running, Completed, Error)
+- Tabs for Code and Output views
+- Syntax-highlighted code display
+- Copy button for easy code sharing
+- Works with AI SDK tool state patterns
+
+## Usage with AI SDK
+
+The Sandbox component integrates with the AI SDK's tool state to show code generation progress:
+
+```tsx title="components/code-sandbox.tsx"
+"use client";
+
+import type { ToolUIPart } from "ai";
+import {
+  Sandbox,
+  SandboxContent,
+  SandboxHeader,
+  SandboxTabContent,
+  SandboxTabs,
+  SandboxTabsBar,
+  SandboxTabsList,
+  SandboxTabsTrigger,
+} from "@/components/ai-elements/sandbox";
+import { CodeBlock } from "@/components/ai-elements/code-block";
+
+type CodeSandboxProps = {
+  toolPart: ToolUIPart;
+};
+
+export const CodeSandbox = ({ toolPart }: CodeSandboxProps) => {
+  const code = toolPart.input?.code ?? "";
+  const output = toolPart.output?.logs ?? "";
+
+  return (
+    <Sandbox>
+      <SandboxHeader state={toolPart.state} title={toolPart.input?.filename ?? "code.tsx"} />
+      <SandboxContent>
+        <SandboxTabs defaultValue="code">
+          <SandboxTabsBar>
+            <SandboxTabsList>
+              <SandboxTabsTrigger value="code">Code</SandboxTabsTrigger>
+              <SandboxTabsTrigger value="output">Output</SandboxTabsTrigger>
+            </SandboxTabsList>
+          </SandboxTabsBar>
+          <SandboxTabContent value="code">
+            <CodeBlock code={code} language="tsx" />
+          </SandboxTabContent>
+          <SandboxTabContent value="output">
+            <CodeBlock code={output} language="log" />
+          </SandboxTabContent>
+        </SandboxTabs>
+      </SandboxContent>
+    </Sandbox>
+  );
+};
+```
+
+## Props
+
+### `<Sandbox />`
+
+| Prop       | Type                                       | Default | Description                                                         |
+| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof Collapsible>` | -       | Any other props are spread to the underlying Collapsible component. |
+
+### `<SandboxHeader />`
+
+| Prop        | Type          | Default     | Description                                                                |
+| ----------- | ------------- | ----------- | -------------------------------------------------------------------------- |
+| `title`     | `string`      | `undefined` | The title displayed in the header (e.g., filename).                        |
+| `state`     | `ToolUIPart[` | Required    | The current execution state, used to display the appropriate status badge. |
+| `className` | `string`      | -           | Additional CSS classes for the header.                                     |
+
+### `<SandboxContent />`
+
+| Prop       | Type                                              | Default | Description                                           |
+| ---------- | ------------------------------------------------- | ------- | ----------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | -       | Any other props are spread to the CollapsibleContent. |
+
+### `<SandboxTabs />`
+
+| Prop       | Type                                | Default | Description                                                  |
+| ---------- | ----------------------------------- | ------- | ------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof Tabs>` | -       | Any other props are spread to the underlying Tabs component. |
+
+### `<SandboxTabsBar />`
+
+| Prop       | Type                                   | Default | Description                                      |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------ |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div. |
+
+### `<SandboxTabsList />`
+
+| Prop       | Type                                    | Default | Description                                                      |
+| ---------- | --------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof TabsList>` | -       | Any other props are spread to the underlying TabsList component. |
+
+### `<SandboxTabsTrigger />`
+
+| Prop       | Type                                       | Default | Description                                                         |
+| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof TabsTrigger>` | -       | Any other props are spread to the underlying TabsTrigger component. |
+
+### `<SandboxTabContent />`
+
+| Prop       | Type                                       | Default | Description                                                         |
+| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof TabsContent>` | -       | Any other props are spread to the underlying TabsContent component. |

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/schema-display.md

@@ -0,0 +1,102 @@
+# Schema Display
+
+Display REST API endpoint documentation with parameters, request/response bodies.
+
+The `SchemaDisplay` component visualizes REST API endpoints with HTTP methods, paths, parameters, and request/response schemas.
+
+See `scripts/schema-display.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add schema-display
+```
+
+## Features
+
+- Color-coded HTTP methods
+- Path parameter highlighting
+- Collapsible parameters section
+- Request/response body schemas
+- Nested object property display
+- Required field indicators
+
+## Method Colors
+
+| Method   | Color  |
+| -------- | ------ |
+| `GET`    | Green  |
+| `POST`   | Blue   |
+| `PUT`    | Orange |
+| `PATCH`  | Yellow |
+| `DELETE` | Red    |
+
+## Examples
+
+### Basic Usage
+
+See `scripts/schema-display-basic.tsx` for this example.
+
+### With Parameters
+
+See `scripts/schema-display-params.tsx` for this example.
+
+### With Request/Response Bodies
+
+See `scripts/schema-display-body.tsx` for this example.
+
+### Nested Properties
+
+See `scripts/schema-display-nested.tsx` for this example.
+
+## Props
+
+### `<SchemaDisplay />`
+
+| Prop           | Type                | Default | Description               |
+| -------------- | ------------------- | ------- | ------------------------- |
+| `method`       | `unknown`           | -       | HTTP method.              |
+| `path`         | `string`            | -       | API endpoint path.        |
+| `description`  | `string`            | -       | Endpoint description.     |
+| `parameters`   | `SchemaParameter[]` | -       | URL/query parameters.     |
+| `requestBody`  | `SchemaProperty[]`  | -       | Request body properties.  |
+| `responseBody` | `SchemaProperty[]`  | -       | Response body properties. |
+
+### `SchemaParameter`
+
+```tsx
+interface SchemaParameter {
+  name: string;
+  type: string;
+  required?: boolean;
+  description?: string;
+  location?: "path" | "query" | "header";
+}
+```
+
+### `SchemaProperty`
+
+```tsx
+interface SchemaProperty {
+  name: string;
+  type: string;
+  required?: boolean;
+  description?: string;
+  properties?: SchemaProperty[]; // For objects
+  items?: SchemaProperty; // For arrays
+}
+```
+
+### Subcomponents
+
+- `SchemaDisplayHeader` - Header container
+- `SchemaDisplayMethod` - Color-coded method badge
+- `SchemaDisplayPath` - Path with highlighted parameters
+- `SchemaDisplayDescription` - Description text
+- `SchemaDisplayContent` - Content container
+- `SchemaDisplayParameters` - Collapsible parameters section
+- `SchemaDisplayParameter` - Individual parameter
+- `SchemaDisplayRequest` - Collapsible request body
+- `SchemaDisplayResponse` - Collapsible response body
+- `SchemaDisplayProperty` - Schema property (recursive)
+- `SchemaDisplayExample` - Code example block

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/shimmer.md

@@ -0,0 +1,48 @@
+# Shimmer
+
+An animated text shimmer component for creating eye-catching loading states and progressive reveal effects.
+
+The `Shimmer` component provides an animated shimmer effect that sweeps across text, perfect for indicating loading states, progressive reveals, or drawing attention to dynamic content in AI applications.
+
+See `scripts/shimmer.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add shimmer
+```
+
+## Features
+
+- Smooth animated shimmer effect using CSS gradients and Framer Motion
+- Customizable animation duration and spread
+- Polymorphic component - render as any HTML element via the `as` prop
+- Automatic spread calculation based on text length
+- Theme-aware styling using CSS custom properties
+- Infinite looping animation with linear easing
+- TypeScript support with proper type definitions
+- Memoized for optimal performance
+- Responsive and accessible design
+- Uses `text-transparent` with background-clip for crisp text rendering
+
+## Examples
+
+### Different Durations
+
+See `scripts/shimmer-duration.tsx` for this example.
+
+### Custom Elements
+
+See `scripts/shimmer-elements.tsx` for this example.
+
+## Props
+
+### `<Shimmer />`
+
+| Prop        | Type          | Default | Description                                                                |
+| ----------- | ------------- | ------- | -------------------------------------------------------------------------- |
+| `children`  | `string`      | -       | The text content to apply the shimmer effect to.                           |
+| `as`        | `ElementType` | -       | The HTML element or React component to render.                             |
+| `className` | `string`      | -       | Additional CSS classes to apply to the component.                          |
+| `duration`  | `number`      | `2`     | The duration of the shimmer animation in seconds.                          |
+| `spread`    | `number`      | `2`     | The spread multiplier for the shimmer gradient, multiplied by text length. |