Still water
Lo-fi for slow mornings.
Scene cards
Cards with a little living scene as their header.
<piix-scene>WebGLPetal season
Soft piano and rain.
Storm front
Big drums, bigger skies.
<div class="lay-cards">
<article><piix-scene kind="lake" height="140px"></piix-scene><h3>Still water</h3><p>Lo-fi for slow mornings.</p></article>
<article><piix-scene kind="sakura" height="140px"></piix-scene><h3>Petal season</h3><p>Soft piano and rain.</p></article>
<article><piix-scene kind="poppies" height="140px"></piix-scene><h3>Storm front</h3><p>Big drums, bigger skies.</p></article>
</div>
<style>
.lay-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:32px;background:#f6f2ea;color:#17121f}
.lay-cards article{border:3px solid #17121f;background:#fff;box-shadow:6px 6px 0 #17121f;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-cards piix-scene{border-bottom:3px solid #17121f}
.lay-cards h3{margin:14px 16px 4px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.lay-cards p{margin:0 16px 16px;opacity:.7}
</style>
Blog posts, destinations, playlists: each card gets a small scene instead of a stock photo. They only draw while they're on screen, and they all share one GPU context.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just scene cards (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/scene.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<div className="lay-cards">
<article><piix-scene kind="lake" height="140px"></piix-scene><h3>Still water</h3><p>Lo-fi for slow mornings.</p></article>
<article><piix-scene kind="sakura" height="140px"></piix-scene><h3>Petal season</h3><p>Soft piano and rain.</p></article>
<article><piix-scene kind="poppies" height="140px"></piix-scene><h3>Storm front</h3><p>Big drums, bigger skies.</p></article>
</div>
<style>
.lay-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:32px;background:#f6f2ea;color:#17121f}
.lay-cards article{border:3px solid #17121f;background:#fff;box-shadow:6px 6px 0 #17121f;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-cards piix-scene{border-bottom:3px solid #17121f}
.lay-cards h3{margin:14px 16px 4px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.lay-cards p{margin:0 16px 16px;opacity:.7}
</style>
);
}
Usage
<div class="lay-cards">
<article><piix-scene kind="lake" height="140px"></piix-scene><h3>Still water</h3><p>Lo-fi for slow mornings.</p></article>
<article><piix-scene kind="sakura" height="140px"></piix-scene><h3>Petal season</h3><p>Soft piano and rain.</p></article>
<article><piix-scene kind="poppies" height="140px"></piix-scene><h3>Storm front</h3><p>Big drums, bigger skies.</p></article>
</div>
<style>
.lay-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:32px;background:#f6f2ea;color:#17121f}
.lay-cards article{border:3px solid #17121f;background:#fff;box-shadow:6px 6px 0 #17121f;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-cards piix-scene{border-bottom:3px solid #17121f}
.lay-cards h3{margin:14px 16px 4px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.lay-cards p{margin:0 16px 16px;opacity:.7}
</style>
Accessibility
- Your copy is ordinary HTML: headings, paragraphs, real buttons.
- The scenes are described for screen readers, or hidden when they are decoration.