Bloom
Three soft fields clustered right of centre, accent over ink, opening and closing against each other.
AuroraMedium
1×
Mist
MediumFour very faint fields covering most of the frame, the softest of the series, for a page that wants almost nothing behind it.
“Copy the hero” is the styles and the SVG, carrying the colours and speed you set above. “Copy as a section” adds the wrapper a hero actually needs: the SVG absolute behind the copy, inert to the pointer, and a scrim so the heading holds. The Free licence asks for one visible credit per page: Animation by Pulsar, linked to Pulsar. Licence
The four variables
Set any of these on the section, or on any ancestor, and the hero follows. Nothing else in the file needs editing.
- --pulsar-hero-bg
- the ground, default #f7f7fb
- --pulsar-hero-ink
- the strokes, default #1d1b3a
- --pulsar-accent
- the accented strokes
- --pulsar-hero-speed
- a rate: 2 is twice as fast, 0.5 half speed
Files
The code
As a section
<!-- Pulsar by Business Nebula · "hero-aurora-mist" · https://pulsaricons.com | Licence: https://pulsaricons.com/legal/licence | Free-licence credit: Animation by Pulsar, linked to https://pulsaricons.com | Business Nebula: https://businessnebula.com.au -->
<style>
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 70vh;
display: flex;
align-items: center;
padding: 5rem 5%;
color: #1d1b3a;
background: #f7f7fb;
}
.hero > .pulsar-hero {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* A scrim under the copy, heavier on the side the text sits on. */
.hero-scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(100deg, #f7f7fb 0%, color-mix(in oklab, #f7f7fb 78%, transparent) 40%, transparent 68%);
}
.hero-copy {
position: relative;
z-index: 2;
max-width: 40rem;
}
.hero-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.8;
}
/* Generated by scripts/hero-aurora.mjs from heroes/hero-aurora-mist/params.json.
Consumers set four custom properties on any ancestor:
--pulsar-hero-bg the ground (default #f7f7fb)
--pulsar-hero-ink the soft blobs (default #1d1b3a)
--pulsar-accent the accent blobs (default #8a7df7)
--pulsar-hero-speed a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-aurora-mist {
display: block;
width: 100%;
height: 100%;
color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-aurora-mist .hero-aurora-mist-ground {
fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-aurora-mist .hero-aurora-mist-accent-stop {
stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-aurora-mist .hero-aurora-mist-ground-stop {
stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band {
transform-box: view-box;
will-change: transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band-1 {
transform-origin: 900px 300px;
animation-name: hero-aurora-mist-band-1;
animation-duration: calc(27s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band-2 {
transform-origin: 1400px 650px;
animation-name: hero-aurora-mist-band-2;
animation-duration: calc(31s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band-3 {
transform-origin: 1200px 450px;
animation-name: hero-aurora-mist-band-3;
animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band-4 {
transform-origin: 500px 850px;
animation-name: hero-aurora-mist-band-4;
animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-aurora-mist-band-1 {
from {
transform: translate(-40px, -24px) scale(0.95);
}
to {
transform: translate(40px, 24px) scale(1.05);
}
}
@keyframes hero-aurora-mist-band-2 {
from {
transform: translate(50px, 30px) scale(0.95);
}
to {
transform: translate(-50px, -30px) scale(1.05);
}
}
@keyframes hero-aurora-mist-band-3 {
from {
transform: translate(-40px, -24px) scale(0.95);
}
to {
transform: translate(40px, 24px) scale(1.05);
}
}
@keyframes hero-aurora-mist-band-4 {
from {
transform: translate(60px, 10px) scale(0.95);
}
to {
transform: translate(-60px, -10px) scale(1.05);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-hero-aurora-mist .hero-aurora-mist-band-1,
.pulsar-hero-aurora-mist .hero-aurora-mist-band-2,
.pulsar-hero-aurora-mist .hero-aurora-mist-band-3,
.pulsar-hero-aurora-mist .hero-aurora-mist-band-4 {
animation: none;
}
}
</style>
<section class="hero">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-aurora-mist" data-pulsar="hero-aurora-mist" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1600 900"><metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:Description><dc:title>hero-aurora-mist</dc:title><dc:creator>Pulsar by Business Nebula</dc:creator><dc:publisher>Business Nebula</dc:publisher><dc:source>https://pulsaricons.com/icons</dc:source><dc:relation>https://businessnebula.com.au</dc:relation><dc:rights>Pulsar licence, https://pulsaricons.com/legal/licence</dc:rights></rdf:Description></rdf:RDF></metadata><defs><radialGradient id="hero-aurora-mist-blob-1"><stop offset="0" stop-color="currentColor" stop-opacity=".14"></stop><stop offset=".45" stop-color="currentColor" stop-opacity=".08"></stop><stop offset=".78" stop-color="currentColor" stop-opacity=".02"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></radialGradient><radialGradient id="hero-aurora-mist-blob-2"><stop offset="0" stop-color="currentColor" stop-opacity=".16"></stop><stop offset=".45" stop-color="currentColor" stop-opacity=".09"></stop><stop offset=".78" stop-color="currentColor" stop-opacity=".02"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></radialGradient><radialGradient id="hero-aurora-mist-blob-3"><stop class="hero-aurora-mist-accent-stop" offset="0" stop-opacity=".28"></stop><stop class="hero-aurora-mist-accent-stop" offset=".45" stop-opacity=".15"></stop><stop class="hero-aurora-mist-accent-stop" offset=".78" stop-opacity=".04"></stop><stop class="hero-aurora-mist-accent-stop" offset="1" stop-opacity="0"></stop></radialGradient><radialGradient id="hero-aurora-mist-blob-4"><stop class="hero-aurora-mist-accent-stop" offset="0" stop-opacity=".2"></stop><stop class="hero-aurora-mist-accent-stop" offset=".45" stop-opacity=".11"></stop><stop class="hero-aurora-mist-accent-stop" offset=".78" stop-opacity=".03"></stop><stop class="hero-aurora-mist-accent-stop" offset="1" stop-opacity="0"></stop></radialGradient><linearGradient id="hero-aurora-mist-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-aurora-mist-ground-stop" offset="0" stop-opacity=".9"></stop><stop class="hero-aurora-mist-ground-stop" offset=".3" stop-opacity=".55"></stop><stop class="hero-aurora-mist-ground-stop" offset=".62" stop-opacity=".12"></stop><stop class="hero-aurora-mist-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-aurora-mist-ground"></rect><g class="hero-aurora-mist-band hero-aurora-mist-band-1"><ellipse cx="900" cy="300" fill="url(#hero-aurora-mist-blob-1)" class="hero-aurora-mist-blob" rx="700" ry="420"></ellipse></g><g class="hero-aurora-mist-band hero-aurora-mist-band-2"><ellipse cx="1400" cy="650" fill="url(#hero-aurora-mist-blob-2)" class="hero-aurora-mist-blob" rx="650" ry="380"></ellipse></g><g class="hero-aurora-mist-band hero-aurora-mist-band-3"><ellipse cx="1200" cy="450" fill="url(#hero-aurora-mist-blob-3)" class="hero-aurora-mist-blob" rx="520" ry="380"></ellipse></g><g class="hero-aurora-mist-band hero-aurora-mist-band-4"><ellipse cx="500" cy="850" fill="url(#hero-aurora-mist-blob-4)" class="hero-aurora-mist-blob" rx="600" ry="300"></ellipse></g><rect width="1600" height="900" fill="url(#hero-aurora-mist-veil)" class="hero-aurora-mist-veil"></rect></svg>
<div class="hero-scrim" aria-hidden="true"></div>
<div class="hero-copy">
<h1>Your heading</h1>
<p>Your supporting sentence.</p>
<a href="#">Your call to action</a>
</div>
</section>
animation.css
/* Generated by scripts/hero-aurora.mjs from heroes/hero-aurora-mist/params.json.
Consumers set four custom properties on any ancestor:
--pulsar-hero-bg the ground (default #f7f7fb)
--pulsar-hero-ink the soft blobs (default #1d1b3a)
--pulsar-accent the accent blobs (default #8a7df7)
--pulsar-hero-speed a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-aurora-mist {
display: block;
width: 100%;
height: 100%;
color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-aurora-mist .hero-aurora-mist-ground {
fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-aurora-mist .hero-aurora-mist-accent-stop {
stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-aurora-mist .hero-aurora-mist-ground-stop {
stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band {
transform-box: view-box;
will-change: transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band-1 {
transform-origin: 900px 300px;
animation-name: hero-aurora-mist-band-1;
animation-duration: calc(27s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band-2 {
transform-origin: 1400px 650px;
animation-name: hero-aurora-mist-band-2;
animation-duration: calc(31s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band-3 {
transform-origin: 1200px 450px;
animation-name: hero-aurora-mist-band-3;
animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-aurora-mist .hero-aurora-mist-band-4 {
transform-origin: 500px 850px;
animation-name: hero-aurora-mist-band-4;
animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-aurora-mist-band-1 {
from {
transform: translate(-40px, -24px) scale(0.95);
}
to {
transform: translate(40px, 24px) scale(1.05);
}
}
@keyframes hero-aurora-mist-band-2 {
from {
transform: translate(50px, 30px) scale(0.95);
}
to {
transform: translate(-50px, -30px) scale(1.05);
}
}
@keyframes hero-aurora-mist-band-3 {
from {
transform: translate(-40px, -24px) scale(0.95);
}
to {
transform: translate(40px, 24px) scale(1.05);
}
}
@keyframes hero-aurora-mist-band-4 {
from {
transform: translate(60px, 10px) scale(0.95);
}
to {
transform: translate(-60px, -10px) scale(1.05);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-hero-aurora-mist .hero-aurora-mist-band-1,
.pulsar-hero-aurora-mist .hero-aurora-mist-band-2,
.pulsar-hero-aurora-mist .hero-aurora-mist-band-3,
.pulsar-hero-aurora-mist .hero-aurora-mist-band-4 {
animation: none;
}
}
More in this series10 in aurora
All heroesDawn
Light pooling low on the right, one broad accent under a faint wash of ink, the quietest way to warm a dark section.
AuroraMediumEmber
A small hot core of accent inside a broad faint one, breathing, with a cool wash of ink in the corner.
AuroraMediumHaze
One wide veil of ink across the right half with a single small point of accent, barely there.
AuroraSparseLumen
A round accent core with a wider halo of ink around it and a second light in the corner, a lamp behind the heading.
AuroraBusyNebula
Five overlapping fields of accent and ink filling the frame, each drifting on its own period, the fullest of the series.
AuroraBusyPlume
Three tall tilted columns of colour rising through the right of the frame, sliding past each other.
AuroraMediumPool
Accent gathered along the bottom edge as if lit from below the fold, a faint ink shelf beside it.
AuroraMediumVeil
Two long tilted washes of ink laid over each other with a small accent between, like layered tissue.
AuroraMedium