### Install and Run Clippkit Documentation

Source: https://github.com/reactvideoeditor/clippkit/blob/main/README.md

Use these commands to install dependencies and start the documentation site locally. This allows exploration and testing of Clippkit components.

```bash
pnpm install
pnpm run dev
```

--------------------------------

### Run Development Server

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/README.md

Use these commands to start the development server for the Next.js application. Ensure you have npm, pnpm, or yarn installed.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

--------------------------------

### Run Development Server

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Start the documentation and registry locally.

```bash
pnpm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install Linear Waveform via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/audio-waveforms/linear-waveform.mdx

Use the provided npx command to add the LinearWaveform component to your project. This is the recommended installation method.

```bash
npx shadcn@latest add "https://clippkit.com/r/linear-waveform"
```

--------------------------------

### Install Sliding Text Component via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/text-elements/sliding-text.mdx

Use the `npx shadcn@latest add` command to install the Sliding Text component directly into your project.

```bash
npx shadcn@latest add "https://clippkit.com/r/sliding-text"
```

--------------------------------

### Configure Component Path in components.json

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/installation.mdx

Customize the installation directory for components by editing the `aliases.components` value in your `components.json` file. This example sets the path to `@/components/clippkit`.

```json
{
  "aliases": {
    "components": "@/components/clippkit"
  }
}
```

--------------------------------

### Install Popping Text Component CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/text-elements/popping-text.mdx

Use this command to install the Popping Text component using the shadcn CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/popping-text"
```

--------------------------------

### Example Component Documentation File (MDX)

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

MDX file for documenting the new component. Includes frontmatter for title and description, and a placeholder for a live preview tab.

```mdx
---
title: Example Component
description: A brief description of what the Example Component does.
preview: true # This likely enables the live preview tab
---

<ComponentTabs name="example-component-demo" />
{/* This should match the demo name */}

## Installation


```

--------------------------------

### BarWaveform Component and Usage Example

Source: https://context7.com/reactvideoeditor/clippkit/llms.txt

Demonstrates the BarWaveform component, its props interface, and a full usage example within a Remotion Player. It shows how to fetch audio data and configure the waveform's visual properties.

```tsx
import React from "react";
import { useAudioData, MediaUtilsAudioData } from "@remotion/media-utils";
import { Player } from "@remotion/player";
import { Audio } from "remotion";
import BarWaveform from "@/components/bar-waveform";

// BarWaveform Props Interface
interface BarWaveformProps {
  audioData?: MediaUtilsAudioData | null;  // Audio data from useAudioData
  numberOfSamples?: number;                 // Number of bars (default: 64)
  barColor?: string;                        // Bar color (default: "var(--foreground)")
  barWidth?: number;                        // Width of each bar (default: 5)
  barGap?: number;                          // Gap between bars (default: 2)
  waveAmplitude?: number;                   // Max bar height (default: 100)
  waveSpeed?: number;                       // Animation speed for fallback (default: 10)
  containerStyle?: React.CSSProperties;     // Custom container styles
  height?: string | number;                 // Component height
  width?: string | number;                  // Component width
  barBorderRadius?: string | number;        // Bar corner radius (default: 0)
  growUpwardsOnly?: boolean;                // Bars grow only upward (default: false)
}

// Composition component that combines waveform and audio
const AudioWaveformComposition: React.FC<{ 
  barWaveformProps: Omit<React.ComponentProps<typeof BarWaveform>, "audioData"> & {
    audioData?: MediaUtilsAudioData | null;
  };
  mediaSrc: string;
}> = ({ barWaveformProps, mediaSrc }) => (
  <>
    <BarWaveform {...barWaveformProps} />
    <Audio src={mediaSrc} />
  </>
);

// Usage Example
export default function BarWaveformExample() {
  const AUDIO_URL = "https://example.com/audio.mp3";
  const audioData = useAudioData(AUDIO_URL);

  const barWaveformProps = React.useMemo(() => ({
    numberOfSamples: 50,
    barColor: "var(--foreground)",
    barWidth: 4,
    barGap: 3,
    waveAmplitude: 200,
    waveSpeed: 5,
    audioData,
    barBorderRadius: 2,
    growUpwardsOnly: false,
  }), [audioData]);

  const durationInFrames = audioData
    ? Math.floor(audioData.durationInSeconds * 30)
    : 300;

  return (
    <Player
      component={AudioWaveformComposition}
      inputProps={{ barWaveformProps, mediaSrc: AUDIO_URL }}
      durationInFrames={durationInFrames}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      loop
    />
  );
}

```

