shshaw

<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div class="triangles">
  <div class="triangle">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="triangle -big">

shshaw

<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF; text-shadow: 0 1px 0 #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div class="sun">
  <svg class="eclipse-container" viewBox="0 0 100 100">
    <circle class="eclipse" cx="50" cy="50" r="49" transform="rotate(-90 50 50)" />
  </svg>
</div>

shshaw

<div class="box"></div>
<div class="box"></div>

shshaw

<!--
https://dribbble.com/shots/4434643-Clock-Loader-Interaction
-->
<div class="clock">
  <div class="hand hour"></div>
  <div class="hand minute"></div>
</div>

shshaw

vue ui -D
🚀  Starting GUI...
UI 13:43.57 Plugin API loaded for @vue/cli-service
UI 13:43.57 Project open Sy8GPO2yQ /Users/stephen/Sites/ell-uncomfortable
🌠  Ready on http://localhost:8001
UI 13:43.57 Hook onProjectOpen 1 handlers
UI 13:43.57 SharedData set webpack-dashboard-serve-status null (0 watchers)
UI 13:43.57 SharedData set webpack-dashboard-serve-progress 0 (0 watchers)
UI 13:43.57 SharedData set webpack-dashboard-serve-operations null (0 watchers)
UI 13:43.57 SharedData set webpack-dashboard-serve-stats null (0 watchers)

shshaw

<a href="https://youtu.be/Wt5ENQj9FCQ" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div id="app" data-state="bike">
  
  <div class="ui-circle"></div>
  
  <header class="ui-header">
    <button id="back"></button>
  </header>

shshaw

<a href="https://youtu.be/kd_zuEYCDck" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<input type="radio" name="scene" id="scene-1" value="1" checked />
<input type="radio" name="scene" id="scene-2" value="2" />
<input type="radio" name="scene" id="scene-3" value="3" />
<input type="radio" name="scene" id="scene-4" value="4" />

<main id="site">
  <header class="top-nav">

shshaw

<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1067" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1067"></div>
</div>

<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1061" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1061"></div>
</div>

shshaw

<a href="https://youtu.be/SJu3igAsVco" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div id="speedometer">
  <div class="speed-bg">
    <div class="speed-bg__steady"></div>
    <div class="speed-bg__pulse"></div>
  </div>
  
  <svg class="speed-ticks" viewBox="0 0 100 100">

shshaw

<canvas id="canvas" width="900" height="500"></canvas>