View index.html
<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>
View index.html
<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">
View index.html
<canvas id="canvas" width="900" height="500"></canvas>
View index.html
<!-- https://angulargeometry.tumblr.com/post/173654378690/mint-interior-gif-daily-c4d -->
<div class="container">
<div class="cube" style="--width: 8;">
<div class="side top"></div>
<div class="side back"></div>
<div class="side right"></div>
</div>
<div class="cube wobble" style="--width: 6;">
View index.html
<a href="https://youtu.be/YjiHf3RE4o4" target="_blank" data-keyframers-credit style="color: #FFF; text-shadow: 0 1px 0px #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div id="site">
<h1 class="heading">Keyframers</h1>
<section class="articles">
<article class="article">
<div class="inner">
View index.html
<a href="https://youtu.be/H7FEK6geguM" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<h1 id="heading">@davidkpiano<span id="pos"></span></h1>
<h2 style="text-align: center"><a href="http://reactivex.io/rxjs">reactivex.io/rxjs</a><br/>
</h2>
<div id="card">
<div id="title"></div>
</div>
View index.html
<h1 class="title absolute-center">
<span class="knockout">
<!-- Change text here -->
<span class="knockout__text">KNOCKOUT TEXT</span>
<svg class="knockout__svg" width="100%" height="100%" text-rendering="geometricPrecision">
<defs>
<mask id="text-clip">
<text x="0" y="0.9em" width="100%" height="100%" fill="#FFF">KNOCKOUT TEXT</text>