npm package: @rayvelez/radiant-canvas
Description: Premium animated background components, cards, sections, and page templates with shader effects, Three.js particles, and Framer Motion animations
Latest version: 1.0.3

# @rayvelez/radiant-canvas

Premium animated landing page components with shader effects, Three.js particles, Framer Motion animations, and CSS 3D transforms. Built for React with full TypeScript support and Next.js App Router compatibility.

## Quick Start - Full Landing Page

```bash
npm install @rayvelez/radiant-canvas
```

```tsx
// app/page.tsx (Next.js) or src/App.tsx (Vite)
import { PageTemplate } from "@rayvelez/radiant-canvas";
import "@rayvelez/radiant-canvas/styles.css";

export default function Home() {
  return <PageTemplate />;
}
```

**That's it!** This renders a complete, animated landing page with:
- Navbar with navigation links
- Hero section with shader background
- Animated cards (motion, quote, team, gradient)
- "Why Choose Us" section with feature cards
- Clients section with animated logos
- Contact form
- Theme toggle (dark/light mode)

## Tailwind Setup (Required)

```js
// tailwind.config.js
module.exports = {
  presets: [require("@rayvelez/radiant-canvas/tailwind-preset")],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@rayvelez/radiant-canvas/**/*.{js,ts,jsx,tsx}",
  ],
};
```

## Customization

```tsx
<PageTemplate
  navbar={{
    logo: "Acme Studio",
    ctaLabel: "Get Started",
    navItems: [
      { label: "Work", href: "#work" },
      { label: "About", href: "#about" },
    ],
  }}
  heroCard={{
    titleLines: ["Design", "That", "Converts"],
    ctaText: "Start Project",
  }}
  contactSection={{
    title: "Let's Talk",
    onSubmit: (data) => console.log(data),
  }}
  showThemeToggle={true}
/>
```

---

## All Components

### Templates

| Component | Description |
|-----------|-------------|
| `PageTemplate` | Complete landing page with all sections |

### Navigation

| Component | Description |
|-----------|-------------|
| `Navbar` | Animated nav with logo, links, and CTA |
| `ThemeToggle` | Floating dark/light mode toggle |

### Cards

| Component | Description |
|-----------|-------------|
| `HeroCard` | Hero section with shader background on hover |
| `MotionCard` | Scattered animated letters |
| `QuoteCard` | Quote display with attribution |
| `TeamCard` | Team member avatars |
| `GradientCard` | 3D layered sphere background card |

### Sections

| Component | Description |
|-----------|-------------|
| `WhyChooseUs` | Feature cards with animated stats |
| `ClientsSection` | Client logos with shader background |
| `ContactSection` | Contact form with select and checkbox |

### Backgrounds

| Component | Description |
|-----------|-------------|
| `LiquidGradientBackground` | Dynamic liquid gradient (5 color schemes) |
| `HeroShaderBackground` | WebGL2 hypnotic shader |
| `ParticleWaveBackground` | Perlin noise particle wave |
| `PolymathShaderBackground` | 3D sphere with particles |
| `LayeredSphereBackground` | Interactive CSS 3D sphere |

---

## Individual Component Usage

```tsx
import {
  // Template
  PageTemplate,

  // Navigation
  Navbar,
  ThemeToggle,

  // Cards
  HeroCard,
  MotionCard,
  QuoteCard,
  TeamCard,
  GradientCard,

  // Sections
  WhyChooseUs,
  ClientsSection,
  ContactSection,

  // Backgrounds
  LiquidGradientBackground,
  HeroShaderBackground,
  ParticleWaveBackground,
  PolymathShaderBackground,
  LayeredSphereBackground,
} from "@rayvelez/radiant-canvas";
```

### Example: Custom Layout

```tsx
import { Navbar, HeroCard, WhyChooseUs, ThemeToggle } from "@rayvelez/radiant-canvas";
import "@rayvelez/radiant-canvas/styles.css";

export default function Home() {
  return (
    <div className="min-h-screen p-4 md:p-8">
      <Navbar logo="MyBrand" />
      <main className="grid grid-cols-1 md:grid-cols-12 gap-4 max-w-7xl mx-auto">
        <HeroCard titleLines={["Build", "Something", "Great"]} />
        <WhyChooseUs title="Why Us?" />
      </main>
      <ThemeToggle />
    </div>
  );
}
```

