import { useCallback , useEffect , useState } from 'react' ; import { BodyRegular , Display } from 'components/core/Text/Text' ; import Button from 'components/core/Button/Button' ; import colors from 'components/core/colors' ; import Spacer from 'components/core/Spacer/Spacer' ; import styled , { css , keyframes } from 'styled-components' ; import { animated , useSpring } from 'react-spring' ; import Mixpanel from 'utils/mixpanel' ; import { useAuthenticatedUsername } from 'hooks/api/users/useUser' ; import { useRouter } from 'next/router' ; const calc = ( x , y ) => [ ( x - window . innerWidth ) / 2 , ( y - window . innerHeight ) / 2 ] ; type AnimatedImage = { src ? : string ; width : number ; zIndex : number ; offsetX : number ; offsetY : number ; offsetXStart : number ; offsetYStart : number ; fadeInDelay : number ; } ; const animatedImages = [ { src : 'https://lh3.googleusercontent.com/AqK0M5EcGCytypy6t5VBclg2Pm66npq4Qpf-MlNox_l1BD8uhDhlircZ5mPCrKch3FAgacTbRO61Ur722W3g-ANWiTMQU6owrnOukQ' , width : 180 , zIndex : - 40 , offsetX : 180 , offsetY : - 370 , offsetXStart : 0 , offsetYStart : 0 , fadeInDelay : 800 , } , { src : 'https://lh3.googleusercontent.com/sxCl9E-dvfOq7UidBi-dO8TDXtU7QmbpVj8x4nXnJpDAujj2c74F1cTqvX5alvInLh9NkaoGFL1aFIvx8M2mRtqQ' , width : 100 , zIndex : - 13 , offsetX : - 105 , offsetY : 210 , offsetXStart : 0 , offsetYStart : 0 , fadeInDelay : 0 , } , { src : 'https://lh3.googleusercontent.com/CpwTm306giMTU90lJrdEqs_SuUWa9DPT7r6CzDJZErJAdbLC8RoB-3GEh_QBtcmPrr6SmsywUPjbO9IN0i6VmwpteirK5ptSePYPzQ=w335' , width : 280 , zIndex : - 18 , offsetX : 370 , offsetY : 80 , offsetXStart : - 20 , offsetYStart : - 12 , fadeInDelay : 300 , } , { src : 'https://lh3.googleusercontent.com/kghKAvKiZ6dCQaPtfcyuNKnNDNtijiwoalY3ZGeo4WwOyLIZvDeX7auYyiVX2vNKI_GU8Wrt88pLTNNAi5n3ENwsaJ5y2ZWvH0rzMw=w335' , width : 200 , zIndex : 20 , offsetX : - 150 , offsetY : - 390 , offsetXStart : 0 , offsetYStart : 0 , fadeInDelay : 0 , } , { src : 'https://lh3.googleusercontent.com/dvrP8rJNswBrdAo4eYia2y808Od_vjtmxn3-41-WDxs2K5jElLUQEsIUGw7X0uGVLe8ywqrUg-70OlrpjIGKiiK4FBy1SyMCmpmIaA=w336' , width : 200 , zIndex : 11 , offsetX : - 550 , offsetY : - 340 , offsetXStart : 0 , offsetYStart : 0 , fadeInDelay : 1200 , } , { src : 'https://lh3.googleusercontent.com/kOnoQtIQslGFMlxXXGxPtnjCbUvOr1EuIePKC0DJsTsvvV__ytpVoywQ9Fkl8KAxWAwKP2coUj7N-Pk_e_hyTXEKgyzYPJKRcBrULQ=s500' , width : 250 , zIndex : 37 , offsetX : - 510 , offsetY : 110 , offsetXStart : 0 , offsetYStart : 30 , fadeInDelay : 500 , } , { src : 'https://lh3.googleusercontent.com/eseF_p4TBPq0Jauf99fkm32n13Xde_Zgsjdfy6L450YZaEUorYtDmUUHBxcxnC21Sq8mzBJ6uW8uUwYCKckyChysBRNvrWyZ6uSx' , width : 220 , zIndex : 25 , offsetX : 440 , offsetY : - 240 , offsetXStart : - 40 , offsetYStart : 0 , fadeInDelay : 0 , } , { src : 'https://lh3.googleusercontent.com/eg2EsokhN7VkPzzHgO6QHYZHsUaGwhhagLiRhYVIi30Fw2WwudM0NFiGdTAZsLEY99dPuCEo0hdrK6BxZzy6EGXsgSdLL3wA4UMz=w500' , width : 200 , zIndex : 30 , offsetX : 80 , offsetY : 150 , offsetXStart : 0 , offsetYStart : - 40 , fadeInDelay : 300 , } , { src : 'https://lh3.googleusercontent.com/G6eilbjTdOHxUcZC3y_O96beaUu_DGzyiduK3HB_7ki94QuZx02xQSz4S-KaDIg-Pw-0YkV1KgC3ECmflEzWq0HoZw' , width : 230 , zIndex : - 11 , offsetX : - 660 , offsetY : - 120 , offsetXStart : 0 , offsetYStart : 0 , fadeInDelay : 0 , } , ] ; const textAnimationOptions = { width : 300 , zIndex : 2 , offsetX : 0 , offsetY : 0 , offsetXStart : 0 , offsetYStart : 0 , fadeInDelay : 0 , } ; function getTransformCallback ( animatedImage ) { const movementRatio = - 500 / animatedImage . zIndex ; return ( x , y ) => `translate3d(${ x / movementRatio }px,${ y / movementRatio }px,0)` ; } type Props = { next : ( ) => void ; } ; export default function WelcomeAnimation ( { next } ) { const [ props , set ] = useSpring ( ( ) => ( { xy : [ 0 , 0 ] , config : { mass : 10 , tension : 550 , friction : 140 } , } ) ) ; const [ shouldFadeOut , setShouldFadeOut ] = useState ( false ) ; const [ shouldExplode , setShouldExplode ] = useState ( false ) ; const username = useAuthenticatedUsername ( ) ; const { push } = useRouter ( ) ; useEffect ( ( ) => { setTimeout ( ( ) => { setShouldExplode ( true ) ; } , 2000 ) ; } , [ setShouldExplode ] ) ; const handleClick = useCallback ( ( ) => { Mixpanel . track ( 'Click through welcome page' ) ; if ( username ) { void push ( `/${ username }` ) ; return ; } setShouldFadeOut ( true ) ; setTimeout ( ( ) => { next ( ) ; } , 2000 ) ; } , [ next , username , push ] ) ; return ( < StyledContainer onMouseMove = { ( { clientX : x , clientY : y } ) => set ( { xy : calc ( x , y ) } ) } > < animated . div className = "animate" style = { { transform : props . xy . to ( getTransformCallback ( textAnimationOptions ) ) , } } > < StyledTextContainer shouldFadeOut = { shouldFadeOut } > < Display > Welcome to Gallery < /Display> < Spacer height = { 8 } / > < StyledBodyText color = { colors . gray50 } > This is your space to share your pieces and the stories that surround them . Curate , arrange , and display your collection exactly how it was meant to be . < /StyledBodyText> < Spacer height = { 16 } / > < StyledButton text = "Enter Gallery" onClick = { handleClick } / > < /StyledTextContainer> < /animated.div> { animatedImages . map ( ( animatedImage ) => ( < StyledMovementWrapper shouldExplode = { shouldExplode } animatedImage = { animatedImage } > < animated . div className = "animate" style = { { transform : props . xy . interpolate ( getTransformCallback ( animatedImage ) ) , } } > < Image width = { animatedImage . width } src = { animatedImage . src } fadeInDelay = { animatedImage . fadeInDelay } shouldFadeOut = { shouldFadeOut } / > < /animated.div> < /StyledMovementWrapper>))} < /StyledContainer>); } const fadeInGrow = keyframes `
  from { opacity: 0; transform: scale(0.8); };
  to { opacity: 1; transform: scale(1.0); };
` ; const fadeOutGrow = keyframes `
  from { opacity: 1; transform: scale(1.0); };
  to { opacity: 0; transform: scale(1.8); };
` ; const fadeOut = keyframes `
  from { opacity: 1; };
  to { opacity: 0; };
` ; const StyledTextContainer = styled . div < { shouldFadeOut : boolean ; } > `
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: ${ fadeInGrow } 1s forwards;
  animation-delay: 2s;

  ${ ( { shouldFadeOut } ) => shouldFadeOut && css `
      animation: ${ fadeOut } 1s forwards;
    ` }
` ; const StyledMovementWrapper = styled . div < { shouldExplode : boolean ; animatedImage : AnimatedImage ; } > `
  position: relative;
  transition: transform 1000ms cubic-bezier(0, 0, 0, 1.07);
  ${ ( { shouldExplode , animatedImage } ) => shouldExplode ? `transform: translate(${ animatedImage . offsetX }px, ${ animatedImage . offsetY }px)` : `transform: translate(${ animatedImage . offsetXStart - 120 }px, ${ animatedImage . offsetYStart - 150 }px)` };
` ; const StyledContainer = styled . div `
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${ fadeInGrow } 2s;
` ; const Image = styled . img < { width ? : number ; fadeInDelay : number ; shouldFadeOut ? : boolean ; } > `
  width: ${ ( { width } ) => width }px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  opacity: 0;
  animation: ${ fadeInGrow } 2s forwards ${ ( { fadeInDelay } ) => fadeInDelay }ms;

  ${ ( { shouldFadeOut , fadeInDelay } ) => shouldFadeOut && css `
      animation: ${ fadeOutGrow } 500ms forwards ${ fadeInDelay / 3 }ms;
      opacity: 1;
    ` }
` ; const StyledBodyText = styled ( BodyRegular ) `
  max-width: 400px;
  text-align: center;
` ; const StyledButton = styled ( Button ) `
  width: 200px;
` ;