@inglorious/logo 1.0.0

package/src/faces/S.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 6 0
+    L 6 2
+    L 4 1
+    L 2 1
+    L 2 2
+    L 6 3
+    L 6 6
+    L 0 6
+    L 0 4
+    L 2 5
+    L 4 5
+    L 4 4
+    L 0 3
+    Z
+  " />
+</svg>

package/src/faces/T.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+
+  <path id="letter" d="
+    M 0 0
+    L 6 0
+    L 6 2
+    L 4 1
+    L 4 5
+    L 6 6
+    L 0 6
+    L 2 5
+    L 2 1
+    L 0 2
+    Z
+  " />
+</svg>

package/src/faces/U.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 2 4
+    L 4 4
+    L 4 0
+    L 6 0
+    L 6 6
+    L 0 6
+    Z
+  " />
+</svg>

package/src/faces/V.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 3 4
+    L 4 0
+    L 6 0
+    L 4 6
+    L 2 6
+    Z
+  " />
+</svg>

package/src/faces/W.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 2 3
+    L 3 1
+    L 4 3
+    L 4 0
+    L 6 0
+    L 6 6
+    L 4 6
+    L 3 4
+    L 2 6
+    L 0 6
+    Z
+  " />
+</svg>

package/src/faces/X.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 3 2
+    L 4 0
+    L 6 0
+    L 4 3
+    L 6 6
+    L 4 6
+    L 3 4
+    L 2 6
+    L 0 6
+    L 2 3
+    Z
+  " />
+</svg>

package/src/faces/Y.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 3 2
+    L 4 0
+    L 6 0
+    L 4 3
+    L 4 6
+    L 2 6
+    L 2 3
+    Z
+  " />
+</svg>

package/src/faces/Z.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 6 0
+    L 6 1
+    L 2 5
+    L 4 5
+    L 6 4
+    L 6 6
+    L 0 6
+    L 0 5
+    L 4 1
+    L 2 1
+    L 0 2
+    Z
+  " />
+</svg>

package/src/faces/index.js

@@ -0,0 +1,55 @@
+import A from "./A.svg";
+import B from "./B.svg";
+import C from "./C.svg";
+import D from "./D.svg";
+import E from "./E.svg";
+import F from "./F.svg";
+import G from "./G.svg";
+import H from "./H.svg";
+import I from "./I.svg";
+import J from "./J.svg";
+import K from "./K.svg";
+import L from "./L.svg";
+import M from "./M.svg";
+import N from "./N.svg";
+import O from "./O.svg";
+import P from "./P.svg";
+import Q from "./Q.svg";
+import R from "./R.svg";
+import S from "./S.svg";
+import T from "./T.svg";
+import U from "./U.svg";
+import V from "./V.svg";
+import W from "./W.svg";
+import X from "./X.svg";
+import Y from "./Y.svg";
+import Z from "./Z.svg";
+
+export {
+  A,
+  B,
+  C,
+  D,
+  E,
+  F,
+  G,
+  H,
+  I,
+  J,
+  K,
+  L,
+  M,
+  N,
+  O,
+  P,
+  Q,
+  R,
+  S,
+  T,
+  U,
+  V,
+  W,
+  X,
+  Y,
+  Z,
+};

package/src/index.jsx

@@ -0,0 +1,148 @@
+import PropTypes from "prop-types";
+import { memo, useEffect, useRef, useState } from "react";
+
+import LogoComponent from "./logo";
+
+const MAX_HEAD_TILT_X = 400;
+const MAX_HEAD_TILT_Y = 400;
+const HALF = 0.5;
+const FIRST_ITEM = 0;
+
+const Logo = memo(function Logo({ size, faces, isInteractive, preventScroll }) {
+  const [coords, setCoords] = useState({ x: 0, y: 0 });
+
+  const logo = useRef();
+
+  useEffect(() => {
+    if (!isInteractive) {
+      return;
+    }
+
+    const { left, top, width, height } = logo.current.getBoundingClientRect();
+
+    const center = {
+      x: window.scrollX + left + width * HALF,
+      y: window.scrollY + top + height * HALF,
+    };
+
+    const moveEvent = isTouchDevice() ? "touchmove" : "mousemove";
+    document.addEventListener(moveEvent, onMove, {
+      passive: !preventScroll,
+    });
+
+    return () => {
+      document.removeEventListener(moveEvent, onMove);
+    };
+
+    function onMove(event) {
+      const { target, pageX, pageY } =
+        moveEvent.current === "touchmove" ? event.touches[FIRST_ITEM] : event;
+
+      if (preventScroll && closestAncestor(target, "logo")) {
+        event.preventDefault();
+      }
+
+      setCoords({
+        x: saturate(pageX - center.x, MAX_HEAD_TILT_X),
+        y: saturate(pageY - center.y, MAX_HEAD_TILT_Y),
+      });
+    }
+  }, [isInteractive, preventScroll]);
+
+  return <LogoComponent size={size} faces={faces} {...coords} ref={logo} />;
+});
+
+Logo.propTypes = {
+  size: PropTypes.number.isRequired,
+  faces: PropTypes.arrayOf(
+    PropTypes.shape({
+      image: PropTypes.oneOf([
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+      ]),
+      reverse: PropTypes.bool,
+      eye: PropTypes.bool,
+    }).isRequired
+  ).isRequired,
+  isInteractive: PropTypes.bool.isRequired,
+  preventScroll: PropTypes.bool.isRequired,
+};
+
+Logo.defaultProps = {
+  size: 64,
+  faces: [
+    { image: "I", reverse: false, eye: true },
+    { image: "C", reverse: false, eye: false },
+  ],
+  isInteractive: false,
+  preventScroll: false,
+};
+
+export default Logo;
+
+function isTouchDevice() {
+  if (
+    "ontouchstart" in window ||
+    (window.DocumentTouch && document instanceof window.DocumentTouch)
+  ) {
+    return true;
+  }
+
+  // include the 'heartz' as a way to have a non matching mediaQuery to help terminate the join
+  // https://git.io/vznFH
+  const prefixes = " -webkit- -moz- -o- -ms- ".split(" ");
+  var query = ["(", prefixes.join("touch-enabled),("), "heartz", ")"].join("");
+  return window.matchMedia(query).matches;
+}
+
+function saturate(num, limit) {
+  if (num < -limit) return -limit;
+  if (num > limit) return limit;
+  return num;
+}
+
+function closestAncestor(el, className) {
+  const limit = 4;
+  let i = 0;
+  let closest = el;
+  while (closest && i < limit) {
+    if (
+      closest.className == null ||
+      typeof closest.className.split !== "function"
+    ) {
+      return null;
+    }
+
+    const classes = closest.className.split(" ");
+    if (classes.includes(className)) {
+      return closest;
+    }
+
+    closest = closest.parentNode;
+    i++;
+  }
+}

