shshaw

<!-- 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;">

shshaw

<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">

shshaw

Cube Consumer

CSS 3D animation inspired by http://pislices.ca/post/173545303214/box-180503

A Pen by Shaw on CodePen.

License.

shshaw

<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>

shshaw

<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>

shshaw

Canvas Clip

A Pen by Shaw on CodePen.

License.

shshaw

Apply a hidden style with WAAPI.

A Pen by Shaw on CodePen.

License.

shshaw

<script>console.clear();</script>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>

shshaw

<div id="app"></div>

shshaw

<h1>
  This is some long text to fade in
</h1>