<div id="root"></div>

body {
	background-color: var(--dark);
	color: var(--light);
	margin: 0;
  padding: 0;
  height: 100vh;
}

.box {
	width: 100px;
	height: 100px;
  border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 600;
  margin: 10px;
}

.circle {
	width: 100px;
	height: 100px;
  border-radius: 99%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 600;
  margin: 10px;
}

.App, .container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
}

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/react";

const { useRef } = React;

function App() {
  const container = useRef();
  const circle = useRef();

  useGSAP((context) => {
    let mm = gsap.matchMedia();

    mm.add("(min-width: 800px)", () => {
        // use selectors...
      gsap.to(".box", { rotation: "+=360", duration: 3 });
      
      // or refs...
      gsap.to(circle.current, { rotation: "-=360" });
    });

    console.log(context);
    
  }, { scope: container }); // <-- scope for selector text (optional)

  return (
    <div className="App">
      <div ref={container} className="container">
        <div className="box gradient-blue">selector</div>
        <div className="circle gradient-green" ref={circle}>
          Ref
        </div>
      </div>
      <div className="box gradient-blue">selector</div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);