### Install Site Dependencies

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/contributing/page.mdx

Navigate to the 'site' directory and install its dependencies using yarn.

```bash
cd ../site
yarn
```

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

### Install uvcanvas with npm

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/installation/page.mdx

Use this command to install uvcanvas using npm.

```bash
npm install uvcanvas
```

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

### Install Core Dependencies

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/contributing/page.mdx

Navigate to the 'core' directory and install its dependencies using yarn.

```bash
cd core
yarn
```

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

### Install uvcanvas with pnpm

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/installation/page.mdx

Use this command to install uvcanvas using pnpm.

```bash
pnpm install uvcanvas
```

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

### Install uvcanvas with yarn

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/installation/page.mdx

Use this command to install uvcanvas using yarn.

```bash
yarn add uvcanvas
```

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

### Install UVCanvas package

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Commands to install the library using common package managers.

```bash
# Using npm
npm install uvcanvas

# Using yarn
yarn add uvcanvas

# Using pnpm
pnpm install uvcanvas
```

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

### Opulento component usage

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Examples for basic rendering and custom color application.

```tsx
import { Opulento } from "uvcanvas";

// Basic usage
function OpulentoExample() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Opulento />
    </div>
  );
}

// With custom purple color
function CustomOpulento() {
  return (
    <div style={{ width: "400px", height: "300px" }}>
      <Opulento color={[0.5, 0.2, 0.8]} />
    </div>
  );
}
```

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

### Run Development Server

Source: https://github.com/latentcat/uvcanvas/blob/main/site/README.md

Use one of these commands to start the development server for your Next.js project. Open http://localhost:3000 in your browser to view the application.

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

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

### Run Site Development Server

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/contributing/page.mdx

Start the development server for the 'site' package (documentation). This command is typically run in a separate terminal.

```bash
cd site
yarn dev
```

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

### Run Core Development Server

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/contributing/page.mdx

Start the development server for the 'core' package. This command is typically run in one terminal.

```bash
cd core
yarn dev
```

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

### Velustro component usage

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Examples for basic rendering and applying custom HTML attributes or colors.

```tsx
import { Velustro } from "uvcanvas";

// Basic usage
function VelustroExample() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Velustro />
    </div>
  );
}

// With custom color and HTML div attributes
function StyledVelustro() {
  return (
    <div style={{ width: "600px", height: "400px" }}>
      <Velustro
        uColor={[0.6, 0.3, 0.7]}
        className="my-canvas"
        id="main-background"
      />
    </div>
  );
}
```

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

### Novatrix component usage

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Examples for default and custom-colored resolution-aware shader effects.

```tsx
import { Novatrix } from "uvcanvas";

// Basic usage with default color
function NovatrixExample() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Novatrix />
    </div>
  );
}

// With custom color (RGB values from 0-1)
function CustomNovatrix() {
  return (
    <div style={{ width: "500px", height: "300px" }}>
      <Novatrix color={[0.1, 0.5, 0.8]} />
    </div>
  );
}
```

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

### Zenitho component usage

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Examples for full-page backgrounds and constrained card-based layouts.

```tsx
import { Zenitho } from "uvcanvas";

// Full-page animated gradient background
function GradientBackground() {
  return (
    <div style={{
      position: "fixed",
      top: 0,
      left: 0,
      width: "100vw",
      height: "100vh",
      zIndex: -1
    }}>
      <Zenitho />
    </div>
  );
}

// Card with gradient background
function GradientCard() {
  return (
    <div style={{
      position: "relative",
      width: "400px",
      height: "300px",
      borderRadius: "12px",
      overflow: "hidden"
    }}>
      <Zenitho />
      <div style={{
        position: "relative",
        zIndex: 1,
        padding: "20px",
        color: "white"
      }}>
        <h2>Welcome</h2>
        <p>Content over animated gradient</p>
      </div>
    </div>
  );
}
```

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

