Hello Hacktoberfest 2022 contributors,
tsParticles is welcoming again all the Hacktoberfest participants with many activities, from updating documentation and readme files to complex code tasks working on canvas and optimization of the existing codebase.
tsparticles
/
tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
How can you help
First of all welcome to the Hacktoberfest 2022 and in the tsParticles repository. You can search for the Hacktoberfest tag in the project issues.
This is the url for lazy people: https://github.com/matteobruni/tsparticles/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest
This PR is another interesting one: https://github.com/matteobruni/tsparticles/pull/4360, it's about designing a new website, with a more modern look and improved UI/UX.
If you are not a coder, you can start from updating readme files, or update the documentation comments in the TypeScript files. You can open a PR without an issue, I will review them as soon as possible.
There are other projects related to tsParticles, like creating new templates using tsParticles.
tsparticles
/
404-templates
tsParticles Auth Template for Websites
tsParticles 404 Templates
tsParticles used in various 404 Pages for Websites
404 Masked Page Preview
See working preview here
404 Simple Page Preview
See working preview here
404 Space Page Preview
See working preview here
What is tsParticles
tsParticles is a lightweight library for easily creating particles animations in your websites or web applications.
The tsParticles library is ready to be used in standard JavaScript, React, Vue.js, Angular, Svelte, jQuery, Preact, Inferno.
Want to see more particles demos? Checkout this collection
Want to see more templates or want to share yours? Checkout this README
tsparticles
/
storybook
tsParticles Storybook
Getting Started with Create React App
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you eject, you can't go back!
If you…
tsparticles
/
nuxt2-particles-demo
Nuxt.js Particles Demo
nuxt2-particles-demo
⚠️ ⚠️ ⚠️ This project was moved to the Vue 2.x tsParticles component library repository here. If you need help, ask there. ⚠️ ⚠️ ⚠️
Build Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generate
For detailed explanation on how things work, check out the documentation.
Special Directories
You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.
assets
The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
More information about the usage of this directory in the documentation.
components
The components directory contains your Vue.js components. Components make up the different…
tsparticles
/
nuxt3-particles-demo
Nuxt3 Particles Demo
Nuxt 3 Minimal Starter
⚠️ ⚠️ ⚠️ This project was moved to the Vue 3.x tsParticles component library repository here. If you need help, ask there. ⚠️ ⚠️ ⚠️
Look at the nuxt 3 documentation to learn more.
Setup
Make sure to install the dependencies:
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoist
Development Server
Start the development server on http://localhost:3000
npm run dev
Production
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Checkout the deployment documentation for more information.
tsparticles
/
gatsby-landing-page-starter
tsParticles Simple Landing Page Starter for Gatsby Websites
tsParticles Gatsby Landing Page Starter
Kick off your project with this landing page boilerplate. This starter ships with the main Gatsby configuration files, and React tsParticles with a simple configuration, you might need to get up and running blazing fast with the blazing fast app generator for React.
Landing Page Preview
You can see a working preview here
🚀 Quick start
-
Create a Gatsby site.
Use the Gatsby CLI to create a new site, specifying the blog starter.
# create a new Gatsby site using the particles landing page starter gatsby new my-particles-starter https://github.com/tsparticles/gatsby-landing-page-starter -
Start developing.
Navigate into your new site’s directory and start it up.
cd my-particles-starter/ gatsby develop -
Open the source code and start editing!
Your site is now running at
http://localhost:8000!Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about…
Or a generic template collector where you can find other repositories containing tsParticles demos, some of them are still part of the tsParticles organization. I can make all of them valid for the Hacktoberfest 2022, if necessary
tsparticles
/
templates
tsParticles website templates collection
tsParticles Websites and Templates Collection
tsParticles is a lightweight JavaScript/TypeScript library for creating easily particles animations in your websites.
The library has also official components for the most used JavaScript frameworks that you can see below.
If you have created a website with tsParticles and you want to share your template feel free to add a pull request to add it below.
Vanilla JavaScript / Plain HTML (tsparticles)
- tsParticles demo project
- tsParticles CodePen samples collection
- tsParticles Authentication template
- tsParticles Glassmorphism Authentication template
- tsParticles Developer landing page template
- tsParticles 404 templates
- TypeDoc Particles Theme
- Bonn333 Portfolio
- tsParticles Portfolio Website by vishal-kumar-saw
React JS (react-tsparticles)
- React tsParticles demo project
- React tsParticles Create React App template
- React tsParticles TypeScript Create React App template
- React tsParticles CodeSandbox sample
- React tsParticles Authentication template
- React tsParticles Glassmorphism Authentication template
- React tsParticles Landing Page template
- Gatsby tsParticles Landing Page Starter
- React Resume Template…
Main Repository
There are some cool things that can be created in the main repository that could be useful for the community (ordered by difficulty):
- Create a new preset (options template)
- Create a new shape
- Create a new plugin, updater, interaction or mover
- Create a new path plugin
Creating a new preset
Creating a preset is really simple, there are some of them already available here: https://github.com/matteobruni/tsparticles/tree/main/presets
One of the simplest is the links preset that can be found here: https://github.com/matteobruni/tsparticles/tree/main/presets/links
You can copy that folder, create a new one and replace carefully all the links or Links words with the name you are thinking about and replace the options in the src/options.ts file.
All the scripts are ready for building any preset, so you don't have to worry too much on how to build it. You can add the preset in the demo/vanilla project for testing them.
Creating a new shape
Creating a new shape is an easy task if you know how to draw in canvas. You have to draw only the shape, no need to worry about colors, opacity, rotation, or any other particle property. It's not shape responsibility to transform the particle.
All the shapes can be found here: https://github.com/matteobruni/tsparticles/tree/main/shapes
A simple one is the circle shape available here: https://github.com/matteobruni/tsparticles/tree/main/shapes/circle
Like in the preset project, first replace all circle and Circle references with the shape name you want to achieve then start working on the src/CircleDrawer.ts file (renaming it to something similar to your shape name. Returning more than 12 sides is not necessary, since it's already really close to a circle shape and requires more resources to calculate all those sides.
Creating a new plugin, updater, interaction or mover
Every project of these types can have different difficulties, let's start from explaining each of them:
Plugin: a new feature that changes the normal behavior of the particles animation, like generating them starting from a canvas (
canvas-maskplugin) or from an SVG path (polygon-maskplugin), or adding a new color manager (hsv-colorplugin), or adding new features like emitters or absorbers.Updater: something that is responsible for adding features to every single particle, like updating the size, the opacity, the color, the rotation, and so on of each particle. It can be tricky since you have to handle correctly new options, or create new properties in the particle. It's not that hard, but it could require some knowledge.
Interaction: something that is responsible for interactions between the mouse hover, mouse click or between some DOM objects, or between particles itself, like the famous repulse effect when the mouse is hovered over the canvas, or when you click and new particles are added, or the links between two particles. This project can be difficult because it could have some math to consider, like distance and velocity values.
Mover: something that is giving to each particle a new movement effect. There are only two mover plugins at the moment, the one that is responsible for general movement and the one for the parallax effect. Creating one of these can be tricky since a lot of movement are already part of the generic one. Maybe it's not necessary to create one, but who knows.
Creating a new path plugin
This is the hardest project, in my opinion, because these projects are changing the standard particles movement only returning a velocity (you still can access the particle, so you can change other stuff as well). Path plugins were born for noise effect, but they expanded with the polygon path plugin, creating polygons while moving or the circles path that creates arcs while moving (that can be seen in the sea-anemone preset).
This requires for sure math, since moving a particle requires knowledge in the 2D geometry, and you should be aware of the time passed as well.
Happy hacking to anyone, and remember that a star 🌟 on GitHub is free and it helps the project to gain visibility.
Top comments (0)