Closing
The final call to action: a cream section with the animated Unicorn Studio shader behind dark text that restates the value and points to one primary action.
Example
An eyebrow sets the tone, a headline restates the value, and a single primary button drives the action, with a light secondary link for those who want to talk first.
Composition
A closing section stacks three components on the cream shader panel:
Usage
The closing section is the last word on the page, keep it focused and point everything at one action.
- Offer one primary CTA, don't dilute the close with competing buttons.
- Restate the value in one line so the visitor remembers why to act.
- Sit the close on the cream surface (
--color-surface-cream) with the animated Unicorn Studio shader behind dark text, not a flat fill. - A cream wash overlay keeps text contrast (WCAG AA) over the brightest shader blooms.
- Use the standard violet
text-linkfor the secondary action on cream.
Code
Link buttons.css, then layer the eyebrow, headline, and one primary button over the shader container on a cream panel. The shader sits at z-index:0, a cream wash overlay at z-index:1 protects text contrast, and the content rides above at z-index:2. Background uses the Unicorn Studio shader; see _shared/assets/closing-shader.json. A prefers-reduced-motion rule hides the shader and falls back to a soft static cream/violet gradient.
<link rel="stylesheet" href="/_shared/components/buttons.css">
<section class="closing-section" style="position:relative;overflow:hidden;background:var(--color-surface-cream);color:var(--color-text-primary)">
<!-- Shader background; cream fallback shows until the runtime mounts -->
<div
class="closing-shader"
data-us-project-src="/_shared/assets/closing-shader.json"
data-us-scale="1" data-us-dpi="1.5" data-us-fps="60"
data-us-disablemobile="true"
style="position:absolute;inset:0;z-index:0;pointer-events:none"
aria-hidden="true"></div>
<!-- Cream wash overlay keeps text contrast over the brightest blooms -->
<div style="position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg, rgba(250,250,247,0.55) 0%, rgba(250,250,247,0.72) 100%)"></div>
<div style="position:relative;z-index:2;max-width:600px;margin:auto;text-align:center;padding:64px 40px">
<p class="kicker">Ready when you are</p>
<h2 style="color:var(--color-text-primary)">Start testing in minutes</h2>
<p style="color:var(--color-text-secondary)">15-day free trial. No credit card. Cancel anytime.</p>
<div class="closing__actions">
<a href="#" class="btn-primary">Start 15-Day Free Trial</a>
<a href="#" class="text-link">Talk to sales →</a>
</div>
</div>
</section>
<!-- Reduced-motion: hide the shader, fall back to a static gradient -->
<style>
@media (prefers-reduced-motion: reduce) {
.closing-section .closing-shader { display: none; }
.closing-section {
background:
radial-gradient(1200px 600px at 20% 30%, rgba(199,210,254,0.45), transparent 60%),
radial-gradient(900px 500px at 80% 70%, rgba(221,214,254,0.40), transparent 60%),
var(--color-surface-cream);
}
}
</style>
<!-- Unicorn Studio runtime; loaded once per page -->
<script type="text/javascript">
!function(){
if (!window.UnicornStudio) {
window.UnicornStudio = { isInitialized: false };
var i = document.createElement("script");
i.src = "https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.0/dist/unicornStudio.umd.js";
i.onload = function () {
if (window.UnicornStudio.isInitialized) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
try { UnicornStudio.init(); window.UnicornStudio.isInitialized = true; }
catch (e) { console.warn('UnicornStudio init failed', e); }
};
(document.head || document.body).appendChild(i);
}
}();
</script>