-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
moved particle background to component to remove duplicate code
- Loading branch information
Showing
3 changed files
with
117 additions
and
190 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,104 @@ | ||
| 'use client' | ||
| import React, { useEffect, useMemo, useState } from 'react'; | ||
| import Particles, { initParticlesEngine } from '@tsparticles/react'; | ||
| import { loadSlim } from '@tsparticles/slim'; | ||
| import { type ISourceOptions, MoveDirection, OutMode } from '@tsparticles/engine'; | ||
|
|
||
| interface ParticleBackgroundProps { | ||
| speed: number; | ||
| } | ||
|
|
||
| const ParticleBackground: React.FC<ParticleBackgroundProps> = ({ speed }) => { | ||
| const [init, setInit] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| initParticlesEngine(async (engine) => { | ||
| await loadSlim(engine); | ||
| }).then(() => { | ||
| setInit(true); | ||
| }); | ||
| }, []); | ||
|
|
||
| const particlesLoaded = async (container?: any): Promise<void> => { | ||
| console.log(container); | ||
| }; | ||
|
|
||
| const options: ISourceOptions = useMemo( | ||
| () => ({ | ||
| background: { | ||
| color: { | ||
| value: '#1a202c', | ||
| }, | ||
| }, | ||
| fpsLimit: 120, | ||
| interactivity: { | ||
| events: { | ||
| onClick: { | ||
| enable: true, | ||
| mode: 'push', | ||
| }, | ||
| onHover: { | ||
| enable: true, | ||
| mode: 'repulse', | ||
| }, | ||
| }, | ||
| modes: { | ||
| push: { | ||
| quantity: 4, | ||
| }, | ||
| repulse: { | ||
| distance: 200, | ||
| duration: 0.4, | ||
| }, | ||
| }, | ||
| }, | ||
| particles: { | ||
| color: { | ||
| value: '#ffffff', | ||
| }, | ||
| links: { | ||
| color: '#ffffff', | ||
| distance: 150, | ||
| enable: true, | ||
| opacity: 0.5, | ||
| width: 1, | ||
| }, | ||
| move: { | ||
| direction: MoveDirection.none, | ||
| enable: true, | ||
| outModes: { | ||
| default: OutMode.out, | ||
| }, | ||
| random: true, | ||
| speed: speed, // speed prop | ||
| straight: false, | ||
| }, | ||
| number: { | ||
| density: { | ||
| enable: true, | ||
| }, | ||
| value: 80, | ||
| }, | ||
| opacity: { | ||
| value: 0.5, | ||
| }, | ||
| shape: { | ||
| type: 'star', | ||
| }, | ||
| size: { | ||
| value: { min: 1, max: 5 }, | ||
| }, | ||
| }, | ||
| detectRetina: true, | ||
| }), | ||
| [speed] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| {init && <Particles id="tsparticles" particlesLoaded={particlesLoaded} options={options} />} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ParticleBackground; |
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
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 |
|---|---|---|
| @@ -1,108 +1,19 @@ | ||
| 'use client' | ||
| import React, { useEffect, useMemo, useState } from 'react'; | ||
| import Particles, { initParticlesEngine } from '@tsparticles/react'; | ||
| import { loadSlim } from '@tsparticles/slim'; | ||
| import { type ISourceOptions, MoveDirection, OutMode } from '@tsparticles/engine'; | ||
| import React from 'react'; | ||
| import ParticleBackground from '../app/components/ParticleBackground'; | ||
| import CodeBlock from '../app/components/CodeBlock'; | ||
|
|
||
| const HomePage: React.FC = () => { | ||
| const [init, setInit] = useState(false); | ||
| const starRating = 1; | ||
|
|
||
| useEffect(() => { | ||
| initParticlesEngine(async (engine) => { | ||
| await loadSlim(engine); | ||
| }).then(() => { | ||
| setInit(true); | ||
| }); | ||
| }, []); | ||
|
|
||
| const particlesLoaded = async (container?: any): Promise<void> => { | ||
| console.log(container); | ||
| }; | ||
|
|
||
| const options: ISourceOptions = useMemo( | ||
| () => ({ | ||
| background: { | ||
| color: { | ||
| value: '#1a202c', | ||
| }, | ||
| }, | ||
| fpsLimit: 120, | ||
| interactivity: { | ||
| events: { | ||
| onClick: { | ||
| enable: true, | ||
| mode: 'push', | ||
| }, | ||
| onHover: { | ||
| enable: true, | ||
| mode: 'repulse', | ||
| }, | ||
| }, | ||
| modes: { | ||
| push: { | ||
| quantity: 4, | ||
| }, | ||
| repulse: { | ||
| distance: 200, | ||
| duration: 0.4, | ||
| }, | ||
| }, | ||
| }, | ||
| particles: { | ||
| color: { | ||
| value: '#ffffff', | ||
| }, | ||
| links: { | ||
| color: '#ffffff', | ||
| distance: 150, | ||
| enable: true, | ||
| opacity: 0.5, | ||
| width: 1, | ||
| }, | ||
| move: { | ||
| direction: MoveDirection.none, | ||
| enable: true, | ||
| outModes: { | ||
| default: OutMode.out, | ||
| }, | ||
| random: true, | ||
| speed: 1, | ||
| straight: false, | ||
| }, | ||
| number: { | ||
| density: { | ||
| enable: true, | ||
| }, | ||
| value: 80, | ||
| }, | ||
| opacity: { | ||
| value: 0.5, | ||
| }, | ||
| shape: { | ||
| type: 'star', | ||
| }, | ||
| size: { | ||
| value: { min: 1, max: 5 }, | ||
| }, | ||
| }, | ||
| detectRetina: true, | ||
| }), | ||
| [] | ||
| ); | ||
|
|
||
| if (init) { | ||
| return ( | ||
| <div className="relative min-h-screen w-full bg-gray-900 flex flex-col items-center justify-center p-4 overflow-hidden"> | ||
| <Particles id="tsparticles" particlesLoaded={particlesLoaded} options={options} /> | ||
| <div className="relative z-10 flex items-center justify-center h-full w-full"> | ||
| <CodeBlock /> | ||
| </div> | ||
| return ( | ||
| <div className="relative min-h-screen w-full bg-gray-900 flex flex-col items-center justify-center p-4 overflow-hidden"> | ||
| <ParticleBackground speed={starRating} /> | ||
| <div className="relative z-10 flex items-center justify-center h-full w-full"> | ||
| <CodeBlock /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return <></>; | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default HomePage; |