diff --git a/examples/with-particles/.gitignore b/examples/with-particles/.gitignore
new file mode 100644
index 0000000000000..737d87210923e
--- /dev/null
+++ b/examples/with-particles/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
diff --git a/examples/with-particles/README.md b/examples/with-particles/README.md
new file mode 100644
index 0000000000000..4fd067cdb75e7
--- /dev/null
+++ b/examples/with-particles/README.md
@@ -0,0 +1,25 @@
+# tsParticles Example
+
+This example shows a Next.js application using [React tsParticles](https://github.com/matteobruni/tsparticles/tree/main/components/react) package for creating beautiful particles animations.
+
+Learn more about tsParticles [in the docs](https://particles.js.org/docs).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-particles)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-particles&project-name=with-particles&repository-name=with-particles)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-particles with-particles-app
+# or
+yarn create next-app --example with-particles with-particles-app
+# or
+pnpm create next-app -- --example with-particles with-particles-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-particles/components/particles.tsx b/examples/with-particles/components/particles.tsx
new file mode 100644
index 0000000000000..2abac1e047890
--- /dev/null
+++ b/examples/with-particles/components/particles.tsx
@@ -0,0 +1,114 @@
+import type { Container, Engine, ISourceOptions } from 'tsparticles-engine'
+import Particles from 'react-tsparticles'
+
+const ParticlesComponent = () => {
+ const particlesInit = async (engine: Engine) => {
+ // here engine can be used for loading additional presets or plugins
+ // PRESETS
+ // https://github.com/matteobruni/tsparticles/tree/main/presets all official tsParticles presets
+ // for example
+ // await loadBigCirclesPreset(engine); // it requires "tsparticles-preset-big-circles" dependency
+ // PLUGINS
+ // https://github.com/matteobruni/tsparticles/tree/main/plugins all official tsParticles plugins
+ // for example
+ // await loadInfectionPlugin(engine); // it requires "tsparticles-plugin-infection" dependency
+ // SHAPES
+ // https://github.com/matteobruni/tsparticles/tree/main/shapes all official tsParticles additional shapes
+ // for example
+ // await loadHeartShape(engine); // it requires "tsparticles-shape-heart" dependency
+ // INTERACTIONS
+ // https://github.com/matteobruni/tsparticles/tree/main/interactions all offciail tsParticles additional interactions
+ // for example
+ // await loadLightInteraction(engine); // it requires "tsparticles-interaction-light" dependency
+ // UPDATERS
+ // https://github.com/matteobruni/tsparticles/tree/main/updaters all official tsParticles additional updaters
+ // for example
+ // await loadOrbitUpdater(engine); // it requires "tsparticles-updater-orbit" dependency
+ }
+
+ const particlesLoaded = async (container: Container) => {
+ // the container is the current particles instance, it has methods like refresh(), start(), stop(), play(), pause()
+ // the documentation can be found here: https://particles.js.org/docs/modules/Core_Container.html
+ }
+
+ // options variable is the particles configuration
+ // many configurations can be found here: https://particles.js.org
+ // other configurations can be found in the official CodePen collection here: https://codepen.io/collection/DPOage
+ const options: ISourceOptions = {
+ fullScreen: {
+ enable: true, // set this to false to use the particles like any other DOM element, with this true they act like a background
+ zIndex: -1,
+ },
+ fpsLimit: 120,
+ particles: {
+ number: {
+ value: 80,
+ density: {
+ enable: true,
+ area: 800,
+ },
+ },
+ color: {
+ value: ['#2EB67D', '#ECB22E', '#E01E5B', '#36C5F0'],
+ },
+ shape: {
+ type: 'circle',
+ },
+ opacity: {
+ value: 1,
+ },
+ size: {
+ value: { min: 1, max: 8 },
+ },
+ links: {
+ enable: true,
+ distance: 150,
+ color: '#808080',
+ opacity: 0.4,
+ width: 1,
+ },
+ move: {
+ enable: true,
+ speed: 5,
+ outModes: {
+ default: 'out',
+ },
+ },
+ },
+ interactivity: {
+ events: {
+ onHover: {
+ enable: true,
+ mode: 'grab',
+ },
+ onClick: {
+ enable: true,
+ mode: 'push',
+ },
+ },
+ modes: {
+ grab: {
+ distance: 280,
+ links: {
+ opacity: 1,
+ color: '#808080',
+ },
+ },
+ push: {
+ quantity: 4,
+ },
+ },
+ },
+ }
+
+ return (
+
+ )
+}
+
+export default ParticlesComponent
diff --git a/examples/with-particles/next-env.d.ts b/examples/with-particles/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/with-particles/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-particles/next.config.js b/examples/with-particles/next.config.js
new file mode 100644
index 0000000000000..a843cbee09afa
--- /dev/null
+++ b/examples/with-particles/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ reactStrictMode: true,
+}
+
+module.exports = nextConfig
diff --git a/examples/with-particles/package.json b/examples/with-particles/package.json
new file mode 100644
index 0000000000000..6d4f4ef849853
--- /dev/null
+++ b/examples/with-particles/package.json
@@ -0,0 +1,25 @@
+{
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "next": "latest",
+ "react": "18.1.0",
+ "react-dom": "18.1.0",
+ "react-tsparticles": "^2.0.6",
+ "tsparticles": "^2.0.6",
+ "tsparticles-engine": "^2.0.6"
+ },
+ "devDependencies": {
+ "@types/node": "17.0.33",
+ "@types/react": "18.0.9",
+ "@types/react-dom": "18.0.4",
+ "eslint": "8.15.0",
+ "eslint-config-next": "latest",
+ "typescript": "4.6.4"
+ }
+}
diff --git a/examples/with-particles/pages/_app.tsx b/examples/with-particles/pages/_app.tsx
new file mode 100644
index 0000000000000..3f5c9d5485860
--- /dev/null
+++ b/examples/with-particles/pages/_app.tsx
@@ -0,0 +1,8 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+ return
+}
+
+export default MyApp
diff --git a/examples/with-particles/pages/index.tsx b/examples/with-particles/pages/index.tsx
new file mode 100644
index 0000000000000..08fe284baaf4f
--- /dev/null
+++ b/examples/with-particles/pages/index.tsx
@@ -0,0 +1,74 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+import Particles from '../components/particles'
+import styles from '../styles/Home.module.css'
+
+const Home: NextPage = () => {
+ return (
+
+
+
Create Next App
+
+
+
+
+
+
+
+
+
+ Get started by editing{' '}
+ pages/index.tsx
+
+
+
+
+
+
+
+ )
+}
+
+export default Home
diff --git a/examples/with-particles/public/favicon.ico b/examples/with-particles/public/favicon.ico
new file mode 100644
index 0000000000000..718d6fea4835e
Binary files /dev/null and b/examples/with-particles/public/favicon.ico differ
diff --git a/examples/with-particles/public/vercel.svg b/examples/with-particles/public/vercel.svg
new file mode 100644
index 0000000000000..fbf0e25a651c2
--- /dev/null
+++ b/examples/with-particles/public/vercel.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/examples/with-particles/styles/Home.module.css b/examples/with-particles/styles/Home.module.css
new file mode 100644
index 0000000000000..32a57d52f34c4
--- /dev/null
+++ b/examples/with-particles/styles/Home.module.css
@@ -0,0 +1,116 @@
+.container {
+ padding: 0 2rem;
+}
+
+.main {
+ min-height: 100vh;
+ padding: 4rem 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.footer {
+ display: flex;
+ flex: 1;
+ padding: 2rem 0;
+ border-top: 1px solid #eaeaea;
+ justify-content: center;
+ align-items: center;
+}
+
+.footer a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-grow: 1;
+}
+
+.title a {
+ color: #0070f3;
+ text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+ text-decoration: underline;
+}
+
+.title {
+ margin: 0;
+ line-height: 1.15;
+ font-size: 4rem;
+}
+
+.title,
+.description {
+ text-align: center;
+}
+
+.description {
+ margin: 4rem 0;
+ line-height: 1.5;
+ font-size: 1.5rem;
+}
+
+.code {
+ background: #fafafa;
+ border-radius: 5px;
+ padding: 0.75rem;
+ font-size: 1.1rem;
+ font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+ Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ max-width: 800px;
+}
+
+.card {
+ margin: 1rem;
+ padding: 1.5rem;
+ text-align: left;
+ color: inherit;
+ text-decoration: none;
+ border: 1px solid #eaeaea;
+ border-radius: 10px;
+ transition: color 0.15s ease, border-color 0.15s ease;
+ max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+ color: #0070f3;
+ border-color: #0070f3;
+}
+
+.card h2 {
+ margin: 0 0 1rem 0;
+ font-size: 1.5rem;
+}
+
+.card p {
+ margin: 0;
+ font-size: 1.25rem;
+ line-height: 1.5;
+}
+
+.logo {
+ height: 1em;
+ margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+ .grid {
+ width: 100%;
+ flex-direction: column;
+ }
+}
diff --git a/examples/with-particles/styles/globals.css b/examples/with-particles/styles/globals.css
new file mode 100644
index 0000000000000..e5e2dcc23baf1
--- /dev/null
+++ b/examples/with-particles/styles/globals.css
@@ -0,0 +1,16 @@
+html,
+body {
+ padding: 0;
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+* {
+ box-sizing: border-box;
+}
diff --git a/examples/with-particles/tsconfig.json b/examples/with-particles/tsconfig.json
new file mode 100644
index 0000000000000..99710e857874f
--- /dev/null
+++ b/examples/with-particles/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}