Hero animation (#13)

* proof of concept

* temporary logo and burst sprinkle

* some responsiveness

* so much stuff

* cleanup

* swap text for logo

* fix window dimensions

* fix window dimensions pt 2

* gatsby window workaround

* css fix

* uninstall package

* mobile frame and desktop frame

* make logo bigger

gatsby-config.js

@@ -10,6 +10,7 @@ module.exports = {
   plugins: [
     'gatsby-plugin-styled-components',
     'gatsby-plugin-image',
+    `gatsby-plugin-sharp`,
     {
       resolve: 'gatsby-source-prismic',
       options: {

src/components/Hero/images.js

@@ -0,0 +1,239 @@
+import Camera from '../../images/camera.png';
+import Couch from '../../images/couch.png';
+import Desk from '../../images/desk.png';
+import FlowerPot from '../../images/flower-pot.png';
+import Kicks from '../../images/kicks.png';
+import PaintTube from '../../images/paint-tube.png';
+import Phone from '../../images/phone.png';
+import RecordPlayer from '../../images/record-player.png';
+import SprinkleArrow from '../../images/sprinkle-arrow.png';
+import SprinkleBurst from '../../images/sprinkle-burst.png';
+import SprinkleCircle from '../../images/sprinkle-circle.png';
+import SprinkleGrid from '../../images/sprinkle-grid.png';
+import SprinkleSlashes from '../../images/sprinkle-slashes.png';
+import SprinkleSparkle from '../../images/sprinkle-sparkle.png';
+import SprinkleSpring from '../../images/sprinkle-spring.png';
+import Stereo from '../../images/stereo.png';
+import Sticker from '../../images/sticker.png';
+import Stickers from '../../images/stickers.png';
+
+const images = [
+  {
+    src: Camera,
+    layer: 1,
+    mobileProps: {
+      startPos: [21.05, 449.41],
+      dimensions: [267.37, 259.3],
+    },
+    desktopProps: {
+      startPos: [81.25, 763.5],
+      dimensions: [476.25, 461.88],
+    },
+  },
+  {
+    src: Couch,
+    layer: 1,
+    mobileProps: {
+      startPos: [350.46, 1009.98],
+      dimensions: [349.76, 257.06],
+    },
+    desktopProps: {
+      startPos: [668, 1762],
+      dimensions: [623, 457.89],
+    },
+  },
+  {
+    src: Desk,
+    layer: 1,
+    mobileProps: {
+      startPos: [391.44, 360.99],
+      dimensions: [355.1, 433.25],
+    },
+    desktopProps: {
+      startPos: [741, 606],
+      dimensions: [632.51, 771.72],
+    },
+  },
+  {
+    src: FlowerPot,
+    layer: 2,
+    mobileProps: {
+      startPos: [545.97, 220.63],
+      dimensions: [204.91, 258.95],
+    },
+    desktopProps: {
+      startPos: [1016.25, 356],
+      dimensions: [365, 461.25],
+    },
+  },
+  {
+    src: Kicks,
+    layer: 3,
+    mobileProps: {
+      startPos: [338, 447],
+      dimensions: [139, 126],
+    },
+    desktopProps: {
+      startPos: [646, 759],
+      dimensions: [247.5, 223.75],
+    },
+  },
+  {
+    src: PaintTube,
+    layer: 3,
+    mobileProps: {
+      startPos: [226.95, 0],
+      dimensions: [222.6, 219.77],
+    },
+    desktopProps: {
+      startPos: [448, -37],
+      dimensions: [396.5, 391.46],
+    },
+  },
+  {
+    src: Phone,
+    layer: 2,
+    mobileProps: {
+      startPos: [393.13, 708.5],
+      dimensions: [350.95, 287.02],
+    },
+    desktopProps: {
+      startPos: [744, 1225],
+      dimensions: [625.12, 511.25],
+    },
+  },
+  {
+    src: RecordPlayer,
+    layer: 1,
+    mobileProps: {
+      startPos: [0, 105.4],
+      dimensions: [418.58, 404.17],
+    },
+    desktopProps: {
+      startPos: [43.75, 150.75],
+      dimensions: [745.59, 719.92],
+    },
+  },
+  {
+    src: SprinkleArrow,
+    layer: 3,
+    mobileProps: {
+      startPos: [258.39, 592.85],
+      dimensions: [72.99, 76.48],
+    },
+    desktopProps: {
+      startPos: [504, 1019],
+      dimensions: [130, 136.24],
+    },
+  },
+  {
+    src: SprinkleBurst,
+    layer: 3,
+    mobileProps: {
+      startPos: [16, 1004],
+      dimensions: [93, 93],
+    },
+    desktopProps: {
+      startPos: [72, 1751],
+      dimensions: [166, 166],
+    },
+  },
+  {
+    src: SprinkleCircle,
+    layer: 3,
+    mobileProps: {
+      startPos: [106.88, 47.3],
+      dimensions: [110.64, 105.54],
+    },
+    desktopProps: {
+      startPos: [234, 50],
+      dimensions: [197.35, 194.36],
+    },
+  },
+  {
+    src: SprinkleGrid,
+    layer: 3,
+    mobileProps: {
+      startPos: [545.83, 1027.38],
+      dimensions: [79.72, 79.72],
+    },
+    desktopProps: {
+      startPos: [1016, 1793],
+      dimensions: [142, 142],
+    },
+  },
+  {
+    src: SprinkleSlashes,
+    layer: 3,
+    mobileProps: {
+      startPos: [36.49, 295.72],
+      dimensions: [84.91, 69.7],
+    },
+    desktopProps: {
+      startPos: [108.75, 489.75],
+      dimensions: [151.25, 124.16],
+    },
+  },
+  {
+    src: SprinkleSparkle,
+    layer: 3,
+    mobileProps: {
+      startPos: [690, 547],
+      dimensions: [70, 79],
+    },
+    desktopProps: {
+      startPos: [1273, 936.04],
+      dimensions: [125, 141.99],
+    },
+  },
+  {
+    src: SprinkleSpring,
+    layer: 3,
+    mobileProps: {
+      startPos: [30.46, 758.46],
+      dimensions: [95.82, 96.37],
+    },
+    desktopProps: {
+      startPos: [98, 1314],
+      dimensions: [170.67, 171.67],
+    },
+  },
+  {
+    src: Stereo,
+    layer: 1,
+    mobileProps: {
+      startPos: [29.33, 732.64],
+      dimensions: [371.09, 365.44],
+    },
+    desktopProps: {
+      startPos: [96, 1268],
+      dimensions: [661, 650.93],
+    },
+  },
+  {
+    src: Sticker,
+    layer: 2,
+    mobileProps: {
+      startPos: [0.14, 1041.98],
+      dimensions: [252.42, 225.13],
+    },
+    desktopProps: {
+      startPos: [44, 1819],
+      dimensions: [449.61, 401],
+    },
+  },
+  {
+    src: Stickers,
+    layer: 1,
+    mobileProps: {
+      startPos: [440.35, 34.66],
+      dimensions: [257.75, 182.62],
+    },
+    desktopProps: {
+      startPos: [828.12, 24.74],
+      dimensions: [459.12, 325.29],
+    },
+  },
+];
+
+export default images;

src/components/Hero/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Container, Frame, MobileFrame, Image, LogoImage } from './styled';
+import images from './images';
+import Logo from '../../images/logo.svg';
+
+const Hero = () => {
+  return (
+    <Container>
+      <Frame>
+        <LogoImage alt="Presents" src={Logo} />
+        {images.map((image) => {
+          const { src, layer } = image;
+          const baseProps = { key: src, src, alt: '', layer };
+          return <Image {...baseProps} {...image.desktopProps} />;
+        })}
+      </Frame>
+      <MobileFrame>
+        <LogoImage alt="Presents" src={Logo} />
+        {images.map((image) => {
+          const { src, layer } = image;
+          const baseProps = { key: src, src, alt: '', layer };
+          return <Image mobile {...baseProps} {...image.mobileProps} />;
+        })}
+      </MobileFrame>
+    </Container>
+  );
+};
+
+export default Hero;