Instantly share code, notes, and snippets.

View index.html
<label for="input">Type Here</label>
<textarea name="input" id="input">
Hello
world
</textarea>
View index.html
<div id="px-render"></div>
<textarea id="input">hello</textarea>
View index.html
<a href="https://twitch.tv/keyframers" target="_blank" data-keyframers-credit style="color: #FFF">Watch the @keyframers live, Monday @ 21:00 EST</a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div class="lightning-round">
<span class="text" data-splitting> LIGHTNING ROUND </span>
<span class="zap" data-splitting>⚡</span>
</div>
View index.html
<div class="text-overlap" data-splitting>Extra<b>v</b>agant</div>
View index.html
<div class="palette" data-cols="10" data-rows="10"></div>
View _-turnable-tables-part-1-_-3d-css-record-player-keyframers-1-18-0.markdown
View celebrating-1-000.markdown

Celebrating 1,000!

1,000 Twitter Followers 1,000 YouTube Subscribers

Thank you all for your support! 🎉

✍️ Reply with your favorite tips/eps! We'd love to hear what you've learned from the streams ✉️ Sign up at http://keyframe.rs for news about more exciting content coming soon !

View gliding-gallery-simple-image-slider-transitions-keyframers-1-15-0.markdown
View splitting-image.css
.splitting-image img { width: 100%; display: block; }
@supports ( display: grid ) {
.splitting-image {
position: relative;
overflow: hidden;
background-size: cover;
visibility: hidden;
}
View index.html
<div class="debug" style="display: none;"></div>
<a href="https://youtu.be/_rKtTIJJaJY" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div id="app" data-state="wallet" data-panning="0">
<header class="ui-header">
</header>
<div class="ui-wallet">