Production-ready recipes
Copy-and-Paste Cookbook
Copy complete patterns for heroes, product showcases, split layouts, grids, cinematic images, and editorial cards.
</>
Hero: Dramatic Parallax Art + Fade Copy
Introducing
Made to move.
Layered motion gives the product depth while the message arrives in sequence.
<section class="hero">
<div data-hf="parallax" data-hf-set="dramatic">
<img src="/images/hero-product.png" alt="Product">
</div><div data-hf-stagger="160" data-hf-stagger-start="100"
data-hf-trigger="load">
<p data-hf="fade" data-hf-set="quick">Introducing</p>
<h1 data-hf="fade" data-hf-set="dramatic">MP500</h1>
<p data-hf="fade" data-hf-set="default">Product
description.</p>
<a data-hf="fade" data-hf-set="quick" href="#shop">Shop
Now</a>
</div>
</section>Product Showcase: Parallax Image, Static Paragraph and Button
Product spotlight
One object. Real depth.
The artwork moves while this description and action remain steady.
<div class="product-showcase">
<p data-hf="parallax" data-hf-set="default">Introducing
the</p><div data-hf="parallax" data-hf-set="dramatic">
<img src="/images/product.webp" alt="MP500">
<img src="/images/shadow.png" alt="" aria-hidden="true">
</div><h2 data-hf="parallax" data-hf-distance="280"
data-hf-speed="1.1">
MP500
</h2><p>Static product description.</p>
<a class="btn" href="#">Learn More</a>
</div>Split Content: Image, Text and Button Stagger
Two-column story
Image and message arrive together.
Nested layers keep parallax and reveal transforms independent.
<div class="row" data-hf-stagger="180"
data-hf-stagger-start="100">
<div data-hf="parallax" data-hf-set="default">
<img data-hf="fade" data-hf-set="default" src="/image.jpg"
alt="">
</div><div data-hf="fade" data-hf-set="default">
<h2>Heading</h2>
<p>Copy</p>
</div><a data-hf="fade" data-hf-set="quick"
href="#">Button</a>
</div>Feature Card Grid
One preset starts the motion.
Stagger follows document order.
Cards reset after leaving view.
<div class="feature-grid" data-hf-stagger="120"
data-hf-stagger-start="80">
<article data-hf="fade" data-hf-set="default">Feature
one</article>
<article data-hf="fade" data-hf-set="default">Feature
two</article>
<article data-hf="fade" data-hf-set="default">Feature
three</article>
</div>Cinematic Image
FIELD NOTES
<div data-hf="parallax" data-hf-set="subtle">
<img
src="/images/editorial.jpg"
alt="Editorial scene"
data-hf="blur"
data-hf-set="soft"
>
</div>Alternating Editorial Cards
<div data-hf-stagger="140">
<article data-hf="rotate" data-hf-rotate="-5" data-hf-origin="bottom left">A</article>
<article data-hf="rotate" data-hf-rotate="5" data-hf-origin="bottom right">B</article>
</div>