import React , { memo , useEffect , useRef } from 'react' ; import SineWaves from 'sine-waves' ; import styles from './styles.less' ; export default memo ( ( ) => { const ref = useRef ( ) ; useEffect ( ( ) => { if ( ref . current ) { const wave = new SineWaves ( { el : ref . current , running : false , speed : 8 , rotate : 0 , ease : 'Linear' , waveWidth : '200%' , waves : [ { timeModifier : 0.3 , lineWidth : 1 , amplitude : 150 , wavelength : 100 , segmentLength : 20 , strokeStyle : 'rgba(255, 255, 255, 1)' , } , { timeModifier : 0.5 , lineWidth : 1 , amplitude : 150 , wavelength : 150 , strokeStyle : 'white' , } , { timeModifier : 1 , lineWidth : 1 , amplitude : 150 , wavelength : 200 , strokeStyle : 'white' , } , ] , resizeEvent : function ( ) { const gradient = this . ctx . createLinearGradient ( 0 , 0 , this . width , 0 ) ; gradient . addColorStop ( 0 , 'rgba(255, 255, 255, 0.2' ) ; gradient . addColorStop ( 0.5 , 'rgba(255, 255, 255, 0.2)' ) ; gradient . addColorStop ( 1 , 'rgba(255, 255, 255, 0.2' ) ; let index = - 1 ; const length = this . waves . length ; while ( ++ index < length ) { this . waves [ index ] . strokeStyle = gradient ; } } , } ) ; wave . running = true ; } } , [ ref ] ) ; return < canvas className = { styles . wave } ref = { ref } / > ; } ) ;