<div id="figure" style="width: 400px"></div>

<script type="module">
  import { branches } from "https://esm.sh/@lucasmarkes/hairline";

  branches(document.getElementById("figure"));
</script>

38:T484,

import { Vault } from "@lucasmarkes/hairline/react";

export default function Page() {
  return <Vault />;
}

39:T71b,

import { vault } from "@lucasmarkes/hairline";

const figure = vault(document.getElementById("figure")!);

figure.update({ intensity: 0.8 });
figure.destroy();

3a:T8dd,

<div id="figure" style="width: 400px"></div>

<script type="module">
  import { vault } from "https://esm.sh/@lucasmarkes/hairline";

  vault(document.getElementById("figure"));
</script>

3b:T488,

import { Lockers } from "@lucasmarkes/hairline/react";

export default function Page() {
  return <Lockers />;
}

3c:T71f,

import { lockers } from "@lucasmarkes/hairline";

const figure = lockers(document.getElementById("figure")!);

figure.update({ intensity: 0.8 });
figure.destroy();

3d:T8e1,

<div id="figure" style="width: 400px"></div>

<script type="module">
  import { lockers } from "https://esm.sh/@lucasmarkes/hairline";

  lockers(document.getElementById("figure"));
</script>

3e:T488,

import { Padlock } from "@lucasmarkes/hairline/react";

export default function Page() {
  return <Padlock />;
}

3f:T71f,

import { padlock } from "@lucasmarkes/hairline";

const figure = padlock(document.getElementById("figure")!);

figure.update({ intensity: 0.8 });
figure.destroy();

40:T8e1,

<div id="figure" style="width: 400px"></div>

<script type="module">
  import { padlock } from "https://esm.sh/@lucasmarkes/hairline";

  padlock(document.getElementById("figure"));
</script>

41:T484,

import { Patch } from "@lucasmarkes/hairline/react";

export default function Page() {
  return <Patch />;
}

42:T71b,

import { patch } from "@lucasmarkes/hairline";

const figure = patch(document.getElementById("figure")!);

figure.update({ intensity: 0.8 });
figure.destroy();

43:T8dd,

<div id="figure" style="width: 400px"></div>

<script type="module">
  import { patch } from "https://esm.sh/@lucasmarkes/hairline";

  patch(document.getElementById("figure"));
</script>

44:T482,

import { Dish } from "@lucasmarkes/hairline/react";

export default function Page() {
  return <Dish />;
}

45:T719,

import { dish } from "@lucasmarkes/hairline";

const figure = dish(document.getElementById("figure")!);

figure.update({ intensity: 0.8 });
figure.destroy();

46:T8db,

<div id="figure" style="width: 400px"></div>

<script type="module">
  import { dish } from "https://esm.sh/@lucasmarkes/hairline";

  dish(document.getElementById("figure"));
</script>

47:T486,

import { Router } from "@lucasmarkes/hairline/react";

export default function Page() {
  return <Router />;
}

48:T71d,

import { router } from "@lucasmarkes/hairline";

const figure = router(document.getElementById("figure")!);

figure.update({ intensity: 0.8 });
figure.destroy();

49:T8df,

<div id="figure" style="width: 400px"></div>

<script type="module">
  import { router } from "https://esm.sh/@lucasmarkes/hairline";

  router(document.getElementById("figure"));
</script>

