Make "Reanimated" title in docs interactive.

docs/src/components/Hero/SelectedLabel/SelectionBox/index.tsx

@@ -0,0 +1,76 @@
+import clsx from 'clsx';
+import React from 'react';
+import styles from './styles.module.css';
+import Draggable from 'react-draggable';
+
+export enum DraggableId {
+  TOP_LEFT,
+  TOP_RIGHT,
+  BOTTOM_LEFT,
+  BOTTOM_RIGHT,
+  CENTER,
+}
+
+const getClassListByIdentifier = (
+  identifier: DraggableId,
+  isInteractive: boolean
+) => {
+  const isBottom =
+    identifier == DraggableId.BOTTOM_LEFT ||
+    identifier == DraggableId.BOTTOM_RIGHT;
+  const isLeft =
+    identifier == DraggableId.BOTTOM_LEFT || identifier == DraggableId.TOP_LEFT;
+  const isCenter = identifier === DraggableId.CENTER;
+
+  let classList = styles.centerDraggable;
+
+  if (!isCenter) {
+    classList = clsx(
+      styles.selectionBox,
+      isBottom ? styles.boxLower : styles.boxUpper,
+      isLeft ? styles.boxLeft : styles.boxRight
+    );
+  }
+
+  if (isInteractive) {
+    classList = clsx(classList, styles.movable);
+  }
+
+  return classList;
+};
+
+const SelectionBox: React.FC<{
+  propagationFunction: (
+    movementDelta: { x: number; y: number },
+    draggableIdentifier: DraggableId
+  ) => void;
+  draggableIdentifier: DraggableId;
+  children?: React.ReactNode;
+  isInteractive: boolean;
+}> = ({
+  propagationFunction,
+  draggableIdentifier,
+  children,
+  isInteractive,
+}) => {
+  const classList = getClassListByIdentifier(
+    draggableIdentifier,
+    isInteractive
+  );
+
+  return (
+    <Draggable
+      onDrag={(event: any) => {
+        propagationFunction(
+          { x: event.movementX, y: event.movementY },
+          draggableIdentifier
+        );
+      }}
+      allowAnyClick={false}
+      axis={'none'}>
+      <div className={classList}>{children}</div>
+    </Draggable>
+  );
+};
+
+export default SelectionBox;

docs/src/components/Hero/SelectedLabel/SelectionBox/styles.module.css

@@ -0,0 +1,64 @@
+.movable {
+  cursor: grab;
+}
+
+.movable:active {
+  cursor: grabbing;
+}
+
+.selectionBox {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  z-index: 2;
+  background: var(--swm-white);
+  border: 2px solid var(--swm-landing-heading-selected-border);
+  transition: scale 50ms ease-in-out;
+}
+
+.movable.selectionBox:active {
+  scale: 1.35;
+}
+
+.movable.selectionBox:hover {
+  scale: 1.35;
+}
+
+.centerDraggable {
+  width: 100%;
+  height: 100%;
+}
+
+.boxUpper {
+  top: -7px;
+}
+
+.boxLower {
+  bottom: -13px;
+}
+
+.boxLeft {
+  left: -15px;
+}
+
+.boxRight {
+  right: -15px;
+}
+
+@media (max-width: 768px) {
+  .boxUpper {
+    top: -11px;
+  }
+
+  .boxLower {
+    bottom: -13px;
+  }
+
+  .boxLeft {
+    left: -7px;
+  }
+
+  .boxRight {
+    right: -7px;
+  }
+}

docs/src/components/Hero/SelectedLabel/index.tsx