--------------------------------

### Example Component Demo File

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

A demo file to showcase the new component using Remotion's Player. Configure component props and player settings.

```tsx
import { Player } from "@remotion/player";
import ExampleComponent from "../ui/example-component"; // Adjust path if needed

export default function ExampleComponentDemo() {
  const componentProps = {
    text: "Example Component in Action!",
    // other props for your component
  };

  return (
    <Player
      component={ExampleComponent}
      inputProps={componentProps}
      durationInFrames={90} // Example duration
      compositionWidth={1280}
      compositionHeight={720}
      fps={30}
      style={{
        width: "100%",
        height: "100%",
      }}
      autoPlay
      controls
      loop
    />
  );
}

```

--------------------------------

### Install Typing Text Component via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/text-elements/typing-text.mdx

Use this command to add the TypingText component to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/typing-text"
```

--------------------------------

### Install Toast Card Component via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/card-elements/toast-card.mdx

Use the provided npx command to add the Toast Card component to your project.

```bash
npx shadcn@latest add "https://clippkit.com/r/toast-card"
```

--------------------------------

### Add a Component with shadcn/ui

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/installation.mdx

Use this command to add a specific component to your project. The CLI uses `components.json` to determine the installation path.

```bash
npx shadcn@latest add <component-name>
```

--------------------------------

### Example Component Source File

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

The main source file for a new component. Includes basic animation logic using Remotion hooks.

```tsx
"use client"; // If applicable for your component

import { spring, useCurrentFrame, useVideoConfig } from "remotion";
import React from "react"; // Or other necessary imports

// Define your props interface
interface ExampleComponentProps {
  text?: string;
  // Add other props here
}

export default function ExampleComponent({
  text = "Hello World!",
}: ExampleComponentProps) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Your component logic and animations here
  const opacity = spring({
    frame,
    fps,
    from: 0,
    to: 1,
    durationInFrames: 30,
  });

  return (
    <div style={{ opacity, textAlign: "center", fontSize: "4rem" }}>
      {text}
      {/* Your component JSX */}
    </div>
  );
}

```

--------------------------------

### Install Clippkit Components with shadcn/ui CLI

Source: https://context7.com/reactvideoeditor/clippkit/llms.txt

Use the shadcn/ui CLI to add Clippkit components to your project. Initialize shadcn if not already done, then add components using their registry URLs.

```bash
npx shadcn@latest init
```

```bash
npx shadcn@latest add "https://clippkit.com/r/card-flip"
```

```bash
npx shadcn@latest add "https://clippkit.com/r/typing-text"
npx shadcn@latest add "https://clippkit.com/r/bar-waveform"
```

--------------------------------

### Install Bar Waveform via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/audio-waveforms/bar-waveform.mdx

Use this command to add the Bar Waveform component to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/bar-waveform"
```

--------------------------------

### Install Floating Card via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/card-elements/floating-card.mdx

Use this command to add the Floating Card component to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/floating-card"
```

--------------------------------

### Usage Example in Remotion Composition

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/loaders/circular-loader.mdx

Demonstrates how to import and use the CircularLoader component within a Remotion Composition.

```typescript
import { Composition } from "remotion";

import CircularLoader from "@/components/clippkit/circular-loader"; // Adjust path as needed

export const MyComposition = () => {
  return (
    <Composition
      id="CircularLoaderScene"
      component={CircularLoader}
      durationInFrames={150} // Example: 5 seconds at 30fps
      fps={30}
      width={1280}
      height={720}
      defaultProps={{
        loadingText: "Generating Video...",
        circleColor: "#1E90FF", // DodgerBlue
        textColor: "#333333",
        size: 100,
      }}
    />
  );
};
```

--------------------------------

### Define a Composition with BarLoader

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/loaders/bar-loader.mdx

Example of how to integrate the BarLoader component into a Remotion composition.

```APIDOC
## Define a Composition

In your Remotion project's entry file (commonly `src/Root.tsx`, `src/index.tsx`, `app/main.tsx`), import `BarLoader` and define a `Composition`.

### Request Example

