??? ?? Temporal ?????? Shawn Wang (Swyx)? ?? ? ????????. ??? ???? ??? ? ???? ????? ?? ????. ?????? ???? ?? ??? ??? ???? ???????. ??? ??? ??? ?? ? ??? ??? ??????.

?? ?? ? ??? ??? ?? ?? ???????. ???? ??? ? ? ????.

?? ? CSS ??? ?? ??? ??? ?? ?? ??. @temporalio?? ??? ? ??? ??? ????. ??? ?? ??! ?? @reactjs && @tailwindcss (???? Nextjs)? @codepen pic.twitter.com/s9xp2trrox? ?? Codepen ??

- Jhey ?? ?? (@jh3yy) 2021 ? 7 ? 2 ?

? ???? ??? ??? ??? ?? ?? ???? ???? ?? ?? ???? ?????. ? ?? ?? ??? ??????? ?? ??? ???? ???? ????? ??? ??? ???? ????.

? ?? ??? ?????! ??? React, Greensock ? HTML? ?????<canvas></canvas> ??. React? ?? ??????? ???? ?? ??????? ??? ??? ?? ??? ?????.

?? ? ??

 'https://cdn.skypack.dev/react'?? ?? ?? ??;
'https://cdn.skypack.dev/react-dom'? import Reactdom;
'https://cdn.skypack.dev/gsap'?? GSAP ?? ??;

const root_node = document.querySelector ( '#app');

const starscape = () =><h1> ?? Thingzzz!</h1> ;

const app = () =><starscape></starscape> ;

REACTDOM.RENDER (<app></app> , root_node);

??, ??? a<canvas></canvas> React? useEffect ?? ??? ?????? ??? ???? ????. React? ???? ??? ??? ??? ?? ??????.

 const starscape = () => {
  const canvasref = react.useref (null);
  ??<canvas ref="{canvasRef}"></canvas> ;
};

??? ??????<canvas></canvas> ???? ??? ??? ?? ???? :

 ??? {
  ?? : ??;
  ?? : 0;
  ?? : #262626;
  Z- ??? : -1;
  ?? : 100VH;
  ?? : 100VW;
}

? ??

??? ??? ???? ??? ?? ???? ?? ???? ??? ? ????. a? ?? ?????<canvas></canvas> ????? ?? arc ??? ???? ?? ?????. useEffect ??? ???? ??? ? (?? ?)? ????????.

 const starscape = () => {
  const canvasref = react.useref (null);
  const contextref = react.useref (null);
  React.useeffect (() => {
    canvasref.current.width = window.innerWidth;
    canvasref.current.height = window.innerheight;
    Contextref.current = canvasref.current.getContext ( '2d');
    Contextref.current.fillStyle = 'Yellow';
    Contextref.current.beginpath ();
    contextref.current.arc (
      Window.innerWidth / 2, // x
      Window.innerHeight / 2, // y
      100, // ??
      0, // ?? ?? (???)
      Math.pi * 2 // ?? ?? (???)
    );
    contextref.current.fill ();
  }, []);
  ??<canvas ref="{canvasRef}"></canvas> ;
};

??? ??? ?? ????. ??? ???? useEffect ?? ????. ??? ?? ??? ?? ?? ? ?????. ?? ??? ??? ??? ??? ??? ? ????.

