Free for the community
the{lab}..
Copy-and-paste snippets for WordPress and Flatsome. Free to use, built while we build for clients.
03 snippets / more coming
Floating image
A soft, endless float for PNGs with transparent background. Great for mascots, products and hero details.
Paste in an HTML element. Change the image URL.view code
<style>
.float-img{animation:floatImg 5s ease-in-out infinite}
@keyframes floatImg{
0%,100%{transform:translateY(0) rotate(-2deg)}
50%{transform:translateY(-14px) rotate(2deg)}
}
@media (prefers-reduced-motion:reduce){.float-img{animation:none}}
</style>
<img class="float-img" src="YOUR-IMAGE-URL" alt="">
Glitch effect
A quick digital glitch every few seconds. Slices, shifts and color flicker, no JavaScript.
Paste in an HTML element. Change the image URL.view code
<style>
.glitch-img{display:block;max-width:100%;animation:glitch 2.5s steps(1) infinite}
@keyframes glitch{
0%,86%,100%{transform:none;filter:none;clip-path:none}
88%{transform:translate(-4px,1px);filter:hue-rotate(90deg);clip-path:inset(10% 0 55% 0)}
91%{transform:translate(4px,-2px);clip-path:inset(60% 0 8% 0)}
94%{transform:translate(-2px,2px);filter:hue-rotate(-90deg);clip-path:inset(30% 0 30% 0)}
97%{transform:translate(2px,0);clip-path:none}
}
@media (prefers-reduced-motion:reduce){.glitch-img{animation:none}}
</style>
<img class="glitch-img" src="YOUR-IMAGE-URL" alt="">Typewriter text
Types and deletes a list of words in a loop. Edit the words in data-words, separated by commas.
Paste in an HTML element. Works with any font.view code
<span class="typewriter" data-words="plugins,dashboards,crms"></span><span class="tw-caret">|</span>
<style>
.tw-caret{animation:twBlink 1s steps(1) infinite}
@keyframes twBlink{50%{opacity:0}}
</style>
<script>
document.querySelectorAll('.typewriter').forEach(function(el){
var words=el.dataset.words.split(','), wi=0, n=0, del=false;
(function tick(){
var wait=del?45:95;
if(!del){ n++; if(n>=words[wi].length){ del=true; wait=1600; } }
else { n--; if(n<=0){ del=false; wi=(wi+1)%words.length; wait=300; } }
el.textContent=words[wi].slice(0,n);
setTimeout(tick,wait);
})();
});
</script>love what we're building?
Help fuel more free snippets and keep us awake. Need something bigger? We build custom plugins, dashboards and CRMs.