### Slides Component Presentation Example

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Create MDX-based presentations with animated backgrounds using the Slides component. It supports keyboard navigation and fullscreen.

```tsx
import {
  Slides,
  sliceMdxString,
  defaultComponents,
  SlidesActionButton,
  Lumiflex,
  Novatrix,
  Tranquiluxe
} from "uvcanvas";
import "uvcanvas/dist/components/slides/default_components/styles.css";

// MDX content with multiple slides separated by ---
const mdxString = `
# Welcome

Introduction slide with animated background

<Background className="opacity-70">
  <Tranquiluxe />
</Background>

---

export const metadata = {
  step: 3,
}

# Page {props.currentPage + 1} Step {props.currentStep + 1}

- First point (appears on step 1)
- Second point (appears on step 2)
- Third point (appears on step 3)

<Background className="opacity-60">
  <Novatrix />
</Background>

---

# Final Slide

Thank you!

<Background>
  <Lumiflex />
</Background>
`;

function PresentationExample() {
  // Parse MDX string into slide modules
  const mdxContents = sliceMdxString(mdxString);

  return (
    <div style={{ width: "100%", maxWidth: "1200px", margin: "0 auto" }}>
      <Slides
        mdx={mdxContents}
        components={{
          ...defaultComponents,  // h1, p, ul, ol, li, Cover, Background
          Lumiflex,
          Novatrix,
          Tranquiluxe,
        }}
      >
        {/* Navigation controls */}
        <SlidesActionButton
          variant="left"
          style={{
            position: "absolute",
            left: "20px",
            top: "50%",
            transform: "translateY(-50%)",
            cursor: "pointer"
          }}
        >
          ← Previous
        </SlidesActionButton>
        <SlidesActionButton
          variant="right"
          style={{
            position: "absolute",
            right: "20px",
            top: "50%",
            transform: "translateY(-50%)",
            cursor: "pointer"
          }}
        >
          Next →
        </SlidesActionButton>
      </Slides>
    </div>
  );
}
```

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

### Import Xenon Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/xenon/page.mdx

Import the Xenon component from the 'uvcanvas' library before use. Ensure the library is installed.

```tsx
import { Xenon } from "uvcanvas"
```

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

### Lumiflex component usage

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Examples showing default rendering, custom RGB colors, and manual animation control.

```tsx
import { Lumiflex } from "uvcanvas";

// Basic usage - renders with default purple color
function BasicExample() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Lumiflex />
    </div>
  );
}

// With custom color (RGB values from 0-1)
function CustomColorExample() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Lumiflex color={[0.8, 0.2, 0.4]} />
    </div>
  );
}

// With animation controls
function ControlledExample() {
  const [time, setTime] = useState(0);

  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Lumiflex
        time={time}           // Manual time control
        speed={1.5}           // Animation speed multiplier
        onReady={() => console.log("Canvas ready")}
      />
      <button onClick={() => setTime(t => t + 10)}>Advance Time</button>
    </div>
  );
}
```

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

### Import Serenex Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/serenex/page.mdx

Import the Serenex component from the uvcanvas library before use. No additional setup is required.

```tsx
import { Serenex } from "uvcanvas"
```

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

### Import Tranquiluxe Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/tranquiluxe/page.mdx

Import the Tranquiluxe component from the 'uvcanvas' library. Ensure the library is installed.

```tsx
import { Tranquiluxe } from "uvcanvas"
```

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

### Import Quilluxe Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/quilluxe/page.mdx

Import the Quilluxe component from the uvcanvas library before use. Ensure the library is installed.

```tsx
import { Quilluxe } from "uvcanvas"

```

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

### Render Quilluxe Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/quilluxe/page.mdx

Basic rendering of the Quilluxe component. No additional props are shown in this example.

```tsx
<Quilluxe />

```

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

### MDX Content for Slides

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/slides/page.mdx

Example MDX content structure for slides, including page content, background components, and metadata for steps. Use this to define the content of your presentation slides.