5:[["$","header",null,{"className":"topbar","children":[["$","div",null,{"className":"flex items-baseline gap-2","children":[["$","a",null,{"href":"/","className":"topbar-name text-[15px] font-medium tracking-[-0.02em]","children":"hairline"}],["$","span",null,{"className":"topbar-version","data-version":true,"children":["v","0.2.0"]}]]}],["$","nav",null,{"className":"flex items-center","children":[["$","a",null,{"className":"topbar-link","href":"/figures","children":"Figures"}],["$","a",null,{"className":"topbar-link","href":"/skill","children":"Skill"}],["$","a",null,{"className":"topbar-link","href":"/docs","children":"Docs"}],["$","a",null,{"className":"topbar-link","href":"/inspo","children":"Inspo"}],["$","a",null,{"className":"topbar-link","href":"https://github.com/lucasmarkes/hairline","aria-label":"GitHub","children":["$","svg",null,{"viewBox":"0 0 16 16","width":"16","height":"16","aria-hidden":"true","fill":"currentColor","children":["$","path",null,{"d":"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"}]}]}]]}]]}],["$","$L10",null,{"code":{"riffle":[{"label":"React","file":"app/page.tsx","html":"$11"},{"label":"Vanilla","file":"main.ts","html":"$12"},{"label":"CDN","file":"index.html","html":"$13"}],"terrain":[{"label":"React","file":"app/page.tsx","html":"$14"},{"label":"Vanilla","file":"main.ts","html":"$15"},{"label":"CDN","file":"index.html","html":"$16"}],"exploded":[{"label":"React","file":"app/page.tsx","html":"$17"},{"label":"Vanilla","file":"main.ts","html":"$18"},{"label":"CDN","file":"index.html","html":"$19"}],"phosphor":[{"label":"React","file":"app/page.tsx","html":"$1a"},{"label":"Vanilla","file":"main.ts","html":"$1b"},{"label":"CDN","file":"index.html","html":"$1c"}],"slow":[{"label":"React","file":"app/page.tsx","html":"$1d"},{"label":"Vanilla","file":"main.ts","html":"$1e"},{"label":"CDN","file":"index.html","html":"$1f"}],"turntable":[{"label":"React","file":"app/page.tsx","html":"$20"},{"label":"Vanilla","file":"main.ts","html":"$21"},{"label":"CDN","file":"index.html","html":"$22"}],"keyboard":[{"label":"React","file":"app/page.tsx","html":"$23"},{"label":"Vanilla","file":"main.ts","html":"$24"},{"label":"CDN","file":"index.html","html":"$25"}],"elevator":[{"label":"React","file":"app/page.tsx","html":"$26"},{"label":"Vanilla","file":"main.ts","html":"$27"},{"label":"CDN","file":"index.html","html":"$28"}],"phone":[{"label":"React","file":"app/page.tsx","html":"$29"},{"label":"Vanilla","file":"main.ts","html":"$2a"},{"label":"CDN","file":"index.html","html":"$2b"}],"laptop":[{"label":"React","file":"app/page.tsx","html":"$2c"},{"label":"Vanilla","file":"main.ts","html":"$2d"},{"label":"CDN","file":"index.html","html":"$2e"}],"terminal":[{"label":"React","file":"app/page.tsx","html":"$2f"},{"label":"Vanilla","file":"main.ts","html":"$30"},{"label":"CDN","file":"index.html","html":"$31"}],"cabinet":[{"label":"React","file":"app/page.tsx","html":"$32"},{"label":"Vanilla","file":"main.ts","html":"$33"},{"label":"CDN","file":"index.html","html":"$34"}],"branches":[{"label":"React","file":"app/page.tsx","html":"$35"},{"label":"Vanilla","file":"main.ts","html":"$36"},{"label":"CDN","file":"index.html","html":"$37"}],"vault":[{"label":"React","file":"app/page.tsx","html":"$38"},{"label":"Vanilla","file":"main.ts","html":"$39"},{"label":"CDN","file":"index.html","html":"$3a"}],"lockers":[{"label":"React","file":"app/page.tsx","html":"$3b"},{"label":"Vanilla","file":"main.ts","html":"$3c"},{"label":"CDN","file":"index.html","html":"$3d"}],"padlock":[{"label":"React","file":"app/page.tsx","html":"$3e"},{"label":"Vanilla","file":"main.ts","html":"$3f"},{"label":"CDN","file":"index.html","html":"$40"}],"patch":[{"label":"React","file":"app/page.tsx","html":"$41"},{"label":"Vanilla","file":"main.ts","html":"$42"},{"label":"CDN","file":"index.html","html":"$43"}],"dish":[{"label":"React","file":"app/page.tsx","html":"$44"},{"label":"Vanilla","file":"main.ts","html":"$45"},{"label":"CDN","file":"index.html","html":"$46"}],"router":[{"label":"React","file":"app/page.tsx","html":"$47"},{"label":"Vanilla","file":"main.ts","html":"$48"},{"label":"CDN","file":"index.html","html":"$49"}]},"header":"$L4a","end":"$L4b"}],"$L4c"]

Interfaces

Data

Machines

Devices

Coding

Security

Connectivity