starfield-effect
v1.0.7
Published
Library to simulate starfield using only canvas to reduce resource usage.
Downloads
10
Readme
install
npm install starfield-effect
yarn add starfield-effect
preview
https://codepen.io/hcastillaq/pen/gOewNOr
usage
const container = document.getElementById('app');
if (container) {
const options = {
parent: container,
numParticles: 1000,
background: 'black',
particleColor: 'white',
maxParticleSize: 8, //optional
fps: 60, //optional
speed: 1, //optional
shadow: true, //optional
shadowColors: ['#3969ae', '#67abe4', '#e5914f'], //optional
tips: 4, // default 4
};
starfieldEffect(options);
}
usage with nextjs
// components/Stars
import { createRef, FC, useEffect } from 'react';
import { starfieldEffect } from 'starfield-effect';
import styled from 'styled-components';
const StarsContainer = styled.div`
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
top: 0px;
left: 0px;
`;
const Stars: FC = () => {
const container = createRef<HTMLDivElement>();
useEffect(() => {
const options = {
parent: container.current as HTMLElement,
numParticles: 1000,
background: 'black',
particleColor: '#ffffff7d',
maxParticleSize: 8, //optional
fps: 30, //optional
speed: 5, //optional
shadow: true, //optional
shadowColors: ['#3969ae', '#67abe4', '#e5914f'], //optional
tips: 4, //default 4
};
starfieldEffect(options);
},[]);
return <StarsContainer ref={container} />;
};
export default Stars;
// pages/index.tsx
import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
const Stars = dynamic(() => import('./../components/Stars'), {
ssr: false,
});
const Home: NextPage = () => {
return (
<>
<Stars />
</>
);
};