```tsx title="app/main.tsx (or equivalent)"
import { Composition } from "remotion";

import BarLoader from "@/components/clippkit/bar-loader"; // Assuming you placed it in src/components/clippkit

export const MyComposition = () => {
  return (
    <Composition
      id="BarLoaderScene"
      component={BarLoader}
      durationInFrames={150} // Example: 5 seconds at 30fps
      fps={30}
      width={1280}
      height={720}
      defaultProps={{
        loadingText: "Generating Video...",
        barColor: "#1E90FF", // DodgerBlue
        textColor: "#333333",
        width: "80%",
        height: 100,
      }}
    />
  );
};
```
```

--------------------------------

### Install Card Flip Component via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/card-elements/card-flip.mdx

Use this command to add the Card Flip component to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/card-flip"
```

--------------------------------

### Install Screen Loader via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/loaders/screen-loader.mdx

Use this command to add the Screen Loader component to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/screen-loader"
```

--------------------------------

### Install Circular Waveform Component

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/audio-waveforms/circular-waveform.mdx

Use this command to add the CircularWaveform component to your project via the CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/circular-waveform"
```

--------------------------------

### Install Bar Loader via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/loaders/bar-loader.mdx

Use this command to add the Bar Loader component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/bar-loader"
```

--------------------------------

### Usage Example in Remotion Composition

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/text-elements/popping-text.mdx

Demonstrates how to use the PoppingText component within a Remotion Player, including setting input props and player configurations.

```APIDOC
## Usage Example in Remotion Composition

### Description
This example shows how to import and use the `PoppingText` component in a Remotion project. It configures the `Player` component with specific `inputProps` for `PoppingText` and sets player parameters like duration, dimensions, and playback options.

### File
`app/main.tsx` (or equivalent entry file)

### Code
```tsx
import { Player } from "@remotion/player";
import PoppingText from "@/components/clippkit/popping-text"; // Adjust import path as needed

export default function PoppingTextDemo() {
  const poppingTextProps = {
    text: "Popping Text",
    colors: ["var(--foreground)"],
    fontSize: "3rem",
    fontWeight: "bold",
  };

  return (
    <Player
      component={PoppingText}
      inputProps={poppingTextProps}
      durationInFrames={90}
      compositionWidth={480}
      compositionHeight={270} // 16:9 aspect ratio
      fps={30}
      style={{
        width: "100%",
        height: "100%", // Player will scale to fit its container
      }}
      autoPlay
      controls // Show player controls
      loop // Loop the animation
    />
  );
}
```
```

--------------------------------

### Build Remotion Registry

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Run the command to build or update the registry after making changes to component or example registrations. This command is specific to the project's build scripts.

```bash
pnpm build:registry
```

--------------------------------

### Install Circular Loader via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/loaders/circular-loader.mdx

Use this command to add the Circular Loader component to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/circular-loader"
```

--------------------------------

### Install Glitch Text Component via CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/text-elements/glitch-text.mdx

Use this command to add the Glitch Text component to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://clippkit.com/r/glitch-text"
```

--------------------------------

### Create Example React Component for Remotion

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

This component uses Remotion hooks like useCurrentFrame and useVideoConfig to animate its opacity. Ensure 'use client' is included if server-side rendering is not intended for this component.

```tsx
"use client";

import { spring, useCurrentFrame, useVideoConfig } from "remotion";
import React from 'react';

interface ExampleComponentProps {
  text?: string;
}

export default function ExampleComponent({ text = "Hello World!" }: ExampleComponentProps) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = spring({
    frame,
    fps,
    from: 0,
    to: 1,
    durationInFrames: 30,
  });

  return (
    <div style={{ opacity, textAlign: 'center', fontSize: '4rem' }}>
      {text}
    </div>
  );
}
```

--------------------------------

### SlidingText Component Usage Example

Source: https://context7.com/reactvideoeditor/clippkit/llms.txt

Create a text component that slides in using spring physics. Configure text, colors, font size, slide direction, and animation parameters like damping and stiffness. Requires Remotion Player.

```tsx
import {
  Player
} from "@remotion/player";
import SlidingText from "@/components/sliding-text";