### Example: Background Only

```tsx
import { LiquidGradientBackground } from "@rayvelez/radiant-canvas";

export default function Hero() {
  return (
    <div className="relative h-screen">
      <LiquidGradientBackground scheme={2} />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-6xl font-bold text-white">Hello World</h1>
      </div>
    </div>
  );
}
```

---

## Component Props

### PageTemplate

| Prop | Type | Description |
|------|------|-------------|
| `navbar` | `NavbarProps` | Navbar configuration |
| `heroCard` | `HeroCardProps` | Hero card configuration |
| `motionCard` | `MotionCardProps` | Motion card configuration |
| `quoteCard` | `QuoteCardProps` | Quote card configuration |
| `teamCard` | `TeamCardProps` | Team card configuration |
| `gradientCard` | `GradientCardProps` | Gradient card configuration |
| `whyChooseUs` | `WhyChooseUsProps` | Why Choose Us section configuration |
| `clientsSection` | `ClientsSectionProps` | Clients section configuration |
| `contactSection` | `ContactSectionProps` | Contact section configuration |
| `showThemeToggle` | `boolean` | Show theme toggle (default: true) |
| `themeToggle` | `ThemeToggleProps` | Theme toggle configuration |
| `className` | `string` | Container class |

### Navbar

| Prop | Type | Default |
|------|------|---------|
| `logo` | `string` | `"matcha"` |
| `navItems` | `NavItem[]` | `[{label: "projects"}, ...]` |
| `ctaLabel` | `string` | `"contact us"` |
| `onCtaClick` | `() => void` | - |
| `onNavItemClick` | `(item: NavItem) => void` | - |

### HeroCard

| Prop | Type | Default |
|------|------|---------|
| `titleLines` | `string[]` | `["Make", "something", "great"]` |
| `ctaText` | `string` | `"Let's go"` |
| `imageSrc` | `string` | Default image URL |
| `onCtaClick` | `() => void` | - |

### ContactSection

| Prop | Type | Default |
|------|------|---------|
| `headerLabel` | `string` | `"/ Get In Touch"` |
| `title` | `string` | `"Schedule an Appointment"` |
| `services` | `ServiceOption[]` | Default services |
| `onSubmit` | `(data: ContactFormData) => void` | Console log |

### LiquidGradientBackground

| Prop | Type | Default |
|------|------|---------|
| `scheme` | `1 \| 2 \| 3 \| 4 \| 5` | `1` |
| `speed` | `number` | `1.5` |
| `intensity` | `number` | `1.8` |

---

## TypeScript

All types are exported:

```tsx
import type {
  // Template
  PageTemplateProps,

  // Navigation
  NavbarProps,
  NavItem,
  ThemeToggleProps,

  // Cards
  HeroCardProps,
  MotionCardProps,
  MotionCardLetter,
  QuoteCardProps,
  TeamCardProps,
  Designer,
  GradientCardProps,

  // Sections
  WhyChooseUsProps,
  Feature,
  ClientsSectionProps,
  ContactSectionProps,
  ServiceOption,
  ContactFormData,

  // Backgrounds
  LiquidGradientBackgroundProps,
  HeroShaderBackgroundProps,
  ParticleWaveBackgroundProps,
  PolymathShaderBackgroundProps,
  LayeredSphereBackgroundProps,
} from "@rayvelez/radiant-canvas";
```

---

## Dependencies

The package includes these dependencies:
- `framer-motion` - Animations
- `lucide-react` - Icons
- `@radix-ui/react-select` - Select component
- `@radix-ui/react-checkbox` - Checkbox component

Peer dependencies (you provide):
- `react` ^18.0.0 || ^19.0.0
- `react-dom` ^18.0.0 || ^19.0.0
- `tailwindcss` ^3.0.0 (optional)

Optional (for shader backgrounds):
- `three` ^0.160.0

---

## License

MIT