@@ -1,38 +1,127 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styles from './styles.module.css';
+import SelectionBox, { DraggableId } from './SelectionBox';
+import {
+  DynamicStyles,
+  StaticStyles,
+  TextScaleStyles,
+  computeSelectionStyles,
+  computeTextStyles,
+} from './utils';
+
+const SelectedLabel: React.FC<{
+  children: React.ReactNode;
+  isInteractive: boolean;
+}> = ({ children, isInteractive = false }) => {
+  // DOM refs
+  const selectionRef = useRef(null);
+  const selectionContainerRef = useRef(null);
+  const textLabelRef = useRef(null);
+
+  // Render-persistent label positioning styles
+  const dynamicStyles = useRef<DynamicStyles>({
+    top: 0,
+    left: 0,
+    width: null,
+    height: null,
+  });
+
+  const staticStyles = useRef<StaticStyles>({
+    initialWidth: null,
+    initialHeight: null,
+    enabledTextInteractivity: false,
+  });
+
+  const applyDynamicStyles = (newDynamicStyles: DynamicStyles) => {
+    const currentDynamicStyles = dynamicStyles.current;
+
+    // save changes
+    currentDynamicStyles.top = newDynamicStyles.top;
+    currentDynamicStyles.left = newDynamicStyles.left;
+    currentDynamicStyles.width = newDynamicStyles.width;
+    currentDynamicStyles.height = newDynamicStyles.height;
+
+    // apply changes to refs
+    selectionRef.current.style.transform = `translate(${currentDynamicStyles.left}px, ${currentDynamicStyles.top}px)`;
+    selectionContainerRef.current.style.width = `${currentDynamicStyles.width}px`;
+    selectionContainerRef.current.style.height = `${currentDynamicStyles.height}px`;
+  };
+
+  const applyTextScale = (scaleObject: TextScaleStyles) => {
+    textLabelRef.current.style.transform = `translate(-50%, -50%) scale(${scaleObject.x}, ${scaleObject.y})`;
+  };
+
+  useEffect(() => {
+    if (!isInteractive) return;
+
+    let rect = selectionContainerRef.current.getBoundingClientRect();
+    staticStyles.current = {
+      initialWidth: rect.width,
+      initialHeight: rect.height,
+      enabledTextInteractivity: true,
+    };
+
+    applyDynamicStyles({
+      top: 0,
+      left: 0,
+      width: rect.width,
+      height: rect.height,
+    });
+  }, [isInteractive]);
+
+  const movementPropagator = (
+    movementDelta: { x: number; y: number },
+    draggableIdentifier: DraggableId
+  ) => {
+    if (!isInteractive) return;
+
+    applyDynamicStyles(
+      computeSelectionStyles(
+        movementDelta,
+        draggableIdentifier,
+        dynamicStyles.current
+      )
+    );
+    applyTextScale(
+      computeTextStyles(dynamicStyles.current, staticStyles.current)
+    );
+  };
+
+  const classList = clsx(
+    isInteractive ? styles.preEnabledTextInteractivity : null,
+    staticStyles.current.enabledTextInteractivity
+      ? styles.interactiveHeaderText
+      : styles.headerText
+  );
 
-const SelectedLabel: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
   return (
-    <span className={clsx(styles.headingLabel, styles.selection)}>
-      <div className={styles.selectionContainer}>
-        <div
-          className={clsx(
-            styles.selectionBox,
-            styles.boxUpper,
-            styles.boxLeft
-          )}></div>
-        <div
-          className={clsx(
-            styles.selectionBox,
-            styles.boxUpper,
-            styles.boxRight
-          )}></div>
-        <div
-          className={clsx(
-            styles.selectionBox,
-            styles.boxLower,
-            styles.boxLeft
-          )}></div>
-        <div
-          className={clsx(
-            styles.selectionBox,
-            styles.boxLower,
-            styles.boxRight
-          )}></div>
-        {children}
+    <span ref={selectionRef} className={styles.selection}>
+      <div ref={selectionContainerRef} className={styles.selectionContainer}>
+        <SelectionBox
+          propagationFunction={movementPropagator}
+          draggableIdentifier={DraggableId.TOP_LEFT}
+          isInteractive={isInteractive}></SelectionBox>
+        <SelectionBox
+          propagationFunction={movementPropagator}
+          draggableIdentifier={DraggableId.TOP_RIGHT}
+          isInteractive={isInteractive}></SelectionBox>
+        <SelectionBox
+          propagationFunction={movementPropagator}
+          draggableIdentifier={DraggableId.BOTTOM_LEFT}
+          isInteractive={isInteractive}></SelectionBox>
+        <SelectionBox
+          propagationFunction={movementPropagator}
+          draggableIdentifier={DraggableId.BOTTOM_RIGHT}
+          isInteractive={isInteractive}></SelectionBox>
+        <SelectionBox
+          propagationFunction={movementPropagator}
+          draggableIdentifier={DraggableId.CENTER}
+          isInteractive={isInteractive}>
+          <span ref={textLabelRef} className={classList}>
+            {children}
+          </span>
+        </SelectionBox>
       </div>
     </span>
   );

docs/src/components/Hero/SelectedLabel/styles.module.css

@@ -5,44 +5,62 @@
 
 .selection {
   display: inline-block;
-  padding: 2px 10px 8px;
+  position: absolute;
+  padding: 3px 10px 8px;
   color: var(--swm-landing-heading-selected);
   line-height: 1;
+  z-index: 1;
 
   /* normally one would do this with border dashed but that doesn't allow for modifying spacing between dashes */
   /* prettier-ignore */
   background:
-    linear-gradient(to right, var(--swm-landing-heading-selected-border) 50%, transparent 0%) top/var(--swm-dash-spacing) var(--swm-dash-width) repeat-x, /* top */
-    linear-gradient(var(--swm-landing-heading-selected-border) 50%, transparent 0%) right/var(--swm-dash-width) var(--swm-dash-spacing) repeat-y, /* right */
-    linear-gradient(to right, var(--swm-landing-heading-selected-border) 50%, transparent 0%) bottom/var(--swm-dash-spacing) var(--swm-dash-width) repeat-x, /* bottom */
-    linear-gradient(var(--swm-landing-heading-selected-border) 50%, transparent 0%) left/var(--swm-dash-width) var(--swm-dash-spacing) repeat-y; /* left */
+    linear-gradient(to right, var(--swm-landing-heading-selected-border) 50%, transparent 0%) top/var(--swm-dash-spacing) var(--swm-dash-width) repeat-x,
+    /* top */
+    linear-gradient(var(--swm-landing-heading-selected-border) 50%, transparent 0%) right/var(--swm-dash-width) var(--swm-dash-spacing) repeat-y,
+    /* right */
+    linear-gradient(to right, var(--swm-landing-heading-selected-border) 50%, transparent 0%) bottom/var(--swm-dash-spacing) var(--swm-dash-width) repeat-x,
+    /* bottom */
+    linear-gradient(var(--swm-landing-heading-selected-border) 50%, transparent 0%) left/var(--swm-dash-width) var(--swm-dash-spacing) repeat-y;
+  /* left */
 }
 
 .selectionContainer {
   position: relative;
+  text-align: center;
 }
 
-.selectionBox {
-  position: absolute;
-  width: 12px;
-  height: 12px;
-
-  background: var(--swm-white);
-  border: 2px solid var(--swm-landing-heading-selected-border);
+.headerText {
+  position: relative;
 }
 
-.boxUpper {
-  top: -6px;
+.interactiveHeaderText {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  top: 50%;
+  user-select: none;
 }
 
-.boxLower {
-  bottom: -14px;
+.preEnabledTextInteractivity {
+  margin-right: 24px;
 }
 
-.boxLeft {
-  left: -14px;
-}
+@media (max-width: 768px) {
+  :root {
+    --swm-dash-spacing: 20px;
+  }
+
+  .selection {
+    padding: 6px 2px 8px;
+    display: block;
+    margin: 6px 0;
+  }
+
+  .headerText {
+    margin: 0 10px;
+  }
 
-.boxRight {
-  right: -14px;
+  .preInteractiveHeaderText {
+    margin-right: 0;
+  }
 }