// SlidingText Props Interface
interface SlidingTextProps {
  text?: string;                                      // Text to display (default: "Sliding Text!")
  textColor?: string;                                 // Text color (default: "var(--foreground)")
  fontSize?: string;                                  // Font size (default: "4rem")
  slideDirection?: "left" | "right" | "top" | "bottom"; // Direction to slide from (default: "left")
  durationInFrames?: number;                          // Animation duration (default: 30)
  initialOffset?: number;                             // Starting offset in pixels (default: 200)
  damping?: number;                                   // Spring damping (default: 12)
  mass?: number;                                      // Spring mass (default: 0.5)
  stiffness?: number;                                 // Spring stiffness (default: 100)
}

// Usage Example
export default function SlidingTextExample() {
  return (
    <Player
      component={SlidingText}
      inputProps={{
        text: "Welcome!",
        textColor: "#ffffff",
        fontSize: "5rem",
        slideDirection: "bottom",
        durationInFrames: 45,
        initialOffset: 300,
        damping: 14,
        mass: 0.6,
        stiffness: 120,
      }}
      durationInFrames={90}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      autoPlay
      loop
    />
  );
}
```

--------------------------------

### Define a Remotion Composition with Floating Card

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/card-elements/floating-card.mdx

Example of how to import and use the FloatingCard component within a Remotion composition. Ensure the import path matches your project structure.

```tsx
import { Player } from "@remotion/player";

import FloatingCard from "@/components/clippkit/floating-card"; // Assuming you placed it in src/components/clippkit

export default function FloatingCardScene() {
  const floatingCardProps = {
    text: "Hello From Remotion!",
    textColor: "#FFF",
    backgroundColor: "linear-gradient(45deg, #7e22ce, #a21caf)",
    fontSize: "1.8rem",
    width: "300px",
    height: "200px",
    borderRadius: "25px",
    borderColor: "#FFF",
    borderWidth: "2px",
    borderStyle: "solid" as const,
    durationInFrames: 45, // Duration of entry animation
    damping: 18,
    mass: 0.6,
    stiffness: 90,
    boxShadow: "0 8px 16px rgba(0,0,0,0.25)",
    floatAmplitude: 20,
    floatSpeed: 35,
  };

  return (
    <Player
      component={FloatingCard}
      inputProps={floatingCardProps}
      durationInFrames={180} // Total duration of the player timeline
      compositionWidth={500}
      compositionHeight={500} // Square aspect ratio to see the card nicely
      fps={30}
      style={{
        width: "100%",
        height: "100%",
      }}
      autoPlay
      controls
      loop
    />
  );
}
```

--------------------------------

### TypingText Component Usage Example

Source: https://context7.com/reactvideoeditor/clippkit/llms.txt

Implement a typewriter-style text animation with a blinking cursor. Customize text, colors, font, and animation timing. Requires Remotion Player for rendering.

```tsx
import {
  Player
} from "@remotion/player";
import TypingText from "@/components/typing-text";

// TypingText Props Interface
interface TypingTextProps {
  text?: string;                    // Text to display (default: "TYPE ME...")
  textColor?: string;               // Color of the text (default: "white")
  cursorColor?: string;             // Color of the cursor (default: "white")
  fontSize?: string;                // Font size (default: "3rem")
  fontFamily?: string;              // Font family (default: "'Courier New', monospace")
  fontWeight?: string;              // Font weight (default: "bold")
  durationInFramesToType?: number;  // Total frames to type text (default: text.length * 5)
  cursorBlinkSpeed?: number;        // Frames per blink cycle (default: 15)
}

// Usage Example
export default function TypingTextExample() {
  return (
    <Player
      component={TypingText}
      inputProps={{
        text: "Welcome to my video!",
        textColor: "var(--foreground)",
        cursorColor: "var(--primary)",
        fontSize: "2.5rem",
        fontFamily: "monospace",
        fontWeight: "normal",
        durationInFramesToType: 120,  // 4 seconds at 30fps
        cursorBlinkSpeed: 15,
      }}
      durationInFrames={180}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      autoPlay
      loop
    />
  );
}
```

--------------------------------

### Define Remotion Composition with ToastCard

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/card-elements/toast-card.mdx

Example of how to import and use the ToastCard component within a Remotion Composition. Ensure the import path matches your project structure. The component accepts various props to customize the toast's appearance and animation.

```tsx
import { Player } from "@remotion/player";

import ToastCard from "@/components/clippkit/toast-card"; // Assuming you placed it in src/components/clippkit

