-
Notifications
You must be signed in to change notification settings - Fork 26.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added with-particles template (#35471)
## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint`
- Loading branch information
1 parent
cd2324c
commit cf3ba27
Showing
13 changed files
with
448 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<Particles | ||
id="particles" | ||
init={particlesInit} | ||
loaded={particlesLoaded} | ||
options={options} | ||
/> | ||
) | ||
} | ||
|
||
export default ParticlesComponent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/// <reference types="next" /> | ||
/// <reference types="next/image-types/global" /> | ||
|
||
// NOTE: This file should not be edited | ||
// see https://nextjs.org/docs/basic-features/typescript for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/** @type {import('next').NextConfig} */ | ||
const nextConfig = { | ||
reactStrictMode: true, | ||
} | ||
|
||
module.exports = nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import '../styles/globals.css' | ||
import type { AppProps } from 'next/app' | ||
|
||
function MyApp({ Component, pageProps }: AppProps) { | ||
return <Component {...pageProps} /> | ||
} | ||
|
||
export default MyApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div className={styles.container}> | ||
<Head> | ||
<title>Create Next App</title> | ||
<meta name="description" content="Generated by create next app" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
|
||
<main className={styles.main}> | ||
<Particles /> | ||
<h1 className={styles.title}> | ||
Welcome to <a href="https://nextjs.org">Next.js!</a> | ||
</h1> | ||
|
||
<p className={styles.description}> | ||
Get started by editing{' '} | ||
<code className={styles.code}>pages/index.tsx</code> | ||
</p> | ||
|
||
<div className={styles.grid}> | ||
<a href="https://nextjs.org/docs" className={styles.card}> | ||
<h2>Documentation →</h2> | ||
<p>Find in-depth information about Next.js features and API.</p> | ||
</a> | ||
|
||
<a href="https://nextjs.org/learn" className={styles.card}> | ||
<h2>Learn →</h2> | ||
<p>Learn about Next.js in an interactive course with quizzes!</p> | ||
</a> | ||
|
||
<a | ||
href="https://github.com/vercel/next.js/tree/canary/examples" | ||
className={styles.card} | ||
> | ||
<h2>Examples →</h2> | ||
<p>Discover and deploy boilerplate example Next.js projects.</p> | ||
</a> | ||
|
||
<a | ||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
className={styles.card} | ||
> | ||
<h2>Deploy →</h2> | ||
<p> | ||
Instantly deploy your Next.js site to a public URL with Vercel. | ||
</p> | ||
</a> | ||
</div> | ||
</main> | ||
|
||
<footer className={styles.footer}> | ||
<a | ||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Powered by{' '} | ||
<span className={styles.logo}> | ||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> | ||
</span> | ||
</a> | ||
</footer> | ||
</div> | ||
) | ||
} | ||
|
||
export default Home |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.