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

// @ts-check
import styled from 'styled-components';
import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
import { Button } from '@codesandbox/common/lib/components/Button';

export const PADDING = 32;

export const Container = styled.div`
  ${fadeIn(0)};
  background-color: ${props => props.theme.background};
  overflow: hidden;
  border-radius: 2px;
  user-select: none;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
`;

export const SandboxImageContainer = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 160px;

  background-color: rgba(255, 255, 255, 0.1);

import styled from 'styled-components';
import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
import { ContextMenu } from 'app/components/ContextMenu';
import { KebabIcon as MoreInfoIcon } from './KebabIcon';

export const PADDING = 32;

export const Container = styled.div`
  ${fadeIn(0)};
  background-color: ${props => props.theme.background};
  overflow: hidden;
  border-radius: 2px;
  user-select: none;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
`;

export const StyledContextMenu = styled(ContextMenu)<{
  isDraggingItem: boolean;
}>`
  padding-right: ${PADDING}px;
  box-sizing: border-box;
  opacity: ${({ isDraggingItem }) => (isDraggingItem ? 0 : 1)};
`;

cursor: pointer;
  color: ${props =>
    props.theme.light ? '#6c6c6c' : 'rgba(255, 255, 255, 0.5)'};
  padding-left: 0.5rem;
  &:hover {
    color: ${props => (props.theme.light ? 'black' : 'rgba(255, 255, 255, 1)')};
  }
`;

export const IconArea = styled.div`
  position: absolute;
  right: 1rem;
  opacity: 0;
  line-height: 1;
  vertical-align: middle;
  ${fadeIn(0)};
`;

export const WorkspaceInputContainer = styled.div`
  display: inline-block;
  display: flex;
  overflow: visible;
  font-size: 0.875rem;
  margin: 0.5rem 0.75rem;
  input,
  textarea {
    transition: 0.3s ease background-color, 0.3s ease border-color;
    font-family: inherit;
    margin: 0 0.25rem;
    padding: 0.25rem;
    width: 100%;
    outline: none;

import styled from 'styled-components';
import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';

export const FullSize = styled.div`
  height: 100%;
  width: 100%;

  ${fadeIn(0)};
  display: flex;
  flex-direction: column;

  background-color: ${props =>
    props.theme['editor.background'] || 'transparent'};
`;

display: inline-block;
  transition: 0.3s ease color;
  color: rgba(255, 255, 255, 0.5);
  padding-left: 0.5rem;
  &:hover {
    color: white;
  }
`;

export const IconArea = styled.div`
  position: absolute;
  right: 1rem;
  opacity: 0;
  line-height: 1;
  vertical-align: middle;
  ${fadeIn(0)};
`;

export const WorkspaceInputContainer = styled.div`
  display: inline-block;
  display: flex;
  overflow: visible;
  font-size: 0.875rem;
  margin: 0.5rem 0.75rem;
  input,
  textarea {
    transition: 0.3s ease background-color, 0.3s ease border-color;
    font-family: inherit;
    margin: 0 0.25rem;
    padding: 0.25rem;
    width: 100%;
    outline: none;

import styled from 'styled-components';
import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';

export const Container = styled.div`
  display: flex;
  ${fadeIn(0)};
  vertical-align: middle;
  line-height: 1;
  align-items: center;
`;

height: ${width * 2}px;
  cursor: nwse-resize;
`;

export const ResizingNotice = styled.div`
  position: absolute;
  right: 1rem;
  bottom: 1rem;

  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 1.125rem;
  padding: 0.5rem 1rem;

  border-radius: 2px;
  ${fadeIn(0)};
`;

import styled from 'styled-components';

import { TimelineMax, TweenMax, Power2, Power3, Elastic } from 'gsap';
import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';

import Cube from '../../../components/Cube';
import media from '../../../utils/media';
import getScrollPos from '../../../utils/scroll';

const RADIUS = 250;
const Container = styled.div`
  flex: 2;
  position: relative;
  transform: translateX(${RADIUS}px) translateY(125px);

  ${fadeIn(0)};

  ${media.tablet`
    flex: 2;
    width: 100%;

    transform: translateX(${RADIUS}px) translateY(400px);

    justify-content: center;
    align-items: center;
  `};
`;

const SmallCube = styled(
  class SmallCubeInner extends React.Component {
    shouldComponentUpdate() {
      return false;

import React from 'react';
import styled from 'styled-components';
import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';

import setupCanvas from './canvas';

const delay = fadeIn(0);

const Container = styled.div`
  transition: 0.8s ease background-color;
  transition-delay: 1s;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  pointer-events: none;
  ${delay};
`;

export default class Background extends React.PureComponent {
  startCanvas = (el: HTMLElement) => {
    this.canvas = setupCanvas(el);