export default function MyToastPlayer() {
  const toastProps = {
    title: "Update Available",
    message: "A new version of the software is ready to install.",
    backgroundColor: "oklch(0.7 0.15 250)", // A nice blue
    titleColor: "#FFFFFF",
    messageColor: "#F0F0F0",
    positionPreset: "top-right" as const,
    entryDurationInFrames: 30,
    visibleDurationInFrames: 180, // Show for 6 seconds at 30 FPS
    exitDurationInFrames: 30,
    width: "350px",
  };

  const totalDuration =
    toastProps.entryDurationInFrames +
    toastProps.visibleDurationInFrames +
    toastProps.exitDurationInFrames +
    60; // Extra 60 frames buffer

  return (
    <Player
      component={ToastCard}
      inputProps={toastProps}
      durationInFrames={totalDuration}
      compositionWidth={1280} // Typical video width
      compositionHeight={720} // Typical video height
      fps={30}
      style={{
        width: "100%",
        height: "100%",
        backgroundColor: "var(--background-alt)", // A slightly different background
      }}
      autoPlay
      controls
      loop
    />
  );
}
```

--------------------------------

### CardFlip Component Usage Example

Source: https://context7.com/reactvideoeditor/clippkit/llms.txt

Demonstrates how to use the CardFlip component with various customizable props within a Remotion Player. Adjust props like text, colors, dimensions, and animation physics to achieve desired effects.

```tsx
import { Player } from "@remotion/player";
import CardFlip from "@/components/card-flip";

// CardFlip Props Interface
interface CardFlipProps {
  frontText?: string;                              // Front face text (default: "Clippk.it")
  backText?: string;                               // Back face text (default: "Remotion")
  frontTextColor?: string;                         // Front text color
  backTextColor?: string;                          // Back text color
  frontBackgroundColor?: string;                   // Front background color
  backBackgroundColor?: string;                    // Back background color
  fontSize?: string;                               // Text font size (default: "1.25rem")
  width?: string;                                  // Card width (default: "200px")
  height?: string;                                 // Card height (default: "280px")
  borderRadius?: string;                           // Border radius (default: "15px")
  borderColor?: string;                            // Border color
  borderWidth?: string;                            // Border width (default: "1px")
  borderStyle?: "solid" | "dashed" | "dotted";     // Border style
  durationInFrames?: number;                       // Flip duration (default: 70)
  damping?: number;                                // Spring damping (default: 18)
  mass?: number;                                   // Spring mass (default: 0.5)
  stiffness?: number;                              // Spring stiffness (default: 100)
  boxShadow?: string;                              // Box shadow style
}

// Usage Example
export default function CardFlipExample() {
  return (
    <Player
      component={CardFlip}
      inputProps={{
        frontText: "Question?",
        backText: "Answer!",
        frontTextColor: "var(--foreground)",
        backTextColor: "var(--foreground)",
        frontBackgroundColor: "var(--card)",
        backBackgroundColor: "var(--primary)",
        fontSize: "1.5rem",
        width: "250px",
        height: "350px",
        borderRadius: "20px",
        borderColor: "var(--primary)",
        borderWidth: "2px",
        borderStyle: "solid",
        durationInFrames: 80,
        damping: 15,
        mass: 0.6,
        stiffness: 100,
      }}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      autoPlay
      loop
    />
  );
}
```

--------------------------------

### Define Remotion Composition with ScreenLoader

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/loaders/screen-loader.mdx

Example of defining a Remotion composition that includes the ScreenLoader component. Ensure the parent container has relative positioning and specified dimensions for the loader to animate correctly. The ScreenLoader component itself requires container dimensions, loader size, loader color, and duration.

```tsx
import React from "react"; // Needed for JSX
import { Composition } from "remotion";

import ScreenLoader from "@/components/clippkit/screen-loader"; // Assuming you placed it in src/components/clippkit

// Wrapper component to provide context for ScreenLoader
const MyScreenLoaderScene: React.FC = () => {
  const sceneWidth = 500;
  const sceneHeight = 300;

  return (
    <div
      style={{
        width: sceneWidth,
        height: sceneHeight,
        position: "relative", // Important for ScreenLoader positioning
        border: "1px solid black", // Optional: visualize the container
        margin: "auto", // Center in Remotion player if it's larger
        display: "flex", // Ensure it takes up specified width/height
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "lightgray",
      }}
    >
      <ScreenLoader
        containerWidth={sceneWidth}
        containerHeight={sceneHeight}
        loaderSize={30}
        loaderColor="#007bff" // A nice blue
        durationInFrames={180} // 6 seconds at 30fps
      />
      {/* You can add other content inside this container too */}
      <p style={{ position: "absolute", color: "black" }}>Loading Content...</p>
    </div>
  );
};