```md
# Page { props.currentPage + 1 }

Test

<Demo />

<Background className="opacity-70">
  <Tranquiluxe />
</Background>

---

export const metadata = {
  step: 3,
}

# Page { props.currentPage + 1 } Step { props.currentStep + 1 }

Some Text...

<TestAnimation step={props.currentStep} />

<Background className="opacity-60">
  <Novatrix />
</Background>

---

...
```

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

### Render Tranquiluxe Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/tranquiluxe/page.mdx

Render the Tranquiluxe component within your React application. No additional props are shown in this basic example.

```tsx
<Tranquiluxe />
```

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

### Render Xenon Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/xenon/page.mdx

Include the Xenon component within your React application's JSX to render it. No additional props are shown in this basic example.

```tsx
<Xenon />
```

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

### Navigate to Project Directory

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/contributing/page.mdx

Change your current directory to the root of the cloned uvcanvas project.

```bash
cd uvcanvas
```

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

### Import and Metadata Configuration

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/page.mdx

Defines the page metadata and imports the ComponentGallery wrapper for use in the component gallery page.

```typescript
import {ComponentGallery} from "@/components/wrappers/ComponentGallery";
export const metadata = {
    title: 'All Components',
}
```

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

### Clone UVCanvas Repository

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/contributing/page.mdx

Clone the UVCanvas repository to your local machine to begin development. Ensure you replace 'your-username' with your GitHub username.

```bash
git clone https://github.com/your-username/uvcanvas.git
```

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

### Import Slides Components and Styles

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/slides/page.mdx

Import necessary components and default styles for the Slides component. Ensure all required UI elements and styles are available.

```tsx
import "uvcanvas/dist/components/slides/default_components/styles.css"
import {
  Lumiflex,
  Zenitho,
  Novatrix,
  Velustro,
  Tranquiluxe,
  Opulento,
  Slides,
  defaultComponents
} from "uvcanvas";
```

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

### Import sliceMdxString utility

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/slides/page.mdx

Import the utility function to process MDX strings. This is the first step in preparing your MDX content for the Slides component.

```tsx
import { sliceMdxString } from "uvcanvas";
```

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

### Create a New Branch

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/contributing/page.mdx

Create a new Git branch for your feature or bug fix. Replace 'my-new-branch' with a descriptive name for your branch.

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

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

### Import Artiflexa Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/artiflexa/page.mdx

Import the Artiflexa component from the uvcanvas package.

```tsx
import { Artiflexa } from "uvcanvas"
```

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

### Import and Use Venturo Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/venturo/page.mdx

Import the Venturo component from the uvcanvas package and render it within your application.

```tsx
import { Venturo } from "uvcanvas"
```

```tsx
<Venturo />
```

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

### Import Zenitho Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/zenitho/page.mdx

Import the Zenitho component from the uvcanvas library to use it in your project.

```tsx
import { Zenitho } from "uvcanvas"
```

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

### Import Lumiflex Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/lumiflex/page.mdx

Import the Lumiflex component from the uvcanvas package.

```tsx
import { Lumiflex } from "uvcanvas"
```

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

### Import Luminastra Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/luminastra/page.mdx

Import the Luminastra component from the uvcanvas package.

```tsx
import { Luminastra } from "uvcanvas"
```

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

### Importing the Novatrix component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/novatrix/page.mdx

Import the Novatrix component from the uvcanvas package to use it in your project.

```tsx
import { Novatrix } from "uvcanvas"
```

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

### Import Velustro Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/velustro/page.mdx

Import the Velustro component from the uvcanvas package.

```tsx
import { Velustro } from "uvcanvas"
```

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

### Implement Styled Presentation with defaultComponents

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Uses sliceMdxString to parse MDX content and renders it within a Slides component using pre-styled defaultComponents.

```tsx
import { Slides, defaultComponents, sliceMdxString, Zenitho } from "uvcanvas";
import "uvcanvas/dist/components/slides/default_components/styles.css";

const mdxString = `
<Cover
  title="My Presentation"
  subtitle="A journey through UVCanvas"
  header="Conference 2024"
  footer="by Author Name"
