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

npm install radiant-canvas

// app/page.tsx (Next.js) or src/App.tsx (Vite)
import { PageTemplate } from "radiant-canvas";
import "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)

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

Customization

<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

import {
  // Template
  PageTemplate,

  // Navigation
  Navbar,
  ThemeToggle,

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

  // Sections
  WhyChooseUs,
  ClientsSection,
  ContactSection,

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

Example: Custom Layout

import { Navbar, HeroCard, WhyChooseUs, ThemeToggle } from "radiant-canvas";
import "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

import { LiquidGradientBackground } from "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:

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 "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