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

+ Welcome to Next.js! +

+ +

+ 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"] +}