Header: revert to pure-CSS x-ray effect

src/components/Header/Header.css

@@ -48,6 +48,15 @@ a.nav-link:hover:after {
   cursor: cell;
 }
 
+.xray {
+  opacity: 1;
+  transition: opacity 200ms ease;
+}
+
+.xray:hover {
+  opacity: 0;
+}
+
 .image-container {
   position: relative;
   width: 100%;

src/components/Header/Header.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { motion } from "framer-motion";
 import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react";
 
 import "./Header.css";
@@ -20,11 +19,6 @@ import calculatorSpec from "../../assets/calculator-spec.svg";
 
 type HeaderProps = {};
 
-const illustrationVariants = {
-  hidden: { opacity: 0, transition: { duration: 0.2 } },
-  visible: { opacity: 1, transition: { duration: 0.2 } },
-};
-
 const handleGetStarted = () =>
   window.open(
     "https://github.com/phosphor-icons/phosphor-web#phosphor-icons",
@@ -45,7 +39,9 @@ const Header: React.FC<HeaderProps> = () => {
         <img src={paperclips} id="paperclips" alt="" />
         <div className="intro">
           <h2>
-            Phosphor is a flexible icon family in 6 weights — for interfaces, presentations, felicitations...
+            Phosphor is a flexible icon family for interfaces, presentations — 
+            <wbr />
+            whatever, really.
           </h2>
           <div className="button-container">
             <button className="main-button" onClick={handleGetStarted}>
@@ -82,83 +78,35 @@ const Header: React.FC<HeaderProps> = () => {
               Github
             </a>
           </div>
+          <img id="cutting-mat" src={cuttingMatSpec} alt="" />
           <img
             id="cutting-mat"
-            className="inspectable"
+            className="inspectable xray"
-            src={cuttingMatSpec}
-            alt=""
-          />
-          <motion.img
-            id="cutting-mat"
-            className="inspectable"
-            variants={illustrationVariants}
-            initial="visible"
-            whileHover="hidden"
             src={cuttingMat}
             alt=""
           />
-          <img id="receipt" className="inspectable" src={receiptSpec} alt="" />
+          <img id="receipt" src={receiptSpec} alt="" />
-          <motion.img
+          <img id="receipt" className="inspectable xray" src={receipt} alt="" />
-            id="receipt"
+          <img id="calculator" src={calculatorSpec} alt="" />
-            className="inspectable"
-            variants={illustrationVariants}
-            initial="visible"
-            whileHover="hidden"
-            src={receipt}
-            alt=""
-          />
           <img
             id="calculator"
-            className="inspectable"
+            className="inspectable xray"
-            src={calculatorSpec}
-            alt=""
-          />
-          <motion.img
-            id="calculator"
-            className="inspectable"
-            variants={illustrationVariants}
-            initial="visible"
-            whileHover="hidden"
             src={calculator}
             alt=""
           />
         </div>
-        <img id="tablet" className="inspectable" src={tabletSpec} alt="" />
+        <img id="tablet" src={tabletSpec} alt="" />
-        <motion.img
+        <img id="tablet" className="inspectable xray" src={tablet} alt="" />
-          id="tablet"
+        <img id="billiard-ball" src={billiardBallSpec} alt="" />
-          className="inspectable"
-          variants={illustrationVariants}
-          initial="visible"
-          whileHover="hidden"
-          src={tablet}
-          alt=""
-        />
         <img
           id="billiard-ball"
-          className="inspectable"
+          className="inspectable xray"
-          src={billiardBallSpec}
-          alt=""
-        />
-        <motion.img
-          id="billiard-ball"
-          className="inspectable"
-          variants={illustrationVariants}
-          initial="visible"
-          whileHover="hidden"
           src={billiardBall}
           alt=""
         />
 
-        <img id="warning" className="inspectable" src={warningSpec} alt="" />
+        <img id="warning" src={warningSpec} alt="" />
-        <motion.img
+        <img id="warning" className="inspectable xray" src={warning} alt="" />
-          id="warning"
-          className="inspectable"
-          variants={illustrationVariants}
-          initial="visible"
-          whileHover="hidden"
-          src={warning}
-          alt=""
-        />
       </div>
     </header>
   );