export const MyComposition = () => {
  return (
    <Composition
      id="ScreenLoaderScene"
      component={MyScreenLoaderScene} // Use the wrapper
      durationInFrames={200} // Longer than loader to see full loop if needed
      fps={30}
      width={600} // Player dimensions, can be larger than scene
      height={400}
      // No defaultProps needed here as MyScreenLoaderScene defines them
    />
  );
};

```

--------------------------------

### Create Local Environment File

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Create and configure the .env.local file for the docs site. Ensure NEXT_PUBLIC_APP_URL is set correctly.

```bash
touch apps/docs/.env.local && echo "NEXT_PUBLIC_APP_URL=http://localhost:3000" > apps/docs/.env.local
```

--------------------------------

### Initialize shadcn/ui CLI

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/installation.mdx

Run this command to initialize the shadcn/ui CLI in your project. This is a prerequisite for adding Clippkit components using the CLI method.

```bash
npx shadcn@latest init
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Change the current directory to the cloned clippkit project.

```bash
cd clippkit
```

--------------------------------

### Register Component Demo in Documentation Registry

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Add an entry for your component's demo to the `registry-examples.ts` file. The `name` must match the one used in `<ComponentTabs name="..."/>`.

```typescript
// ... existing imports and examples array
export const examples: Registry = [
  // ... existing examples
  {
    name: "example-component-demo", // Must match the name used in <ComponentTabs name="..."/>
    type: "registry:example",
    files: [
      {
        path: "examples/example-component-demo.tsx", // Path relative to apps/docs/registry/default/
        type: "registry:example",
      },
    ],
  },
];
```

--------------------------------

### Define Remotion Composition with CircularLoader

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/loaders/circular-loader.mdx

Example of how to import and use the CircularLoader component within a Remotion Composition. Ensure the import path matches your project structure.

```tsx
import { Composition } from "remotion";

import CircularLoader from "@/components/clippkit/circular-loader"; // Assuming you placed it in src/components/clippkit

export const MyComposition = () => {
  return (
    <Composition
      id="CircularLoaderScene"
      component={CircularLoader}
      durationInFrames={150} // Example: 5 seconds at 30fps
      fps={30}
      width={1280}
      height={720}
      defaultProps={{
        loadingText: "Generating Video...",
        circleColor: "#1E90FF", // DodgerBlue
        textColor: "#333333",
        size: 100, // Diameter of the loader
      }}
    />
  );
};
```

--------------------------------

### Use Custom Component in Remotion Composition

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Integrate the custom ExampleComponent into your Remotion video composition. Update the import path to match the actual location of your component file.

```tsx
import { Composition } from "remotion";
import ExampleComponent from "./components/example-component"; // User's project path

export const MyVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ExampleScene"
        component={ExampleComponent}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          text: "My Example Title",
          // other props
        }}
      />
    </>
  );
};
```

--------------------------------

### CircularWaveform Component and Usage Example

Source: https://context7.com/reactvideoeditor/clippkit/llms.txt

Defines the CircularWaveform component's props interface and demonstrates its usage with a Remotion Player. It fetches audio data and configures waveform properties for visualization.

