DOCSEARCHbyAlgolia
Submit Docs

uvcanvas

repository·main·Indexed 23 days ago

https://github.com/latentcat/uvcanvas

An open source React.js component library by Latent Cat for creating beautifully shaded canvas elements. It features WebGL-powered components such as Lumiflex, Novatrix, Opulento, and Tranquiluxe, as well as a comprehensive system for MDX-based presentations including a Slides container, navigation state management via Jotai atoms, and layout components like Cover and Background.

Tokens
6.7K
Snippets
21
Records
62
Agent score
80%

What's inside uvcanvas

  2. Introduction to UVCanvas

    main

    UVCanvas is a React component library designed to provide a rich set of dynamic canvases. It is specifically optimized for creating web backgrounds, wallpapers, and design materials.

    Key features include:

    • Zero configuration
    • High performance
    • Optimized tree shaking
    • Comprehensive documentation
    • Open source architecture

  3. Write MDX for Slides with steps and backgrounds

    main

    Slides use standard MDX syntax. You can define pages using --- separators.

    Key Features:

    • Pages: Separated by ---.
    • Steps: Use export const metadata = { step: N } to define animation steps within a page.
    • Props: Access props.currentPage and props.currentStep within the MDX to create dynamic content.
    • Backgrounds: Wrap content in a <Background> component to use UVCanvas backgrounds (e.g., <Tranquiluxe />).
    # 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>

---

  4. Implement animations in UVSlides

    main

    UVSlides supports step-based animations within a single slide. You can track the current animation step using the props.currentStep variable provided by the component context. This allows you to conditionally render or animate elements based on the user's progress through the slide's animation sequence.

    To define the total number of steps for a slide, you can export a metadata object containing a step key.

    export const metadata = {
  step: 3,
}

# Animation

Steps { props.currentStep + 1 } / 3

<TestAnimation step={props.currentStep} />

  5. Create slide content using MDX

    main

    Slides in UVCanvas are authored using MDX. Each slide is separated by a horizontal rule (---). You can use standard Markdown for text and headings, and embed React components directly into the slide content.

    To define metadata for a specific slide (such as a step number), export a metadata constant within the MDX file. This metadata is accessible via props during rendering.

    ---

export const metadata = {
  step: 3,
}

# Slide Title

Some Text...

<TestAnimation step={props.currentStep} />

---

  8. Use UVSlides for MDX-based presentations

    main

    UVSlides is an advanced MDX component designed for creating presentations. It uses MDX syntax to define slides, where --- acts as the page separator. You can use specialized components like <Cover /> for title slides and <Background /> to wrap content with specific visual styles or background components.

    Key Components

    • <Cover />: Defines the title, subtitle, and footer for a slide.
    • <Background />: Wraps slide content and accepts a className prop (e.g., to adjust opacity) and can contain background-specific components like <Tranquiluxe />, <Venturo />, etc.

    Navigation and Controls

    Once the slides are rendered, the following interactions are supported:

    • Focus: Press the slides element to focus.
    • Navigation: Use the left and right arrow keys to switch between pages and animation steps.
    • Fullscreen: Press the f key or double-click the slides to toggle fullscreen mode.
    <Cover
  title="Introducing UVSlides"
  subtitle="Advanced MDX Slides Component"
  footer="Latent Cat"
/>

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

---

# Page Title

Some content here.

  9. Run the UVCanvas development server

    main

    To start the development environment, run the development server command using your preferred package manager. Once running, you can view the application at http://localhost:3000. The application uses next/font for font optimization and supports hot-reloading; modifying app/page.tsx will automatically update the page in your browser.

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

  11. Use the Slides component

    main

    The Slides component is a headless slides implementation inspired by Slidev. It converts MDX and JSX into React components, supports animations via steps, and integrates seamlessly with UVCanvas backgrounds.

    Interactions

    • Focus: Press the slides element to focus.
    • Navigation: Use left and right arrow keys to switch between pages and animation steps.
    • Fullscreen: Press the f key or double-click the slides to toggle fullscreen mode.
    import "uvcanvas/dist/components/slides/default_components/styles.css";
import {
  Lumiflex,
  Zenitho,
  Novatrix,
  Velustro,
  Tranquiluxe,
  Opulento,
  Slides,
  defaultComponents
} from "uvcanvas";

// ... prepare mdxContents using sliceMdxString ...

<Slides
  mdx={mdxContents}
  components={{
    ...defaultComponents, // includes standard HTML elements like h1, p, etc.
    Lumiflex,
    Zenitho,
    Novatrix,
    Velustro,
    Tranquiluxe,
    Opulento,
    TestAnimation, // custom component for animations
  }}
/>