Hacks
Four free snippets for portfolio sites - no plugin required. The full vault (five more recipes) ships with the founder license.
Four effects you can paste into your site right now. No plugin, no account, no email.
Paste the code once, then add a class to whichever block you want it on. The class field is in the block settings sidebar, under Advanced → Additional CSS class(es).
Swap the project title for its category on hover. One attribute, no plugin.
.work-card .title::after {
content: attr(data-cat);
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(6px);
transition: .35s cubic-bezier(.22,1,.36,1);
}
.work-card:hover .title::after { opacity: 1; transform: none; }A 1px rule that draws itself across the viewport as the case study scrolls.
.progress-rule {
height: 1px;
background: currentColor;
transform-origin: left;
animation: draw linear both;
animation-timeline: scroll(root);
}
@keyframes draw { from { scale: 0 1 } to { scale: 1 1 } }Prefetch the next case study when its teaser enters the viewport.
<!-- drop in the case-study footer -->
<link rel="prefetch"
href="/work/next-project"
as="document" />
<!-- pair with the Case Study Transition block
for an instant handoff -->Autoplay cover video only when motion is allowed and the tab is visible.
const ok = matchMedia('(prefers-reduced-motion: no-preference)');
document.querySelectorAll('video[data-cover]').forEach(v => {
const sync = () => ok.matches && !document.hidden ? v.play() : v.pause();
ok.addEventListener('change', sync);
document.addEventListener('visibilitychange', sync);
sync();
});Specced and in development - founder licenses include all five as they ship, plus one-click versions of every hack.
UNLOCK THE VAULT