Frosted portrait hero
A photo behind hammered glass with a clear window, beside the title.
<piix-image-fx>WebGLAutumn · Winter
Seen,
not shown.
<section class="hx hx-por">
<piix-image-fx src="portrait.jpg" effect="frosted" alt="A portrait behind glass"></piix-image-fx>
<div class="hx-copy"><p class="hx-k">Autumn · Winter</p><h1>Seen,<br>not shown.</h1></div>
</section>
<style>
.hx{position:relative;min-height:520px;overflow:hidden;color:#fff;font-family:"Bricolage Grotesque",system-ui,sans-serif;display:grid;align-content:end;justify-items:start;gap:18px;padding:56px;box-sizing:border-box}
.hx h1{position:relative;margin:0;font-size:clamp(44px,7vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.88}
.hx p{position:relative;margin:0}
.hx-k{font:400 12px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.hx-key{background:#000}
.hx-key piix-fx{position:absolute;inset:0 0 10% 35%;width:auto;height:auto}
.hx-key h1{font-weight:300}
.hx-por{background:#e4e2df;color:#111;grid-template-columns:1fr 1fr;align-items:center;align-content:center;padding:0}
.hx-por piix-image-fx{height:520px}
.hx-por .hx-copy{padding:40px}
@media (max-width:760px){.hx-disc,.hx-por,.hx-dots{grid-template-columns:1fr}}
</style>
A complete hero section: a moving 3D layer and a layout around it. Copy the markup and the CSS, swap the words, and it is yours. Every hero answers the pointer.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just frosted portrait hero (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/image-fx.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<section className="hx hx-por">
<piix-image-fx src="portrait.jpg" effect="frosted" alt="A portrait behind glass"></piix-image-fx>
<div className="hx-copy"><p className="hx-k">Autumn · Winter</p><h1>Seen,<br>not shown.</h1></div>
</section>
<style>
.hx{position:relative;min-height:520px;overflow:hidden;color:#fff;font-family:"Bricolage Grotesque",system-ui,sans-serif;display:grid;align-content:end;justify-items:start;gap:18px;padding:56px;box-sizing:border-box}
.hx h1{position:relative;margin:0;font-size:clamp(44px,7vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.88}
.hx p{position:relative;margin:0}
.hx-k{font:400 12px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.hx-key{background:#000}
.hx-key piix-fx{position:absolute;inset:0 0 10% 35%;width:auto;height:auto}
.hx-key h1{font-weight:300}
.hx-por{background:#e4e2df;color:#111;grid-template-columns:1fr 1fr;align-items:center;align-content:center;padding:0}
.hx-por piix-image-fx{height:520px}
.hx-por .hx-copy{padding:40px}
@media (max-width:760px){.hx-disc,.hx-por,.hx-dots{grid-template-columns:1fr}}
</style>
);
}
Usage
<section class="hx hx-por">
<piix-image-fx src="portrait.jpg" effect="frosted" alt="A portrait behind glass"></piix-image-fx>
<div class="hx-copy"><p class="hx-k">Autumn · Winter</p><h1>Seen,<br>not shown.</h1></div>
</section>
<style>
.hx{position:relative;min-height:520px;overflow:hidden;color:#fff;font-family:"Bricolage Grotesque",system-ui,sans-serif;display:grid;align-content:end;justify-items:start;gap:18px;padding:56px;box-sizing:border-box}
.hx h1{position:relative;margin:0;font-size:clamp(44px,7vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.88}
.hx p{position:relative;margin:0}
.hx-k{font:400 12px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.hx-key{background:#000}
.hx-key piix-fx{position:absolute;inset:0 0 10% 35%;width:auto;height:auto}
.hx-key h1{font-weight:300}
.hx-por{background:#e4e2df;color:#111;grid-template-columns:1fr 1fr;align-items:center;align-content:center;padding:0}
.hx-por piix-image-fx{height:520px}
.hx-por .hx-copy{padding:40px}
@media (max-width:760px){.hx-disc,.hx-por,.hx-dots{grid-template-columns:1fr}}
</style>
Accessibility
- The words are real HTML headings and paragraphs.
- The 3D layer is decoration, or described for screen readers when it carries meaning.
- With reduced motion everything holds still.