Aceternity UI

https://ui.aceternity.com/components
Admin
Aceternity UI is a comprehensive component library offering 70+ premium React components and...
Tokens:5,100
Snippets:239
Trust Score:8
Update:5 months ago
Show doc for...
Tokens:
Raw
### Webcam Pixel Grid Installation

Source: https://ui.aceternity.com/components/webcam-pixel-grid

Install the Webcam Pixel Grid component using npm.

```APIDOC
## Installation

### Run the following command

```bash
npx shadcn@latest add @aceternity/webcam-pixel-grid
```
```

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

### Wavy Background Component Installation

Source: https://ui.aceternity.com/components/wavy-background

Install the Wavy Background component using the shadcn CLI.

```APIDOC
## Installation

### CLI

Run the following command:

```bash
npx shadcn@latest add @aceternity/wavy-background
```
```

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

### Install Wobble Card Component

Source: https://ui.aceternity.com/components/wobble-card

Run this command to add the Wobble Card component to your project. Ensure you have shadcn-ui installed.

```bash
npx shadcn@latest add @aceternity/wobble-card
```

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

### Install World Map Component

Source: https://ui.aceternity.com/components/world-map

Use this command to add the World Map component to your project. Ensure you have shadcn-ui installed.

```bash
npx shadcn@latest add @aceternity/world-map
```

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

### Install Webcam Pixel Grid Component

Source: https://ui.aceternity.com/components/webcam-pixel-grid

Run this command to add the webcam pixel grid component to your project using shadcn. Ensure you have the shadcn CLI installed.

```bash
npx shadcn@latest add @aceternity/webcam-pixel-grid
```

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

### Typewriter Effect Component Example

Source: https://ui.aceternity.com/components/typewriter-effect

Demonstrates a basic implementation of the Typewriter Effect component. This example shows how to render text with a typing animation.

```bash
npx shadcn@latest add @aceternity/typewriter-effect-demo-2
```

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

### Install Typewriter Effect Component

Source: https://ui.aceternity.com/components/typewriter-effect

Run this command to add the Typewriter Effect component to your project. This is the primary method for installation.

```bash
npx shadcn@latest add @aceternity/typewriter-effect
```

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

### Install Wavy Background Component

Source: https://ui.aceternity.com/components/wavy-background

Run this command to add the Wavy Background component to your project using shadcn.

```bash
npx shadcn@latest add @aceternity/wavy-background

```

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

### Wavy Background Component Usage

Source: https://ui.aceternity.com/components/wavy-background

Example of how to use the Wavy Background component in your React application. Customize colors, speed, and other properties as needed.

```jsx
import { WavyBackground } from "@aceternity/wavy-background";

function MyComponent() {
  return (
    <WavyBackground
      className="max-w-4xl mx-auto pb-40"
      colors={["#38bdf8", "#818cf8", "#c084fc"]
      }
      waveHeight={25}
      backgroundFill="#000"
      speed="slow"
      waveOpacity={0.6}
    >
      <p className="text-4xl md:text-7xl font-bold inter-var text-white">
        Hero waves are cool
      </p>
      <p className="text-base md:text-lg mt-4 text-white">
        Leverage the power of canvas to create a beautiful hero section
      </p>
    </WavyBackground>
  );
}

```

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

### Download Noise Texture

Source: https://ui.aceternity.com/components/wobble-card

Download the `noise.webp` file from the provided link and place it in your project's `public` folder to enable the wobble effect.

```bash
npx shadcn@latest add @aceternity/wobble-card-demo
```

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

### Webcam Pixel Grid Props

Source: https://ui.aceternity.com/components/webcam-pixel-grid

Configuration options for the Webcam Pixel Grid component.

```APIDOC
## Props

| Prop| Type| Default| Description  
---|---|---|---
| gridCols| number| 64| Number of columns in the grid  
| gridRows| number| 48| Number of rows in the grid  
| maxElevation| number| 15| Maximum elevation for motion detection  
| motionSensitivity| number| 0.4| Motion sensitivity (0-1)  
| elevationSmoothing| number| 0.1| Smoothing factor for elevation transitions  
| colorMode| "webcam" | "monochrome"| "webcam"| Color mode: 'webcam' uses actual colors, 'monochrome' uses single color  
| monochromeColor| string| "#00ff88"| Base color when in monochrome mode  
| backgroundColor| string| "#0a0a0a"| Background color  
| mirror| boolean| true| Whether to mirror the webcam feed  
| gapRatio| number| 0.1| Gap between cells (0-1, fraction of cell size)  
| invertColors| boolean| false| Invert the colors  
| darken| number| 0| Darken factor (0-1, 0 = no darkening, 1 = fully dark)  
| borderColor| string| "#ffffff"| Border color for cells  
| borderOpacity| number| 0.08| Border opacity (0-1)  
| className| string| -| Additional class name  
| onWebcamError| (error: Error) => void| -| Callback when webcam access is denied  
| onWebcamReady| () => void| -| Callback when webcam is ready
```

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

### Wavy Background Component Props

Source: https://ui.aceternity.com/components/wavy-background

Configuration options for the Wavy Background component.

```APIDOC
## Wavy Background Component Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `children` | `any` | - | The content to be displayed on top of the wavy background. |
| `className` | `string` | - | The CSS class to apply to the content container. |
| `containerClassName` | `string` | - | The CSS class to apply to the main container. |
| `colors` | `string[]` | ["#38bdf8", "#818cf8", "#c084fc", "#e879f9", "#22d3ee"] | The colors of the waves. |
| `waveWidth` | `number` | 50 | The width of the waves. |
| `backgroundFill` | `string` | "black" | The background color. |
| `blur` | `number` | 10 | The blur effect applied to the waves. |
| `speed` | `"slow" | "fast"` | "fast" | The speed of the wave animation. |
| `waveOpacity` | `number` | 0.5 | The opacity of the waves. |
| `[key: string]` | `any` | - | Any other props not listed above. |
```
Tokens:
Raw