/>

<Background>
  <Zenitho />
</Background>

---

# Regular Slide

- Bullet point one
- Bullet point two
- Bullet point three

1. Numbered item
2. Another item
`;

function StyledPresentation() {
  const slides = sliceMdxString(mdxString);

  return (
    <Slides
      mdx={slides}
      components={{
        ...defaultComponents,  // Includes: h1, li, ol, ul, Cover, Background
        Zenitho,
      }}
    />
  );
}
```

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

### Venturo Component Basic Usage

Source: https://context7.com/latentcat/uvcanvas/llms.txt

The Venturo component offers animated shader visuals. Basic usage requires no props.

```tsx
import { Venturo } from "uvcanvas";

// Basic usage
function VenturoExample() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Venturo />
    </div>
  );
}
```

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

### Render Background Components

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/dev/slides.raw.mdx

Usage of background animation components wrapped in a container with opacity settings.

```jsx
<Background className="opacity-50">
  <Tranquiluxe />
</Background>
```

```jsx
<Background className="opacity-50">
  <Novatrix />
</Background>
```

```jsx
<Background className="opacity-50">
  <Zenitho />
</Background>
```

```jsx
<Background className="opacity-50">
  <Velustro />
</Background>
```

```jsx
<Background className="opacity-50">
  <Lumiflex />
</Background>
```

```jsx
<Background className="opacity-50">
  <Opulento />
</Background>
```

```jsx
<Background className="opacity-50">
  <Xenon />
</Background>
```

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

### Import and Use Grandeurio Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/grandeurio/page.mdx

Import the component from the uvcanvas package and render it within your JSX.

```tsx
import { Grandeurio } from "uvcanvas"
```

```tsx
<Grandeurio />
```

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

### Import and Use Opulento Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/opulento/page.mdx

Import the component from the uvcanvas package and render it within your JSX.

```tsx
import { Opulento } from "uvcanvas"
```

```tsx
<Opulento />
```

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

### Render Slides Component with Custom Components

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/slides/page.mdx

Integrate the Slides component into your application, passing the processed MDX content and a map of custom components. This allows for dynamic rendering of slide content.

```tsx
<Slides
  mdx={mdxContents}
  components={{
    ...defaultComponents, // including h1, p, etc.
    Lumiflex,
    Zenitho,
    Novatrix,
    Velustro,
    Tranquiluxe,
    Opulento,
    TestAnimation, // page 2
  }}
>
```

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

### Basic Usage of Lumiflex Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/installation/page.mdx

Import and render the Lumiflex component in your React application.

```tsx
import { Lumiflex } from "uvcanvas"

export default function Home() {
  return (
    <div>
      <Lumiflex />
    </div>
  )
}
```

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

### Component Gallery Usage

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/page.mdx

Renders the ComponentGallery component within the page content.

```jsx
<ComponentGallery/>
```

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

### Venturo Component with Speed Control

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Control the animation speed of the Venturo component using the 'speed' prop and receive initialization callbacks with 'onReady'.

```tsx
// With animation speed control
function ControlledVenturo() {
  return (
    <div style={{ width: "600px", height: "400px" }}>
      <Venturo
        speed={2.0}          // Double speed animation
        onReady={() => console.log("Venturo canvas initialized")}
      />
    </div>
  );
}
```

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

### Implement Artiflexa Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/artiflexa/page.mdx

Render the Artiflexa component within a React application.

```tsx
<Artiflexa />
```

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

### Define Metadata for Animation Steps

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/slides/slides.raw.mdx

Sets the current animation step count for the component metadata.

```javascript
export const metadata = {
  step: 3,
}
```

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

### Render Test Animation

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/dev/slides.raw.mdx

Component for rendering a test animation based on the current step property.

```jsx
<TestAnimation step={props.currentStep} />
```

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

### Render Lumiflex Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/lumiflex/page.mdx

Basic implementation of the Lumiflex component within a React application.