```tsx
import React from "react";
import { useAudioData, MediaUtilsAudioData } from "@remotion/media-utils";
import { Player } from "@remotion/player";
import { Audio } from "remotion";
import CircularWaveform from "@/components/circular-waveform";

// CircularWaveform Props Interface
interface CircularWaveformProps {
  audioData?: MediaUtilsAudioData | null;  // Audio data from useAudioData
  barCount?: number;                        // Number of bars (default: 60)
  barWidth?: number;                        // Bar stroke width (default: 5)
  barColor?: string;                        // Bar color (default: "var(--foreground)")
  waveAmplitude?: number;                   // Max bar extension (default: 50)
  radius?: number;                          // Base radius (default: 100)
  centerOffset?: { x?: number; y?: number }; // Offset from center
  containerStyle?: React.CSSProperties;     // Custom container styles
  barStyle?: React.CSSProperties;           // Custom bar styles
  height?: string | number;                 // Component height
  width?: string | number;                  // Component width
  barMinHeight?: number;                    // Minimum bar height (default: 5)
  strokeLinecap?: "butt" | "round" | "square";  // Bar cap style
  rotationOffset?: number;                  // Initial rotation in degrees (default: 0)
  growOutwardsOnly?: boolean;               // Bars grow only outward (default: false)
}

// Composition component
const CircularAudioComposition: React.FC<{ 
  waveformProps: Omit<React.ComponentProps<typeof CircularWaveform>, "audioData"> & { 
    audioData?: MediaUtilsAudioData | null;
  };
  mediaSrc: string;
}> = ({ waveformProps, mediaSrc }) => (
  <>
    <CircularWaveform {...waveformProps} />
    <Audio src={mediaSrc} />
  </>
);

// Usage Example
export default function CircularWaveformExample() {
  const AUDIO_URL = "https://example.com/audio.mp3";
  const audioData = useAudioData(AUDIO_URL);

  const waveformProps = React.useMemo(() => ({
    barCount: 80,
    barWidth: 4,
    barColor: "#4f46e5",
    waveAmplitude: 80,
    radius: 120,
    centerOffset: { x: 0, y: 0 },
    barMinHeight: 8,
    strokeLinecap: "round" as const,
    rotationOffset: -90,
    growOutwardsOnly: true,
    audioData,
  }), [audioData]);

  const durationInFrames = audioData
    ? Math.floor(audioData.durationInSeconds * 30)
    : 300;

  return (
    <Player
      component={CircularAudioComposition}
      inputProps={{ waveformProps, mediaSrc: AUDIO_URL }}
      durationInFrames={durationInFrames}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      loop
    />
  );
}

```

--------------------------------

### Define Remotion Composition with Bar Waveform

Source: https://github.com/reactvideoeditor/clippkit/blob/main/apps/docs/content/docs/ui/(components)/audio-waveforms/bar-waveform.mdx

Integrate the BarWaveform component into your Remotion project by importing it and defining a Composition. Ensure the import path matches your project structure. This example shows basic props for customization.

```tsx
import { Player } from "@remotion/player";
import { Audio } from "remotion";

import BarWaveform from "@/components/clippkit/bar-waveform"; // Assuming you placed it in src/components/clippkit

// Example audio source
const MEDIA_SRC = "YOUR_AUDIO_SOURCE_URL_HERE"; // e.g., a public URL to an mp3 file

export default function MyVideoComposition() {
  // You would typically use useAudioData here if MEDIA_SRC is dynamic or needs processing
  // For simplicity in this example, we'll assume direct usage if BarWaveform handles it internally
  // or audioData is passed via inputProps if needed.

  const barWaveformProps = {
    numberOfSamples: 50,
    barColor: "lightgreen",
    waveAmplitude: 100,
    waveSpeed: 8,
    barWidth: 6,
    barGap: 2,
    // audioData: audioData, // Pass if useAudioData is used in this component
  };

  return (
    <Player
      component={BarWaveform} // Or a wrapper component if using <Audio> alongside
      inputProps={barWaveformProps}
      durationInFrames={300} // Adjust based on your audio duration
      compositionWidth={640}
      compositionHeight={360}
      fps={30}
      style={{
        width: "100%",
        height: "100%",
      }}
      autoPlay
      controls
      loop
    />
  );
}
```

--------------------------------

### Clone Clippkit Repository

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Clone your forked repository to your local machine. Replace <YOUR_USERNAME> with your GitHub username.

```bash
git clone https://github.com/<YOUR_USERNAME>/clippkit.git
```

--------------------------------

### Register Component in Documentation Registry

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Add your new component to the `registry-components.ts` file. The `name` should be in kebab-case, and the `path` should be relative to the registry's default directory.

```typescript
// ... existing imports and components array
export const components: Registry = [
  // ... existing components
  {
    name: "example-component", // kebab-case name
    type: "registry:component",
    files: [
      {
        path: "ui/example-component.tsx", // Path relative to apps/docs/registry/default/
        type: "registry:component",
      },
    ],
  },
];
```

--------------------------------

### Create New Branch

Source: https://github.com/reactvideoeditor/clippkit/blob/main/CONTRIBUTING.md

Create a new branch for your feature or component.

```bash
git checkout -b my-new-component-branch
```