It's a CANVAS PARTY!

Introducing Canvas Party, a NPM package i made a while back.

table of content

1. Overview
2. Basic Usage
3. Frameworks integration
   • with React
   • with Vue
4. Basic Usage
5. Why i made it?
6. Summary

Overview

Canvas Party is an HTML canvas animations library. It was created for adding highly interactive backgrounds with ease. It has full support for both Vue and React and a documentation guide with examples.
Check out the Canvas Party website here.

Installation

To install simply run this command at the root directory of your project.

With npm:

$ npm install canvas-party

With yarn

$ yarn add canvas-party

If you are using a JavaScript framework see the Frameworks integration.

Basic usage

To add Canvas Party to your app first import the useCanvasParty function from canvas-party, this function
will receive two arguments:

1. Wrapper element in which the canvas will append to.
2. Options object that will specify the type and optional customizations.

This will return an object with a custom canvas element and some methods related to it.

import { useCanvasParty } from 'canvas-party'

const wrapper = document.createElement('div')

const canvasParty = useCanvasParty(wrapper, {
  type: 'confetti',
  options: {
    colors: ['#A3F7B5', '#EB5160', '#B0F2B4'],
    count: 450,
  },
})

wrapper.appendChild(canvasParty.canvas)

Frameworks Integration

Canvas party has full support for both Vue and React.

With React

installation

$ npm install @cavnas-party/react

Then import the CanvasParty component and give it the desired template type.

import { useState } from 'react'
import CanvasParty from '@canvas-party/react'

function reactApp() {
const [canvasType, setCanvasType] = useState('confetti')

  return (
    <>
      <button onClick={() => setCanvasType('trippy')}></button>
      <CanvasParty type={canvasType} />
    </>
  )
}

export default reactApp

With Vue

installation

$ npm install @cavnas-party/vue

Then import the CanvasParty component and give it the desired template type.

<script setup>
import { ref, reactive } from 'vue'
import CanvasParty from '@canvas-party/vue'

const canvasType = ref('confetti')
const canvasOptions = reactive({
  colors: ['#399E5A', '#5ABCB9', '#63E2C6'],
  count: 350,
})
</script>

<template>
  <div>
    <CanvasParty :type="canvasType" :options="options" />
  </div>
</template>

Why I made it?

In my short time of building websites, I stumbled upon a lot of cool looking sites with beautiful designs. Those sites more often than not have some kind of "wow" effect, whether it's a cool scrolling behavior, complex typography animation or lively backgrounds.

Those backgrounds in particularly capture my eye so I started to dig into their code. I asked myself "how can I make these kind of backgrounds?" I knew immediately that I was looking at a canvas - a tool with unlimited potential in the right hands.

I wanted it to be as easy as adding a chart component in React, not being bothered by all the logic, just getting a background with minimal effort.

Summary

Canvas party is an amazing tool for adding "spice" to your next project, with a variety of templates and customization you could upgrade your application in a matter of seconds.
However, it's still a relativity new project and expected to go through changes in the future.

Thank you!

Comments

[Al - Naucode]

Hey! Thank you for this, I liked it ;) keep writing, you got my follow!