How to use the @codesandbox/common/lib/utils/animation/delay-effect function in @codesandbox/common

justify-content: space-around;
  z-index: 1;
  flex: 4;
`;

export const PlayButtonContainer = styled(Link)`
  position: absolute;
  display: flex;
  justify-content: center;
  top: -160%;
  left: 0;
  right: 0;

  cursor: pointer;

  ${delayEffect(0.5)};
`;

background-color: ${props => props.theme.background2};

  ${delayEffect(0.05)};
`;

export const Name = styled.div`
  ${delayEffect(0.1)};
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 0.25rem;
`;

export const Username = styled.div`
  ${delayEffect(0.15)};
  display: flex;
  align-items: center;
  font-size: ${props => (props.main ? 1.5 : 1.25)}rem;
  font-weight: 200;
  color: ${props => (props.main ? 'white' : 'rgba(255, 255, 255, 0.6)')};
  margin-bottom: 1rem;
`;

export const IconWrapper = styled(GithubIcon)`
  margin-left: 0.75rem;
  font-size: 1.1rem;
  color: white;
`;

import styled from 'styled-components';

import { LikeHeart } from 'app/pages/common/LikeHeart';

export const Container = styled.div`
  background-color: #272c2e;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  padding: 1.5rem;

  display: flex;
  flex-direction: column;

  margin-bottom: 2rem;

  ${delayEffect(0.35)};
`;

export const Title = styled.h1`
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1.25rem;
  font-weight: 300;
  z-index: 2;
`;

export const Like = styled(LikeHeart)`
  margin-left: 0.5rem;
  transform: translateY(-3px);
`;

display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;

  @media (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
  }
`;

export const ImportChoices = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-top: 2.5em;
  ${delayEffect(0.1)};
`;

export const Tab = styled.section`
  display: block;
  transition: 0.15s ease opacity;
`;

export const ImportChoice = styled.a.attrs({
  target: '_blank',
})`
  display: flex;
  align-items: center;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.25em;
  font-weight: 300;

import styled from 'styled-components';
import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';

export const Container = styled.div`
  float: right;
  flex: 1;
  display: flex;
  height: 100%;
  max-width: 450px;
  margin-bottom: 4rem;
  align-items: center;

  ${delayEffect(0.1)};
`;

export const Stats = styled.div`
  flex: 1;
  display: flex;
  height: 100%;

  justify-content: center;
  align-items: top;
  font-size: 1.25rem;
`;

${({ delay = 0, theme }) => css`
    width: 100%;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: ${theme.light
      ? css`rgba(0, 0, 0, 0.7)`
      : css`rgba(255, 255, 255, 0.7)`};
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.4;
    text-align: center;
    ${delay !== null && delayEffect(delay)};
  `}
`;

${({ deploying }) => css`
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    ${deploying && delayInEffect(0, false)};
  `}
`;

`;

export const StyledLogo = styled(OpaqueLogo)`
  position: absolute;
  transform: translateY(15px) translateX(-100px);
  z-index: 10;
`;

export const DeployText = styled.div`
  ${delayInEffect()};
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
`;

export const DeployedLink = styled.a`
  ${delayInEffect(0.25)};
  font-size: 1.25rem;
`;

export const DeploymentManagementNotice = styled.div`
  ${delayInEffect(0.45)};
  font-size: 0.75rem;
  margin-top: 1rem;
`;

import styled from 'styled-components';
import GithubIcon from 'react-icons/lib/go/mark-github';
import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';

export const ProfileImage = styled.img`
  border-radius: 2px;
  margin-right: 1.5rem;

  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
  background-color: ${props => props.theme.background2};

  ${delayEffect(0.05)};
`;

export const Name = styled.div`
  ${delayEffect(0.1)};
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 0.25rem;
`;

export const Username = styled.div`
  ${delayEffect(0.15)};
  display: flex;
  align-items: center;
  font-size: ${props => (props.main ? 1.5 : 1.25)}rem;
  font-weight: 200;
  color: ${props => (props.main ? 'white' : 'rgba(255, 255, 255, 0.6)')};
  margin-bottom: 1rem;
`;

import styled from 'styled-components';
import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';

export const Container = styled.div`
  position: relative;
  ${delayEffect(0.4)} height: 500px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);

  iframe {
    height: calc(100% - 3rem);
  }
`;