```tsx
<Lumiflex />
```

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

### Xenon Component as Hero Background

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Use the Xenon component as a full-screen background for hero sections, ensuring it scales with resolution.

```tsx
// As a hero section background
function HeroSection() {
  return (
    <section style={{
      position: "relative",
      width: "100%",
      height: "600px"
    }}>
      <div style={{ position: "absolute", inset: 0 }}>
        <Xenon />
      </div>
      <div style={{
        position: "relative",
        zIndex: 1,
        padding: "60px",
        color: "white"
      }}>
        <h1>Welcome to Our Platform</h1>
      </div>
    </section>
  );
}
```

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

### Xenon Component Basic Usage

Source: https://context7.com/latentcat/uvcanvas/llms.txt

The Xenon component provides resolution-aware animated shader effects. Basic usage involves rendering the component without any props.

```tsx
import { Xenon } from "uvcanvas";

// Basic usage
function XenonExample() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Xenon />
    </div>
  );
}
```

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

### Tranquiluxe Component Basic Usage

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Use the Tranquiluxe component for basic animated visuals. It requires no props for default behavior.

```tsx
import { Tranquiluxe } from "uvcanvas";

// Basic usage
function TranquiluxeExample() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Tranquiluxe />
    </div>
  );
}
```

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

### Render Serenex Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/serenex/page.mdx

Render the Serenex component by including it in your JSX. This is the basic usage pattern.

```tsx
<Serenex />
```

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

### sliceMdxString Utility for MDX Parsing

Source: https://context7.com/latentcat/uvcanvas/llms.txt

The sliceMdxString utility parses a raw MDX string into an array of MDX modules, suitable for the Slides component. It handles slides separated by '---' delimiters.

```tsx
import { sliceMdxString } from "uvcanvas";

// Parse MDX content from a string
const rawMdx = `
# Slide 1

Content here

---

# Slide 2

More content

---

export const metadata = { step: 2 }

# Slide 3

Final slide
`;

// Returns array of MDXModule objects
const slides = sliceMdxString(rawMdx);
console.log(slides.length); // 3

// Each slide can have metadata for step-based animations
// Access via slides[i].metadata
```

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

### Tranquiluxe Component with Custom Color

Source: https://context7.com/latentcat/uvcanvas/llms.txt

Customize the calming background color of the Tranquiluxe component by passing an array of RGB values.

```tsx
// Calm blue background
function CalmBackground() {
  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <Tranquiluxe color={[0.2, 0.4, 0.6]} />
    </div>
  );
}
```

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

### Render Zenitho Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/zenitho/page.mdx

Render the Zenitho component within your JSX structure.

```tsx
<Zenitho />
```

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

### Process MDX String

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/slides/page.mdx

Use sliceMdxString to convert a raw MDX string into a format usable by the Slides component. This function parses the MDX content.

```tsx
const mdxContents = sliceMdxString(mdxString)
```

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

### Add Navigation Controls to Slides

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/slides/page.mdx

Incorporate action buttons for slide navigation (left/right). These buttons typically wrap the Slides component and trigger navigation events.

```tsx
<Slides {...}>
  <SlidesActionButton
    variant="left"
    className="..."
  >
    <ArrowLeftIcon className="..."/>
  </SlidesActionButton>
  <SlidesActionButton
    variant="right"
    className="..."
  >
    <ArrowRightIcon className=""/>
  </SlidesActionButton>
</Slides>
```

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

### Render Luminastra Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/luminastra/page.mdx

Use the Luminastra component within your JSX.

```tsx
<Luminastra />
```

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

### Render Velustro Component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/velustro/page.mdx

Use the Velustro component within your JSX.

```tsx
<Velustro />
```

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

### Rendering the Novatrix component

Source: https://github.com/latentcat/uvcanvas/blob/main/site/src/app/docs/components/novatrix/page.mdx

Include the Novatrix component within your JSX to render the visual effect.

```tsx
<Novatrix />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.