Fade into page
A scene that dissolves into the content below it.
<piix-scene>WebGLOrbit
Satellite data for the rest of us.
<section class="lay-fade">
<piix-scene kind="galaxy" fade="bottom" height="300px"></piix-scene>
<div class="lay-copy center">
<h2>Orbit</h2>
<p>Satellite data for the rest of us.</p>
</div>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy.center{justify-items:center;text-align:center}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-fade{display:grid;background:#0b0a10;color:#f2eef8;padding-bottom:56px}
.lay-fade .lay-copy{margin-top:-60px;position:relative}
</style>
Put the scene at the top and set fade="bottom": its last third breaks up into dithered pixels, so it melts into whatever comes next. No hard edge, no gradient banding.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just fade into page (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 (
<section className="lay-fade">
<piix-scene kind="galaxy" fade="bottom" height="300px"></piix-scene>
<div className="lay-copy center">
<h2>Orbit</h2>
<p>Satellite data for the rest of us.</p>
</div>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy.center{justify-items:center;text-align:center}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-fade{display:grid;background:#0b0a10;color:#f2eef8;padding-bottom:56px}
.lay-fade .lay-copy{margin-top:-60px;position:relative}
</style>
);
}
Usage
<section class="lay-fade">
<piix-scene kind="galaxy" fade="bottom" height="300px"></piix-scene>
<div class="lay-copy center">
<h2>Orbit</h2>
<p>Satellite data for the rest of us.</p>
</div>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy.center{justify-items:center;text-align:center}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-fade{display:grid;background:#0b0a10;color:#f2eef8;padding-bottom:56px}
.lay-fade .lay-copy{margin-top:-60px;position:relative}
</style>
Accessibility
- Your copy is ordinary HTML: headings, paragraphs, real buttons.
- The scenes are described for screen readers, or hidden when they are decoration.