package/src/logo.jsx

@@ -0,0 +1,101 @@
+import PropTypes from "prop-types";
+import { forwardRef, memo } from "react";
+
+import eye from "./eye.svg";
+import * as faceSvgs from "./faces";
+import classes from "./logo.module.css";
+
+const MINUS_FORTY_DEGREES = -0.6981;
+const MINUS_FORTY_FIVE_DEGREES = -0.7854;
+const STEP = 0.001;
+const HALF = 0.5;
+
+const Logo = memo(
+  forwardRef(function Logo({ size, faces, x, y }, ref) {
+    const [left, right] = faces;
+
+    return (
+      <div
+        className={classes.logo}
+        ref={ref}
+        style={{
+          "--size": `${size}px`,
+          "--transform": `scaleY(1.2) translateZ(-${size}px) rotateX(${
+            MINUS_FORTY_DEGREES - STEP * y
+          }rad)
+          rotateY(${MINUS_FORTY_FIVE_DEGREES + STEP * x}rad)`,
+          "--z-translation": `${size * HALF}px`,
+          "--left-face-flip": left.reverse ? "rotateY(180deg);" : "none",
+          "--right-face-flip": right.reverse ? "rotateY(180deg);" : "none",
+        }}
+      >
+        <div className={classes.cube}>
+          <div className={`${classes.face} ${classes.left}`}>
+            <img src={faceSvgs[left.image]} alt={left.image} />
+            {left.eye && (
+              <img className={classes.eye} src={eye} alt="left eye" />
+            )}
+          </div>
+          <div className={`${classes.face} ${classes.right}`}>
+            <img src={faceSvgs[right.image]} alt={right.image} />
+            {right.eye && (
+              <img className={classes.eye} src={eye} alt="right eye" />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  })
+);
+
+Logo.propTypes = {
+  size: PropTypes.number.isRequired,
+  faces: PropTypes.arrayOf(
+    PropTypes.shape({
+      image: PropTypes.oneOf([
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+      ]),
+      reverse: PropTypes.bool,
+      eye: PropTypes.bool,
+    })
+  ).isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+};
+
+Logo.defaultProps = {
+  size: 64,
+  faces: [
+    { image: "I", reverse: false, eye: true },
+    { image: "C", reverse: false, eye: false },
+  ],
+  x: 0,
+  y: 0,
+};
+
+export default Logo;

package/src/logo.module.css

@@ -0,0 +1,43 @@
+.logo {
+  width: var(--size);
+  perspective: var(--size);
+  margin: 0 auto;
+}
+
+.cube {
+  height: var(--size);
+  transform-style: preserve-3d;
+  transform: var(--transform);
+  transition: ease-out 0.2s;
+}
+
+.face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-origin: bottom center;
+}
+
+.face > img {
+  position: absolute;
+}
+
+.left {
+  transform: rotateY(0deg) translateZ(var(--z-translation)) skew(12deg);
+}
+
+.right {
+  transform: rotateY(90deg) translateZ(var(--z-translation)) skew(-12deg);
+}
+
+.right > .eye {
+  transform: rotateY(180deg);
+}
+
+.left > img:first-of-type {
+  transform: var(--left-face-flip);
+}
+
+.right > img:first-of-type {
+  transform: var(--right-face-flip);
+}

package/src/logo.stories.jsx

@@ -0,0 +1,38 @@
+import Logo from ".";
+
+export default {
+  title: "Inglorious Logo",
+  component: Logo,
+};
+
+export const Default = {
+  args: {},
+};
+
+export const Big = {
+  args: { size: 320 },
+};
+
+export const Interactive = {
+  args: { ...Big.args, isInteractive: true },
+};
+
+export const IngloriousEngine = {
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          background: "black",
+          width: 320,
+          height: 240,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: { size: 128, faces: [{ image: "I", eye: true }, { image: "E" }] },
+};

package/vite.config.js

@@ -0,0 +1,8 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import svgrPlugin from "vite-plugin-svgr";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgrPlugin()],
+});