{{ template "head.html" .}}

<div id="top_img">
  <video src='/public/braille_xr.webm' autoplay loop muted
    style="
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
    "
  >
  </video>
  <div
    style="
      position: absolute;
      top: 66.66%; left: 0; right: 0; bottom: 0;
      background: linear-gradient(in oklab to top, #FFFFFFFF, #FFFFFF00);
      mix-blend-mode: color;
    "
  ></div>
</div>

<!-- <div style="height: calc(44px + 12px);"></div> -->

<div
  style="
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  "
>
  {{ template "title_desc.html" .}}
</div>

<!-- <div style='height: 1024px;'></div> -->

<h2>problem</h2>
<ul>
  <li>How can we help make XR (VR/AR/MR) accessible to people with visual impairments?</li>
  <li>Current refreshable braille devices are very expensive ~$4,000</li>
  <li>Cumbersome, with around 40x6x2 actuators with carefully tuned long levers</li>
  <li>1 interaction method</li>
  <li>Other interactions of input for people with low vision require voice input which is not always comfortable.</li>
</ul>
<img src='/public/img/brailliant_bi_40x.webp' width='60%'>

<div style='height: 64px;'></div>

<h2>progress</h2>
<p style='margin-top: 0;'>code, hardware, software and project files: <a href='https://git.dof.dev/dofdev/braille_xr'>git repo</a></p>
<ul>
  <li>easy to manufacture braille display</li>
  <li>small enough to leverage openxr hand tracking</li>
  <li>software demo braille keyboard w/custom layouts</li>
  <li>initially optimizing for braille input and education</li>
</ul>
<img src='/public/img/hack.webp' width='60%'>

<div style='height: 64px;'></div>

<h2>support</h2>
<p style='margin-top: 0;'>have some resources or experience to throw our way?<br>contact us on our discord server: <a href=''>invite/quick link</a></p>

<div style='height: 128px;'>&nbsp;</div>