??? ?? ?? ???? ????????. ??? ??? ???? ?? ?? ? ??? ??? ?????? LOAD ??? ???????.

 const load = () => {
  const vmin = math.min (Window.InnerHeight, Window.innerWidth);
  const star_count = math.floor (vmin * densityratio);
  canvasref.current.width = window.innerWidth;
  canvasref.current.height = window.innerheight;
  starsref.current = new Array (star_count) .fill (). map (() => ({{
    X : gsap.utils.random (0, window.innerwidth, 1),
    y : gsap.utils.random (0, window.innerheight, 1),
    ?? : gsap.utils.random (1, Sizelimit, 1),
    ??? : 1,
    alpha : gsap.utils.random (0.1, defaultalpha, 0.1),
  });
};

? ?? ?? (x, y ??, ??, ???, ??)? ???? ??? ?? ?????. sizeLimit , defaultAlpha ? densityRatio ???? ?? ? Starscape ?? ??? ???? ?????.

?? ?? ?? :

 {
  "X": 1252,
  "Y": 29,
  "??": 4,
  "???": 1,
  "??": 0.5
}

? ?? ????? ??, ??? stars ?? ?? ???? RENDER ??? ???? arc

 const render = () => {
  contextref.current.clearRect (
    0,
    0,
    canvasref.current.width,
    canvasref.current.height
  );
  starsref.current.foreach ((star) => {
    Contextref.current.fillstyle =`hsla (0, 100%, 100%, $ {star.alpha})`;
    Contextref.current.beginpath ();
    Contextref.current.arc (star.x, star.y, star.size / 2, 0, math.pi * 2);
    contextref.current.fill ();
  });
};

clearRect ??? ??? ?? ???? ???? ?????? ?????.

??? Starscape ?? ?? (?? ?? ?????)? ??? ????.

 const starscape = ({densityratio = 0.5, sizelimit = 5, defaultalpha = 0.5}) => {
  const canvasref = react.useref (null);
  const contextref = react.useref (null);
  const starsref = react.useref (null);
  React.useeffect (() => {
    Contextref.current = canvasref.current.getContext ( '2d');
    const load = () => {
      const vmin = math.min (Window.InnerHeight, Window.innerWidth);
      const star_count = math.floor (vmin * densityratio);
      canvasref.current.width = window.innerWidth;
      canvasref.current.height = window.innerheight;
      starsref.current = new Array (star_count) .fill (). map (() => ({{
        X : gsap.utils.random (0, window.innerwidth, 1),
        y : gsap.utils.random (0, window.innerheight, 1),
        ?? : gsap.utils.random (1, Sizelimit, 1),
        ??? : 1,
        alpha : gsap.utils.random (0.1, defaultalpha, 0.1),
      });
    };
    const render = () => {
      Contextref.current.clearRect (0, 0, CanvasRef.current.width, canvasref.current.height);
      starsref.current.foreach ((star) => {
        Contextref.current.fillstyle =`hsla (0, 100%, 100%, $ {star.alpha})`;
        Contextref.current.beginpath ();
        Contextref.current.arc (star.x, star.y, star.size / 2, 0, math.pi * 2);
        contextref.current.fill ();
      });
    };
    const run = () => {
      ?();
      ???();
    };
    ???();
    window.addeventListener ( 'resize', run);
    return () => {
      window.removeEventListener ( 'resize', run);
    };
  }, []);
  ??<canvas ref="{canvasRef}"></canvas> ;
};

??? ??? ???? ? ??? ??????. ??? ?? ??? ???? ?? LOAD ? RENDER ?? ?? (???? ???? ?? Defouncing, ????? ??).

?? ?? ??

?? ?? ?? ?? ??? ???. ???? ???? ?? ??? ?? ???? ?????.

???? ? ?? ??? ??? ???? ?? UPDATE ??? ?? ? ?? Greensock? mapRange ????? ???? Star? ???? ??? ?? ??????. ?? ???? ??? ???? ?? scaleLimit ? proximityRatio ??? ?????.

 const update = ({x, y}) => {
  starsref.current.foreach ((star) => {
    const ?? = Math.sqrt (math.pow (star.x -x, 2) math.pow (star.y -y, 2));
    gsap.to (star, {
      ??? : scalemapperref.current (math.min (??, vminref.current * proximityRatio)),
      ?? : alphamapperref.current (math.min (??, vminref.current * proximityRatio)),
    });
  });
};

????? ????? ?? gsap.ticker ( requestAnimationFrame ? ?? ??)? ???? ??? RENDER ???? ???? ?????. ?? ??? (FPS)? 24? ?????. RENDER ??? ?? ARC? ??? ? star.scale ?? ?????.

 ?();
gsap.ticker.add (render);
gsap.ticker.fps (24);
window.addeventListener ( 'resize', load);
document.addeventListener ( 'pointermove', ????);
return () => {
  window.removeEventListener ( 'Resize', Load);
  document.removeeventListener ( 'pointermove', update);
  gsap.ticker.remove (render);
};

?? ???? ??? ? ?? ?????!

???? ???? ??? ??? ???? ??, ??? ?? ?? ??? ?? ??? pointerleave ??? ???? ?????.

 const exit = () => {
  gsap.to (starsref.current, {scale : 1, alpha : defaultalpha});
};

// ... ??? ??? ...
document.addeventListener ( 'pointerleave', exit);
return () => {
  // ... ?? ...
  document.removeEventListener ( 'pointerleave', exit);
  gsap.ticker.remove (render);
};

??? : ??? ?? ??? ??

??? ?? ??? ??? ?????. ??? ???? ??? ???? ?? ?????? ??????.

 const konami_code = '???, ???, ??? ??, ??? ??, ???, ???, ???, ???, keyb, keya';
const coderef = react.useref ([]);
React.useeffect (() => {
  const handleCode = (e) => {
    coderef.current = [... coderef.current, e.code] .slice (coderef.current.length> 9? coderef.current.length -9 : 0);
    if (coderef.current.join ( ','). tolowercase () === konami_code.tolowercase ()) {
      // ??? ?? ????? ???
    }
  };
  window.addeventListener ( 'keyup', handleCode);
  return () => {
    window.removeEventListener ( 'keyup', handleCode);
  };
}, []);

Konami ?? ??? ??? ??? ???? ??? Starscape ?? ??? ?? ?? ???? ???????. ??? ??? ??? ??? React, Greensock ? HTML? ???? ???? ????? ??? ?? ??? ??? Starry ??? ??? ??? ?????.<canvas></canvas> . ??? ?? ??????? ? ??? ??????? ?? gsap.timeline ? ??? ?? ?????.

? ??? ???? ??? ??? ??? ? ??? ??? ?????. ??? ???? ???? ??? ?? ????? ???????. ??? ??, ?? ? ??????? ???? ???? ???? ???? ????.

? ??? ?????? ??? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!