Download template
Requires membership to download. Join here
Build it manually from scratch:
1. images:
2. Code:
<div class="portal-layer">
<video class="portal-video" autoplay muted loop playsinline webkit-playsinline preload="auto">
<!-- Replace the URL below with your own uploaded WebM file URL. -->
<source
src="https://royalblue-jellyfish-354834.hostingersite.com/wp-content/uploads/2026/09/Video-1.webm"
type="video/webm"
>
</video>
</div>
<!-- Stones in front of the astronaut -->
<div class="magnetic-stones magnetic-stones--back" aria-hidden="true">
<span
class="magnetic-stone"
data-x="57"
data-y="29"
data-depth="0.65"
style="--left:57%; --top:29%; --size:13px; --duration:4.8s; --delay:-1.2s;"
></span>
<span
class="magnetic-stone"
data-x="72"
data-y="31"
data-depth="0.8"
style="--left:72%; --top:31%; --size:20px; --duration:5.4s; --delay:-2.8s;"
></span>
<span
class="magnetic-stone"
data-x="55"
data-y="54"
data-depth="0.55"
style="--left:55%; --top:54%; --size:10px; --duration:4.2s; --delay:-0.8s;"
></span>
<span
class="magnetic-stone"
data-x="74"
data-y="59"
data-depth="0.75"
style="--left:74%; --top:59%; --size:16px; --duration:5.8s; --delay:-3.1s;"
></span>
<span
class="magnetic-stone"
data-x="63"
data-y="68"
data-depth="0.5"
style="--left:63%; --top:68%; --size:9px; --duration:4.6s; --delay:-1.9s;"
></span>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
/* Hero */
.portal-hero {
position: relative !important;
overflow: hidden !important;
}
/* Keep widget static */
.portal-hero .elementor-widget-html {
position: static !important;
}
/* Portal layer */
.portal-layer {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* Portal */
.portal-video {
position: absolute !important;
left: 64% !important;
top: 37% !important;
width: 650px !important;
max-width: none !important;
height: auto !important;
transform: translate(-50%, -50%) !important;
}
/* Astronaut */
#astro1 {
--astro-x: 0px;
--astro-y: 0px;
--astro-rotate: 0deg;
position: absolute !important;
left: 65% !important;
top: 43% !important;
width: 410px !important;
max-width: none !important;
transform:
translate(-50%, -50%)
translate3d(var(--astro-x), var(--astro-y), 0)
rotate(var(--astro-rotate)) !important;
transform-origin: 50% 45% !important;
animation: astro1Float 7s ease-in-out infinite alternate !important;
will-change: transform, margin-top;
z-index: 3 !important;
}
/* Astronaut inner */
#astro1 .elementor-widget-container {
position: relative !important;
width: 100% !important;
animation: none !important;
}
/* Image */
#astro1 img {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
animation: none !important;
z-index: 1 !important;
}
@keyframes astro1Float {
from {
margin-top: -20px;
}
to {
margin-top: 20px;
}
}
/* Visor reflection */
.astro-visor-reflection {
--visor-x: 50%;
--visor-y: 45%;
position: absolute;
left: 60%;
top: 14%;
width: 34%;
height: 16%;
transform:
translate(-50%, -50%)
rotate(-5deg);
border-radius: 48% 48% 52% 52%;
overflow: hidden;
pointer-events: none;
opacity: 0.8;
mix-blend-mode: screen;
-webkit-mask-image:
radial-gradient(
ellipse at center,
#000 20%,
rgba(0,0,0,0.94) 58%,
transparent 77%
);
mask-image:
radial-gradient(
ellipse at center,
#000 20%,
rgba(0,0,0,0.94) 58%,
transparent 77%
);
z-index: 4;
}
/* Cursor light */
.astro-visor-reflection::before {
content: "";
position: absolute;
left: var(--visor-x);
top: var(--visor-y);
width: 72%;
height: 175%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
ellipse at center,
rgba(255,255,255,0.72) 0%,
rgba(255,222,205,0.38) 25%,
rgba(255,74,51,0.20) 47%,
transparent 72%
);
filter: blur(4px);
}
/* Stones */
.magnetic-stones {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
}
/* Behind */
.magnetic-stones--back {
z-index: 2 !important;
}
/* Stone position */
.magnetic-stone {
--stone-x: 0px;
--stone-y: 0px;
--stone-rotate: 0deg;
position: absolute;
left: var(--left);
top: var(--top);
width: var(--size);
height: var(--size);
transform:
translate(-50%, -50%)
translate3d(var(--stone-x), var(--stone-y), 0)
rotate(var(--stone-rotate));
will-change: transform;
}
/* Stone style */
.magnetic-stone::before {
content: "";
position: absolute;
inset: 0;
border-radius: 37% 63% 48% 52% / 55% 42% 58% 45%;
clip-path:
polygon(
18% 4%,
73% 0%,
100% 31%,
88% 79%,
55% 100%,
12% 86%,
0% 43%
);
background:
radial-gradient(
circle at 27% 22%,
#ff8b74 0%,
#f44332 18%,
#b91e19 42%,
#540807 72%,
#160202 100%
);
box-shadow:
inset 2px 2px 3px rgba(255,255,255,0.20),
inset -4px -5px 8px rgba(0,0,0,0.75),
0 0 8px rgba(238,47,38,0.52);
animation:
magneticStoneFloat
var(--duration)
ease-in-out
var(--delay)
infinite
alternate;
}
/* Foreground stone */
.magnetic-stone--soft::before {
filter: blur(0.8px);
opacity: 0.9;
box-shadow:
inset 2px 2px 4px rgba(255,255,255,0.18),
inset -5px -6px 9px rgba(0,0,0,0.78),
0 0 12px rgba(238,47,38,0.6);
}
/* Stone float */
@keyframes magneticStoneFloat {
from {
transform:
translate3d(-3px, -5px, 0)
rotate(-8deg);
}
to {
transform:
translate3d(4px, 6px, 0)
rotate(10deg);
}
}
/* Heading */
.portal-heading {
position: relative !important;
width: 100% !important;
z-index: 2 !important;
overflow: visible !important;
}
.portal-heading .elementor-heading-title {
font-family: "Anton", sans-serif !important;
font-weight: 400 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
color: transparent !important;
background: linear-gradient(
180deg,
#ffffff 0%,
#fafafa 22%,
#f1f1ef 40%,
#dededb 56%,
#bdbdba 72%,
#929290 87%,
#686866 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 0.25px rgba(255,255,255,0.16);
filter:
drop-shadow(0 2px 1px rgba(255,255,255,0.06))
drop-shadow(0 14px 24px rgba(0,0,0,0.18));
}
/* Tablet */
@media (max-width: 1024px) {
.portal-heading .elementor-heading-title {
}
.magnetic-stones {
transform: scale(0.8);
transform-origin: center;
}
}
/* Mobile */
@media (max-width: 767px) {
.portal-heading .elementor-heading-title {
letter-spacing: -0.02em !important;
}
.magnetic-stones,
.astro-visor-reflection {
display: none !important;
}
}
/* No cursor effects on touch */
@media (pointer: coarse) {
.magnetic-stones,
.astro-visor-reflection {
display: none !important;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.magnetic-stone::before {
animation: none !important;
}
}
</style>
<script>
(function () {
function initializeAstronautInteraction() {
var hero = document.querySelector(".portal-hero");
var astronaut = document.getElementById("astro1");
if (!hero || !astronaut) {
return;
}
if (
hero.getAttribute("data-astronaut-interaction") ===
"initialized"
) {
return;
}
hero.setAttribute(
"data-astronaut-interaction",
"initialized"
);
if (window.matchMedia("(pointer: coarse)").matches) {
return;
}
var astronautContainer =
astronaut.querySelector(".elementor-widget-container") ||
astronaut;
/* Add visor light */
var visor = document.createElement("span");
visor.className = "astro-visor-reflection";
visor.setAttribute("aria-hidden", "true");
astronautContainer.appendChild(visor);
var stones = Array.prototype.slice.call(
hero.querySelectorAll(".magnetic-stone")
);
var stoneStates = stones.map(function (stone) {
return {
element: stone,
xPercent: parseFloat(
stone.getAttribute("data-x")
),
yPercent: parseFloat(
stone.getAttribute("data-y")
),
depth: parseFloat(
stone.getAttribute("data-depth")
),
currentX: 0,
currentY: 0,
currentRotation: 0
};
});
var mouseX = 0;
var mouseY = 0;
var pointerActive = false;
var astronautX = 0;
var astronautY = 0;
var astronautRotation = 0;
var visorX = 50;
var visorY = 45;
var animationFrame = null;
function clamp(value, minimum, maximum) {
return Math.min(
Math.max(value, minimum),
maximum
);
}
function startAnimation() {
if (!animationFrame) {
animationFrame =
window.requestAnimationFrame(animate);
}
}
function animate() {
animationFrame = null;
var heroRectangle =
hero.getBoundingClientRect();
var normalizedX = 0;
var normalizedY = 0;
if (pointerActive) {
normalizedX = clamp(
(
mouseX -
(
heroRectangle.left +
heroRectangle.width / 2
)
) /
(heroRectangle.width / 2),
-1,
1
);
normalizedY = clamp(
(
mouseY -
(
heroRectangle.top +
heroRectangle.height / 2
)
) /
(heroRectangle.height / 2),
-1,
1
);
}
/* Astronaut drift */
var targetAstronautX =
pointerActive ? normalizedX * 7 : 0;
var targetAstronautY =
pointerActive ? normalizedY * 5 : 0;
var targetAstronautRotation =
pointerActive ? normalizedX * 2.2 : 0;
astronautX +=
(targetAstronautX - astronautX) * 0.09;
astronautY +=
(targetAstronautY - astronautY) * 0.09;
astronautRotation +=
(
targetAstronautRotation -
astronautRotation
) * 0.09;
astronaut.style.setProperty(
"--astro-x",
astronautX.toFixed(2) + "px"
);
astronaut.style.setProperty(
"--astro-y",
astronautY.toFixed(2) + "px"
);
astronaut.style.setProperty(
"--astro-rotate",
astronautRotation.toFixed(2) + "deg"
);
/* Move visor light */
var targetVisorX =
pointerActive
? 50 + normalizedX * 24
: 50;
var targetVisorY =
pointerActive
? 45 + normalizedY * 21
: 45;
visorX += (targetVisorX - visorX) * 0.12;
visorY += (targetVisorY - visorY) * 0.12;
visor.style.setProperty(
"--visor-x",
visorX.toFixed(2) + "%"
);
visor.style.setProperty(
"--visor-y",
visorY.toFixed(2) + "%"
);
/* Move stones */
stoneStates.forEach(function (state) {
var baseX =
heroRectangle.left +
heroRectangle.width *
state.xPercent / 100;
var baseY =
heroRectangle.top +
heroRectangle.height *
state.yPercent / 100;
var differenceX = mouseX - baseX;
var differenceY = mouseY - baseY;
var distance = Math.sqrt(
differenceX * differenceX +
differenceY * differenceY
);
var influence = 0;
if (pointerActive) {
influence = Math.max(
0,
1 - distance / 480
);
}
var force =
influence *
0.10 *
state.depth;
var targetX = clamp(
differenceX * force,
-34,
34
);
var targetY = clamp(
differenceY * force,
-34,
34
);
var targetRotation = pointerActive
? normalizedX * 7 * state.depth
: 0;
state.currentX +=
(targetX - state.currentX) * 0.1;
state.currentY +=
(targetY - state.currentY) * 0.1;
state.currentRotation +=
(
targetRotation -
state.currentRotation
) * 0.1;
state.element.style.setProperty(
"--stone-x",
state.currentX.toFixed(2) + "px"
);
state.element.style.setProperty(
"--stone-y",
state.currentY.toFixed(2) + "px"
);
state.element.style.setProperty(
"--stone-rotate",
state.currentRotation.toFixed(2) + "deg"
);
});
var stillMoving =
Math.abs(astronautX - targetAstronautX) > 0.02 ||
Math.abs(astronautY - targetAstronautY) > 0.02 ||
Math.abs(
astronautRotation -
targetAstronautRotation
) > 0.02 ||
Math.abs(visorX - targetVisorX) > 0.02 ||
Math.abs(visorY - targetVisorY) > 0.02;
stoneStates.forEach(function (state) {
if (
Math.abs(state.currentX) > 0.02 ||
Math.abs(state.currentY) > 0.02 ||
Math.abs(state.currentRotation) > 0.02
) {
stillMoving = true;
}
});
if (pointerActive || stillMoving) {
startAnimation();
}
}
hero.addEventListener(
"pointermove",
function (event) {
if (event.pointerType === "touch") {
return;
}
mouseX = event.clientX;
mouseY = event.clientY;
pointerActive = true;
startAnimation();
},
{ passive: true }
);
hero.addEventListener(
"pointerleave",
function () {
pointerActive = false;
startAnimation();
},
{ passive: true }
);
}
if (document.readyState === "loading") {
document.addEventListener(
"DOMContentLoaded",
initializeAstronautInteraction
);
} else {
initializeAstronautInteraction();
}
if (
window.elementorFrontend &&
window.elementorFrontend.isEditMode &&
window.elementorFrontend.isEditMode()
) {
setTimeout(
initializeAstronautInteraction,
500
);
}
})();
</script>
3. CSS classes and ID:
Hero 1:
Class:
cs-hero bkn-slide bkn-slide-1 portal-hero
ID:
astro1
Class:
portal-heading
Hero 2:
Class:
cs-hero bkn-slide bkn-slide-2 portal-hero
ID:
asto2
Code for hero 2:
<div id="veil-motion-layer">
<video
id="veil-motion-video"
autoplay
muted
loop
playsinline
webkit-playsinline
preload="auto"
aria-hidden="true"
>
<source
src="https://royalblue-jellyfish-354834.hostingersite.com/wp-content/uploads/2026/09/03-portal-motion-1.webm"
type="video/webm"
>
</video>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
/* Hero */
.portal-hero {
position: relative !important;
overflow: hidden !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* Boxed content */
.portal-hero > .e-con-inner {
position: static !important;
}
/* Full-size HTML widget */
.bkn-slide-2 .elementor-widget-html {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
animation: none !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* Widget inner */
.bkn-slide-2 .elementor-widget-html > .elementor-widget-container {
position: relative !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* Video layer */
#veil-motion-layer {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* Match background crop */
#veil-motion-video {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
transform: none !important;
animation: none !important;
pointer-events: none !important;
}
/* Astronaut */
.portal-hero #asto2 {
position: absolute !important;
left: 72% !important;
top: 42% !important;
width: 390px !important;
max-width: none !important;
transform: translate(-50%, -50%) !important;
animation: asto2Float 6s ease-in-out infinite alternate !important;
will-change: transform, margin-top;
z-index: 3 !important;
}
/* Astronaut inner */
.portal-hero #asto2 .elementor-widget-container {
position: relative !important;
width: 100% !important;
animation: none !important;
}
.portal-hero #asto2 img {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
animation: none !important;
z-index: 1 !important;
}
@keyframes asto2Float {
from {
margin-top: -27px;
}
to {
margin-top: 27px;
}
}
/* Heading */
.portal-hero .portal-heading {
position: relative !important;
width: 100% !important;
z-index: 2 !important;
overflow: visible !important;
}
.portal-hero .portal-heading .elementor-heading-title {
font-family: "Anton", sans-serif !important;
font-weight: 400 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
color: transparent !important;
background-image: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 28%,
rgba(245, 245, 245, 0.95) 48%,
rgba(205, 205, 205, 0.82) 72%,
rgba(145, 145, 145, 0.72) 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent !important;
}
/* Tablet */
@media (max-width: 1024px) {
.portal-hero .portal-heading .elementor-heading-title {
}
}
/* Mobile */
@media (max-width: 767px) {
.portal-hero .portal-heading .elementor-heading-title {
letter-spacing: -0.02em !important;
}
}
</style>
<script>
(function () {
function initSlide2Visor() {
var astronaut = document.getElementById("asto2");
var hero = astronaut && astronaut.closest(".bkn-slide-2");
if (!astronaut || !hero || astronaut.dataset.visorReady) return;
astronaut.dataset.visorReady = "true";
if (window.matchMedia("(pointer: coarse)").matches) return;
var container =
astronaut.querySelector(".elementor-widget-container") || astronaut;
var visor = document.createElement("span");
visor.className = "astro-visor-reflection";
visor.setAttribute("aria-hidden", "true");
container.appendChild(visor);
var x = 50;
var y = 45;
var targetX = 50;
var targetY = 45;
var frame = 0;
function tick() {
frame = 0;
x += (targetX - x) * 0.12;
y += (targetY - y) * 0.12;
visor.style.setProperty("--visor-x", x.toFixed(2) + "%");
visor.style.setProperty("--visor-y", y.toFixed(2) + "%");
if (Math.abs(targetX - x) > 0.02 || Math.abs(targetY - y) > 0.02) {
frame = requestAnimationFrame(tick);
}
}
function animateTo(nextX, nextY) {
targetX = nextX;
targetY = nextY;
if (!frame) frame = requestAnimationFrame(tick);
}
hero.addEventListener("pointermove", function (event) {
if (event.pointerType === "touch") return;
var rect = hero.getBoundingClientRect();
var nx = Math.max(-1, Math.min(1,
(event.clientX - rect.left - rect.width / 2) / (rect.width / 2)
));
var ny = Math.max(-1, Math.min(1,
(event.clientY - rect.top - rect.height / 2) / (rect.height / 2)
));
animateTo(50 + nx * 24, 45 + ny * 21);
}, { passive: true });
hero.addEventListener("pointerleave", function () {
animateTo(50, 45);
}, { passive: true });
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initSlide2Visor);
} else {
initSlide2Visor();
}
if (window.elementorFrontend?.isEditMode?.()) {
setTimeout(initSlide2Visor, 500);
}
})();
</script>
Main hero:
Class:
bkn-slider
Bottom code:
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.12.5/gsap.min.js?ver=1787218438"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
/* Native scroll; GSAP animates the nav only. */
html.bkn-snap-on {
scroll-snap-type: y mandatory;
}
@media (prefers-reduced-motion: reduce) {
html.bkn-snap-on { scroll-snap-type: y proximity; }
}
.bkn-slider {
position: relative;
}
.bkn-slider > .bkn-slide {
scroll-snap-align: start;
scroll-snap-stop: always;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
margin: 0 !important;
flex-shrink: 0;
}
@supports (height: 100dvh) {
.bkn-slider > .bkn-slide {
height: 100dvh !important;
min-height: 100dvh !important;
max-height: 100dvh !important;
}
}
/* Left navigation */
.bkn-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 96px;
z-index: 9990;
display: flex;
align-items: center;
pointer-events: none;
background: none;
font-family: inherit;
opacity: 0;
visibility: hidden;
transition: opacity .5s ease, visibility .5s ease;
}
@supports (height: 100dvh) {
.bkn-nav {
height: 100dvh;
}
}
.bkn-nav.is-visible {
opacity: 1;
visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
.bkn-nav {
transition: none;
}
}
/* Track */
.bkn-nav__line {
position: absolute;
left: 46px;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255,255,255,0.22);
pointer-events: none;
z-index: 0;
}
/* Energy trail */
.bkn-nav__energy {
position: absolute;
left: 46px;
top: 0;
width: 1px;
height: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
transform: scaleY(0);
background: #ff3b30;
box-shadow:
0 0 4px 1px rgba(255, 91, 76, 0.95),
0 0 10px 3px rgba(235, 48, 38, 0.66),
0 0 22px 6px rgba(126, 0, 4, 0.34);
will-change: top, height, transform, opacity;
}
/* Energy head */
.bkn-nav__energy-head {
position: absolute;
left: 46px;
top: 0;
width: 5px;
height: 5px;
z-index: 2;
pointer-events: none;
opacity: 0;
border-radius: 50%;
background: #fff5f1;
transform: translate(-50%, -50%);
box-shadow:
0 0 4px 1px rgba(255,255,255,0.95),
0 0 9px 3px rgba(255, 82, 67, 0.92),
0 0 20px 7px rgba(190, 19, 14, 0.52),
0 0 36px 12px rgba(92, 0, 3, 0.28);
will-change: top, transform, opacity;
}
.bkn-nav__list {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 34px;
padding: 0;
margin: 0;
list-style: none;
pointer-events: auto;
}
/* Reset list */
.bkn-nav__list > li {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
list-style: none !important;
}
/* Reset buttons */
.bkn-nav__dot {
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
gap: 16px;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
overflow: visible;
cursor: pointer;
line-height: 1;
font-family: inherit;
text-decoration: none !important;
color: rgba(255,255,255,0.55) !important;
transition: color .3s ease;
}
/* Reset button states */
.bkn-nav__dot:hover,
.bkn-nav__dot:focus,
.bkn-nav__dot:active {
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
text-decoration: none !important;
}
/* Dot */
.bkn-nav__dot::before {
content: '';
flex: 0 0 auto;
margin-left: 40px;
width: 11px;
height: 11px;
border-radius: 50%;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,0.42);
background: rgba(0,0,0,0.25);
box-shadow: none;
transform: none;
transition:
border-color .3s ease,
background .3s ease,
box-shadow .35s ease;
}
/* Numbers */
.bkn-nav__num {
font-size: 13px;
font-weight: 400 !important;
letter-spacing: .14em;
color: inherit;
transition: color .3s ease;
}
/* Active state */
.bkn-nav__dot:hover,
.bkn-nav__dot.is-active {
color: #ffffff !important;
}
.bkn-nav__dot:hover .bkn-nav__num,
.bkn-nav__dot.is-active .bkn-nav__num {
color: #ffffff !important;
}
/* Red glow */
.bkn-nav__dot:hover::before,
.bkn-nav__dot.is-active::before {
border-color: transparent !important;
background: radial-gradient(
circle at center,
#fff0eb 0%,
#ff8175 20%,
#f04438 48%,
#bd1713 76%,
#790508 100%
) !important;
box-shadow:
0 0 5px 1px rgba(255, 105, 91, 0.96),
0 0 11px 3px rgba(235, 52, 42, 0.72),
0 0 23px 7px rgba(145, 5, 8, 0.44),
0 0 38px 12px rgba(75, 0, 3, 0.22) !important;
transform: none !important;
}
.bkn-nav__dot:focus-visible {
outline: 1px solid rgba(255,255,255,0.6);
outline-offset: 6px;
}
/* Responsive nav */
@media (max-width: 1024px) {
.bkn-nav {
width: 74px;
}
.bkn-nav__line {
left: 34px;
}
.bkn-nav__energy,
.bkn-nav__energy-head {
left: 34px;
}
.bkn-nav__list {
gap: 26px;
}
.bkn-nav__dot {
gap: 12px;
}
.bkn-nav__dot::before {
margin-left: 29px;
width: 9px;
height: 9px;
}
.bkn-nav__num {
font-size: 12px;
}
}
@media (max-width: 767px) {
.bkn-nav {
width: 52px;
}
.bkn-nav__line {
left: 22px;
}
.bkn-nav__energy,
.bkn-nav__energy-head {
left: 22px;
}
.bkn-nav__list {
gap: 22px;
}
.bkn-nav__dot {
gap: 0;
}
.bkn-nav__dot::before {
margin-left: 17px;
width: 8px;
height: 8px;
}
.bkn-nav__num {
display: none;
}
}
/* Portal heading */
.portal-heading {
position: relative !important;
width: 100% !important;
z-index: 2 !important;
overflow: visible !important;
}
.portal-heading .elementor-heading-title {
font-family: "Anton", sans-serif !important;
font-weight: 400 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
background:
linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 38%,
rgba(242,91,76,0.06) 52%,
rgba(235,70,56,0.18) 68%,
rgba(222,52,42,0.32) 84%,
rgba(190,31,27,0.42) 100%
),
linear-gradient(
180deg,
rgba(255,255,255,0.78) 0%,
rgba(255,255,255,0.75) 22%,
rgba(245,245,243,0.69) 40%,
rgba(218,218,215,0.61) 57%,
rgba(180,180,177,0.53) 73%,
rgba(140,140,137,0.47) 87%,
rgba(100,100,98,0.41) 100%
) !important;
background-blend-mode: normal !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-stroke: 0.15px rgba(255,255,255,0.08);
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12));
mix-blend-mode: normal !important;
}
@media (max-width: 1024px) {
.portal-heading .elementor-heading-title {
font-size: 14vw !important;
}
}
@media (max-width: 767px) {
.portal-heading .elementor-heading-title {
font-size: 13.5vw !important;
letter-spacing: -0.02em !important;
}
}
</style>
<nav class="bkn-nav" aria-label="Hero slider navigation">
<span class="bkn-nav__line" aria-hidden="true"></span>
<span class="bkn-nav__energy" aria-hidden="true"></span>
<span class="bkn-nav__energy-head" aria-hidden="true"></span>
<ul class="bkn-nav__list">
<li>
<button type="button" class="bkn-nav__dot is-active" aria-label="Go to slide 1">
<span class="bkn-nav__num">01</span>
</button>
</li>
<li>
<button type="button" class="bkn-nav__dot" aria-label="Go to slide 2">
<span class="bkn-nav__num">02</span>
</button>
</li>
</ul>
</nav>
<script>
(function () {
if (window.__bknHeroSliderInit) {
return;
}
window.__bknHeroSliderInit = true;
var start = function () {
var slider = document.querySelector('.bkn-slider');
var nav = document.querySelector('.bkn-nav');
if (!slider || !nav) {
return;
}
/* Prevent duplicate listeners */
if (slider.getAttribute('data-bkn-slider-ready') === 'true') {
return;
}
var isElementorEditor =
document.body.classList.contains('elementor-editor-active') ||
document.body.classList.contains('elementor-editor-preview') ||
(
window.elementorFrontend &&
window.elementorFrontend.isEditMode &&
window.elementorFrontend.isEditMode()
);
/* Free scroll in Elementor */
if (isElementorEditor) {
document.documentElement.classList.remove('bkn-snap-on');
nav.classList.remove('is-visible');
return;
}
slider.setAttribute('data-bkn-slider-ready', 'true');
/* Two hero slides */
var slides = Array.prototype.slice.call(
slider.children
).filter(function (element) {
return element.classList.contains('bkn-slide');
});
if (slides.length !== 2) {
return;
}
var dots = Array.prototype.slice.call(
nav.querySelectorAll('.bkn-nav__dot')
);
var energy = nav.querySelector('.bkn-nav__energy');
var energyHead = nav.querySelector('.bkn-nav__energy-head');
var hasGsap = !!window.gsap;
var energyTimeline = null;
var arrivalFrame = 0;
var navigationIndex = 0;
var reduce = window.matchMedia(
'(prefers-reduced-motion: reduce)'
);
var mobileTouch = window.matchMedia('(max-width: 767px) and (pointer: coarse)').matches;
var current = 0;
var locked = false;
var lockTimer = null;
/* Ignore momentum events */
var wheelGestureUsed = false;
var lastWheelTime = -Infinity;
var wheelQuietMs = 220;
function enableSnapMode() {
document.documentElement.classList.add('bkn-snap-on');
}
function slideTop(i) {
return Math.round(
slides[i].getBoundingClientRect().top +
window.pageYOffset
);
}
function inSlider() {
var r = slider.getBoundingClientRect();
return (
r.top <= window.innerHeight * 0.25 &&
r.bottom >= window.innerHeight * 0.75
);
}
function nearestIndex() {
var y = window.pageYOffset;
var best = 0;
var bd = Infinity;
slides.forEach(function (s, i) {
var d = Math.abs(slideTop(i) - y);
if (d < bd) {
bd = d;
best = i;
}
});
return best;
}
function setActive(i) {
current = i;
enableSnapMode();
showDot(i);
sync();
}
function showDot(i) {
navigationIndex = i;
dots.forEach(function (d, n) {
d.classList.toggle('is-active', n === i);
});
}
function prepareTarget(i) {
current = i;
enableSnapMode();
sync();
}
function dotCenterY(i) {
var dotRect = dots[i].getBoundingClientRect();
var navRect = nav.getBoundingClientRect();
return (
dotRect.top - navRect.top + dotRect.height / 2
);
}
function hideEnergy() {
if (energyTimeline) {
energyTimeline.kill();
energyTimeline = null;
}
if (!hasGsap || !energy || !energyHead) {
return;
}
gsap.killTweensOf([energy, energyHead]);
gsap.set(energy, {
opacity: 0,
scaleY: 0,
height: 0
});
gsap.set(energyHead, {
opacity: 0,
scale: 0.7
});
}
function animateEnergy(from, to, duration) {
if (
!hasGsap ||
!energy ||
!energyHead ||
from === to ||
!dots[from] ||
!dots[to]
) {
showDot(to);
return;
}
var startY = dotCenterY(from);
var endY = dotCenterY(to);
var movingDown = endY > startY;
var segmentTop = Math.min(startY, endY);
var segmentHeight = Math.abs(endY - startY);
hideEnergy();
gsap.set(energy, {
top: segmentTop,
height: segmentHeight,
opacity: 1,
scaleY: 0,
transformOrigin: movingDown
? '50% 0%'
: '50% 100%'
});
gsap.set(energyHead, {
top: startY,
opacity: 1,
scale: 0.72
});
energyTimeline = gsap.timeline();
energyTimeline.to(energy, {
scaleY: 1,
duration: duration,
ease: 'power2.inOut'
}, 0);
energyTimeline.to(energyHead, {
top: endY,
scale: 1,
duration: duration,
ease: 'power2.inOut',
onComplete: function () { showDot(to); }
}, 0);
energyTimeline.to(energyHead, {
opacity: 0,
scale: 1.35,
duration: 0.22,
ease: 'power1.out'
});
energyTimeline.to(energy, {
opacity: 0,
duration: 0.3,
ease: 'power1.out'
}, '<');
}
function sync() {
dots.forEach(function (d, n) {
d.setAttribute(
'aria-current',
n === current ? 'true' : 'false'
);
});
}
function goTo(i, immediate) {
if (i < 0 || i > slides.length - 1 || (locked && !immediate)) {
return;
}
var from = navigationIndex;
var maxY = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
var destination = Math.min(maxY, Math.max(0, slideTop(i)));
cancelAnimationFrame(arrivalFrame);
clearTimeout(lockTimer);
clearTimeout(settle);
hideEnergy();
if (immediate || reduce.matches || Math.abs(window.pageYOffset - destination) < 2) {
locked = false;
setActive(i);
window.scrollTo({
top: destination,
behavior: 'auto'
});
return;
}
locked = true;
prepareTarget(i);
/* Start scroll */
window.scrollTo({
top: destination,
behavior: 'smooth'
});
/* Animate nav after arrival */
var started = performance.now();
var stableFrames = 0;
function checkArrival() {
var arrived = Math.abs(window.pageYOffset - destination) <= 2;
stableFrames = arrived ? stableFrames + 1 : 0;
if (stableFrames >= 2) {
locked = false;
sync();
animateEnergy(from, i, 0.95);
return;
}
if (performance.now() - started > 3000) {
/* Recover interrupted scroll */
locked = false;
setActive(nearestIndex());
return;
}
arrivalFrame = requestAnimationFrame(checkArrival);
}
arrivalFrame = requestAnimationFrame(checkArrival);
}
dots.forEach(function (d, n) {
d.addEventListener('click', function () {
goTo(n);
});
});
/* One gesture per slide */
function step(dir) {
var target = current + dir;
if (target < 0 || target > slides.length - 1) {
return false;
}
goTo(target);
return true;
}
function canHandle(dir) {
if (!inSlider()) {
return false;
}
if (dir > 0 && current >= slides.length - 1) {
return false;
}
if (dir < 0 && current <= 0) {
return false;
}
return true;
}
window.addEventListener('wheel', function (ev) {
if (mobileTouch || ev.ctrlKey) {
return;
}
var dir = ev.deltaY > 0
? 1
: (ev.deltaY < 0 ? -1 : 0);
if (!dir || Math.abs(ev.deltaX) > Math.abs(ev.deltaY)) {
return;
}
var now = performance.now();
if (now - lastWheelTime > wheelQuietMs) {
wheelGestureUsed = false;
}
lastWheelTime = now;
/* Wait for the gesture to end */
if (wheelGestureUsed) {
ev.preventDefault();
return;
}
/* Block momentum during transition */
if (locked) {
wheelGestureUsed = true;
ev.preventDefault();
return;
}
if (!canHandle(dir)) {
return;
}
ev.preventDefault();
if (Math.abs(ev.deltaY) < 4) {
return;
}
wheelGestureUsed = true;
step(dir);
}, { passive: false });
var touchY = null;
window.addEventListener('touchstart', function (ev) {
if (mobileTouch) return;
touchY = ev.touches.length === 1
? ev.touches[0].clientY
: null;
}, { passive: true });
window.addEventListener('touchmove', function (ev) {
if (mobileTouch) return;
if (locked && ev.touches.length === 1) {
ev.preventDefault();
return;
}
if (touchY === null) {
return;
}
var dy = touchY - ev.touches[0].clientY;
if (Math.abs(dy) < 24) {
return;
}
var dir = dy > 0 ? 1 : -1;
if (!canHandle(dir)) {
return;
}
ev.preventDefault();
if (locked) {
return;
}
touchY = null;
step(dir);
}, { passive: false });
window.addEventListener('touchend', function () {
touchY = null;
}, { passive: true });
document.addEventListener('keydown', function (ev) {
var t = ev.target;
if (
t &&
(
t.tagName === 'INPUT' ||
t.tagName === 'TEXTAREA' ||
t.isContentEditable
)
) {
return;
}
var dir = 0;
if (
ev.key === 'ArrowDown' ||
ev.key === 'PageDown' ||
ev.key === ' '
) {
dir = 1;
}
if (
ev.key === 'ArrowUp' ||
ev.key === 'PageUp'
) {
dir = -1;
}
if (!dir) {
return;
}
if (locked) {
ev.preventDefault();
return;
}
if (!canHandle(dir)) {
return;
}
ev.preventDefault();
if (locked) {
return;
}
step(dir);
});
/* Sync active number */
var settle = null;
function onScroll() {
nav.classList.toggle('is-visible', inSlider());
if (locked) {
return;
}
clearTimeout(settle);
settle = setTimeout(function () {
if (locked) {
return;
}
var i = nearestIndex();
if (inSlider() && i !== current) {
setActive(i);
}
}, 90);
}
window.addEventListener(
'scroll',
onScroll,
{ passive: true }
);
window.addEventListener('resize', function () {
if (mobileTouch) { onScroll(); return; }
cancelAnimationFrame(arrivalFrame);
locked = false;
hideEnergy();
setActive(current);
onScroll();
if (inSlider()) {
window.scrollTo({
top: slideTop(current),
behavior: 'auto'
});
}
});
setActive(nearestIndex());
onScroll();
sync();
};
if (document.readyState === 'loading') {
document.addEventListener(
'DOMContentLoaded',
start
);
} else {
start();
}
if (
window.elementorFrontend &&
window.elementorFrontend.isEditMode &&
window.elementorFrontend.isEditMode()
) {
setTimeout(start, 400);
}
})();
</script>
<!-- Responsive fixes adapted from the full project for the TWO original slides. -->
<style id="nova-two-slide-responsive">
@media (max-width: 1024px) {
html, body { overflow-x: clip !important; }
.bkn-slider > .bkn-slide { width: 100% !important; max-width: 100% !important; }
.bkn-slide-1, .bkn-slide-2 {
padding: 0 48px 0 86px !important;
background-size: cover !important;
}
.bkn-slide-1 > .e-con-inner, .bkn-slide-2 > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
}
.bkn-slide .portal-heading .elementor-heading-title { line-height: .94 !important; }
.bkn-slide .elementor-divider { max-width: 270px !important; }
.bkn-slide-1 .portal-video { width: min(66vw, 650px) !important; }
#astro1 { width: min(40vw, 410px) !important; }
.bkn-slide-2 #asto2 { width: min(38vw, 390px) !important; }
}
@media (max-width: 767px) {
html, body, .bkn-slider { background-color: #050505 !important; }
.bkn-slider { gap: 0 !important; row-gap: 0 !important; }
.bkn-slider > .bkn-slide {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
justify-content: center !important;
background-size: cover !important;
overflow: hidden !important;
}
html .bkn-slider .bkn-slide-1,
html .bkn-slider .bkn-slide-2 {
--nova-hero-height: 100vh;
height: var(--nova-hero-height) !important;
min-height: var(--nova-hero-height) !important;
max-height: var(--nova-hero-height) !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
margin-block: 0 !important;
isolation: isolate;
}
@supports (height: 100lvh) {
html .bkn-slider .bkn-slide-1,
html .bkn-slider .bkn-slide-2 { --nova-hero-height: 100lvh; }
}
@supports (height: 100dvh) {
html .bkn-slider .bkn-slide-1,
html .bkn-slider .bkn-slide-2 {
min-height: max(100dvh, var(--nova-hero-height)) !important;
}
}
.bkn-slide-1 {
background-image: url("https://royalblue-jellyfish-354834.hostingersite.com/wp-content/uploads/2026/09/Background-hero-1-1-e1789486393691.webp") !important;
background-position: center center !important;
}
html .bkn-slider .bkn-slide-2 {
--nova-scene-scale: max(calc(100vw / 960), calc(var(--nova-hero-height) / 900));
background-image: url("https://royalblue-jellyfish-354834.hostingersite.com/wp-content/uploads/2026/09/Background-hero-2-1-e1789486596199.webp") !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* A 44px touch target with the visible dot centred on the nav line. */
.bkn-nav__dot, .bkn-nav__dot:hover,
.bkn-nav__dot:focus, .bkn-nav__dot:active {
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
touch-action: manipulation;
}
.bkn-nav__dot::before { margin-left: 0 !important; }
.bkn-nav__list { gap: 4px !important; }
.bkn-slide .elementor-divider { display: none !important; }
.bkn-slide .portal-heading {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: calc(100vw - 28px) !important;
max-width: none !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
text-align: center !important;
z-index: 9 !important;
}
.bkn-slide .portal-heading .elementor-heading-title {
width: 100% !important;
line-height: .9 !important;
letter-spacing: -.035em !important;
text-align: center !important;
background: linear-gradient(180deg, #fff 0%, #fff 64%, rgba(255,255,255,.93) 84%, rgba(255,255,255,.80) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.bkn-slide-1 .portal-heading .elementor-heading-title { white-space: nowrap !important; }
/* The two-slide template has no separate mobile button. Hide Get Tickets. */
.bkn-slide-1 .elementor-widget-button,
.bkn-slide-2 .elementor-widget-button { display: none !important; }
.bkn-slide-1 .portal-video {
left: 50% !important;
top: 39% !important;
width: 122vw !important;
}
#astro1 {
left: 50% !important;
top: 43% !important;
width: min(72vw, 350px) !important;
}
.bkn-slide-2 #asto2 {
left: 50% !important;
top: 43% !important;
width: min(70vw, 340px) !important;
z-index: 3 !important;
}
#astro1, .bkn-slide-2 #asto2 { animation-duration: 7s !important; }
/* On iOS, blend the VP9 layer over the static background. */
html.nova-ios .bkn-slide-1 .portal-video {
display: block !important;
opacity: 1 !important;
mix-blend-mode: screen !important;
left: 50% !important;
top: 42% !important;
width: 90dvh !important;
height: auto !important;
-webkit-mask-image: radial-gradient(circle closest-side, #000 0%, #000 54%, transparent 76%);
mask-image: radial-gradient(circle closest-side, #000 0%, #000 54%, transparent 76%);
}
/* Full-project slide 2 alignment, scoped to this template's HTML widget. */
html .bkn-slide-2 .elementor-widget-html {
mix-blend-mode: screen !important;
background: transparent !important;
}
html .bkn-slide-2 #veil-motion-layer { background: transparent !important; }
html .bkn-slide-2 #veil-motion-video,
html.nova-ios .bkn-slide-2 #veil-motion-video {
display: block !important;
opacity: 1 !important;
width: calc(var(--nova-scene-scale) * 1920) !important;
height: calc(var(--nova-scene-scale) * 1080) !important;
left: calc(50% - var(--nova-scene-scale) * 1365) !important;
top: calc(50% - var(--nova-scene-scale) * 495) !important;
right: auto !important;
bottom: auto !important;
max-width: none !important;
max-height: none !important;
object-fit: fill !important;
transform: none !important;
mix-blend-mode: normal !important;
-webkit-mask-image: radial-gradient(circle calc(var(--nova-scene-scale) * 310) at 71.09375% 45.833333%, #000 0%, #000 70%, transparent 100%);
mask-image: radial-gradient(circle calc(var(--nova-scene-scale) * 310) at 71.09375% 45.833333%, #000 0%, #000 70%, transparent 100%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
}
@media (max-width: 767px) and (orientation: landscape) {
.bkn-slide .portal-heading { top: 51% !important; }
.bkn-slide-1 .portal-video { width: 82vw !important; }
#astro1, .bkn-slide-2 #asto2 { width: 34vw !important; }
}
</style>
<script id="nova-ios-detection">
(function () {
var platform = navigator.platform || '';
if (/iPad|iPhone|iPod/.test(platform) ||
(platform === 'MacIntel' && navigator.maxTouchPoints > 1)) {
document.documentElement.classList.add('nova-ios');
}
})();
</script>
Promt for WebM creation:
Use the attached still image to create a transparent WebM motion overlay for a layered website design.
Animate only this specific part of the image:
[REPLACE THIS TEXT: Clearly describe the exact element that should move and how it should move. Example: “Isolate only the planet and animate it so it slowly rotates. The movement must be completely fluid, with no stepping, stuttering, held frames or sudden jumps.”]
Create two separate files:
1. A transparent WebM containing only the selected animated element.
2. A static background image created from the uploaded image, but with the selected animated element completely removed.
Keep both files at exactly the same canvas dimensions as the uploaded image so they align perfectly when layered on top of each other.
For the static background image, preserve every part of the original image except the selected animated element. Remove the element completely and naturally reconstruct the area that was hidden behind it, matching the surrounding background, lighting, textures, colors and details. There must be no visible remnants, outlines, shadows, glow, reflections or artifacts from the removed element unless they naturally belong to the environment independently of the object.
Preserve the selected animated element’s original size, shape, perspective, colors, details and overall appearance in the WebM overlay.
Animate only the selected element and only in the manner described above. Do not animate, move, scale, rotate, pulse, deform or regenerate any other part of the image.
If the selected motion involves moving the entire object, isolate it as a single intact cutout and move it without changing or deforming its appearance. If only an internal texture or effect should move, keep the element’s overall silhouette and position completely fixed while animating only its internal light, texture, smoke, flames, particles or other specified details.
Everything except the selected animated element must be fully transparent in the WebM. This includes the background and all objects that remain visible in the separate static background image.
The motion must be perfectly smooth and continuously interpolated frame by frame. Do not use whole-pixel stepping, held frames or duplicated frames. There must be no stuttering, jitter, sudden jumps or unintended changes in speed.
For positional back-and-forth movement, use smooth sinusoidal ease-in-out motion with sub-pixel interpolation. If necessary, render at a higher resolution and downsample to achieve fluid sub-pixel movement.
Create a slow, perfectly seamless 10-second loop designed for continuous autoplay. It must look like the animation is running endlessly, with no visible beginning or end. The transition from the final frame back to the first frame must be completely invisible.
The first and final moments must match not only in position and appearance, but also in movement direction, speed, lighting, texture and every other animated property. There must be no pause, hesitation, jump, reversal, flicker or change in timing when the video repeats. Do not add a duplicated final frame.
Preview the animation repeating continuously for several complete cycles before exporting. Verify that it is impossible to identify where one loop ends and the next begins, that the motion remains fluid, that the transparency is clean and that the WebM aligns perfectly with the separate static background image.
Export the animation as a VP9 WebM with alpha transparency, 30 fps and no audio.
Export the static background image as a high-quality PNG or lossless WebP at the exact original dimensions.
Use the original pixels from the uploaded image wherever possible. Do not redesign, replace or recreate the selected animated element. Only reconstruct the specific background area that becomes visible after removing it from the static image.
Download Full Template
Requires membership to download. Join here
Get the finished version
Want your website to look more impressive? Import all my designs including this one:
- Skip everything
- Save hours on this build
- Look like a pro
Download template
Requires membership to download. Join here
Build it manually from scratch:
All materials:
Code:
<div class="portal-layer">
<video class="portal-video" autoplay muted loop playsinline>
<source
src="https://royalblue-jellyfish-354834.hostingersite.com/wp-content/uploads/2026/09/space-portal-slow-rotation-2-1.webm"
type="video/webm"
>
</video>
</div>
<!-- Stones in front of the astronaut -->
<div class="magnetic-stones magnetic-stones--back" aria-hidden="true">
<span
class="magnetic-stone"
data-x="57"
data-y="29"
data-depth="0.65"
style="--left:57%; --top:29%; --size:13px; --duration:4.8s; --delay:-1.2s;"
></span>
<span
class="magnetic-stone"
data-x="72"
data-y="31"
data-depth="0.8"
style="--left:72%; --top:31%; --size:20px; --duration:5.4s; --delay:-2.8s;"
></span>
<span
class="magnetic-stone"
data-x="55"
data-y="54"
data-depth="0.55"
style="--left:55%; --top:54%; --size:10px; --duration:4.2s; --delay:-0.8s;"
></span>
<span
class="magnetic-stone"
data-x="74"
data-y="59"
data-depth="0.75"
style="--left:74%; --top:59%; --size:16px; --duration:5.8s; --delay:-3.1s;"
></span>
<span
class="magnetic-stone"
data-x="63"
data-y="68"
data-depth="0.5"
style="--left:63%; --top:68%; --size:9px; --duration:4.6s; --delay:-1.9s;"
></span>
</div>
<!-- STEN FORAN ASTRONAUTEN -->
<div class="magnetic-stones magnetic-stones--front" aria-hidden="true">
<span
class="magnetic-stone magnetic-stone--soft"
data-x="59"
data-y="42"
data-depth="1.15"
style="--left:59%; --top:42%; --size:15px; --duration:4.4s; --delay:-2.2s;"
></span>
<span
class="magnetic-stone"
data-x="71"
data-y="46"
data-depth="1.25"
style="--left:71%; --top:46%; --size:11px; --duration:5.1s; --delay:-1.4s;"
></span>
<span
class="magnetic-stone magnetic-stone--soft"
data-x="68"
data-y="65"
data-depth="1.35"
style="--left:68%; --top:65%; --size:23px; --duration:5.7s; --delay:-3.5s;"
></span>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
/* Hero */
.portal-hero {
position: relative !important;
overflow: hidden !important;
}
/* Keep widget static */
.portal-hero .elementor-widget-html {
position: static !important;
}
/* Portal layer */
.portal-layer {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* Portal */
.portal-video {
position: absolute !important;
left: 64% !important;
top: 37% !important;
width: 650px !important;
max-width: none !important;
height: auto !important;
transform: translate(-50%, -50%) !important;
}
/* Astronaut */
#astro1 {
--astro-x: 0px;
--astro-y: 0px;
--astro-rotate: 0deg;
position: absolute !important;
left: 65% !important;
top: 43% !important;
width: 410px !important;
max-width: none !important;
transform:
translate(-50%, -50%)
translate3d(var(--astro-x), var(--astro-y), 0)
rotate(var(--astro-rotate)) !important;
transform-origin: 50% 45% !important;
will-change: transform;
z-index: 3 !important;
}
/* Astronaut inner */
#astro1 .elementor-widget-container {
position: relative !important;
width: 100% !important;
animation: astro1Float 6s ease-in-out infinite alternate;
}
/* Image */
#astro1 img {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
animation: none !important;
z-index: 1 !important;
}
@keyframes astro1Float {
from {
transform: translateY(-20px);
}
to {
transform: translateY(20px);
}
}
/* Visor reflection */
.astro-visor-reflection {
--visor-x: 50%;
--visor-y: 45%;
position: absolute;
left: 60%;
top: 14%;
width: 34%;
height: 16%;
transform:
translate(-50%, -50%)
rotate(-5deg);
border-radius: 48% 48% 52% 52%;
overflow: hidden;
pointer-events: none;
opacity: 0.8;
mix-blend-mode: screen;
-webkit-mask-image:
radial-gradient(
ellipse at center,
#000 20%,
rgba(0,0,0,0.94) 58%,
transparent 77%
);
mask-image:
radial-gradient(
ellipse at center,
#000 20%,
rgba(0,0,0,0.94) 58%,
transparent 77%
);
z-index: 4;
}
/* Cursor light */
.astro-visor-reflection::before {
content: "";
position: absolute;
left: var(--visor-x);
top: var(--visor-y);
width: 72%;
height: 175%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
ellipse at center,
rgba(255,255,255,0.72) 0%,
rgba(255,222,205,0.38) 25%,
rgba(255,74,51,0.20) 47%,
transparent 72%
);
filter: blur(4px);
}
/* Stones */
.magnetic-stones {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
}
/* Behind */
.magnetic-stones--back {
z-index: 2 !important;
}
/* In front */
.magnetic-stones--front {
z-index: 4 !important;
}
/* Stone position */
.magnetic-stone {
--stone-x: 0px;
--stone-y: 0px;
--stone-rotate: 0deg;
position: absolute;
left: var(--left);
top: var(--top);
width: var(--size);
height: var(--size);
transform:
translate(-50%, -50%)
translate3d(var(--stone-x), var(--stone-y), 0)
rotate(var(--stone-rotate));
will-change: transform;
}
/* Stone style */
.magnetic-stone::before {
content: "";
position: absolute;
inset: 0;
border-radius: 37% 63% 48% 52% / 55% 42% 58% 45%;
clip-path:
polygon(
18% 4%,
73% 0%,
100% 31%,
88% 79%,
55% 100%,
12% 86%,
0% 43%
);
background:
radial-gradient(
circle at 27% 22%,
#ff8b74 0%,
#f44332 18%,
#b91e19 42%,
#540807 72%,
#160202 100%
);
box-shadow:
inset 2px 2px 3px rgba(255,255,255,0.20),
inset -4px -5px 8px rgba(0,0,0,0.75),
0 0 8px rgba(238,47,38,0.52);
animation:
magneticStoneFloat
var(--duration)
ease-in-out
var(--delay)
infinite
alternate;
}
/* Foreground stone */
.magnetic-stone--soft::before {
filter: blur(0.8px);
opacity: 0.9;
box-shadow:
inset 2px 2px 4px rgba(255,255,255,0.18),
inset -5px -6px 9px rgba(0,0,0,0.78),
0 0 12px rgba(238,47,38,0.6);
}
/* Stone float */
@keyframes magneticStoneFloat {
from {
transform:
translate3d(-3px, -5px, 0)
rotate(-8deg);
}
to {
transform:
translate3d(4px, 6px, 0)
rotate(10deg);
}
}
/* Heading */
.portal-heading {
position: relative !important;
width: 100% !important;
z-index: 2 !important;
overflow: visible !important;
}
.portal-heading .elementor-heading-title {
font-family: "Anton", sans-serif !important;
font-weight: 400 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
color: transparent !important;
background: linear-gradient(
180deg,
#ffffff 0%,
#fafafa 22%,
#f1f1ef 40%,
#dededb 56%,
#bdbdba 72%,
#929290 87%,
#686866 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 0.25px rgba(255,255,255,0.16);
filter:
drop-shadow(0 2px 1px rgba(255,255,255,0.06))
drop-shadow(0 14px 24px rgba(0,0,0,0.18));
}
/* Tablet */
@media (max-width: 1024px) {
.portal-heading .elementor-heading-title {
font-size: 14vw !important;
}
.magnetic-stones {
transform: scale(0.8);
transform-origin: center;
}
}
/* Mobile */
@media (max-width: 767px) {
.portal-heading .elementor-heading-title {
font-size: 13.5vw !important;
letter-spacing: -0.02em !important;
}
.magnetic-stones,
.astro-visor-reflection {
display: none !important;
}
}
/* No cursor effects on touch */
@media (pointer: coarse) {
.magnetic-stones,
.astro-visor-reflection {
display: none !important;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
#astro1 .elementor-widget-container,
.magnetic-stone::before {
animation: none !important;
}
}
</style>
<script>
(function () {
function initializeAstronautInteraction() {
var hero = document.querySelector(".portal-hero");
var astronaut = document.getElementById("astro1");
if (!hero || !astronaut) {
return;
}
if (
hero.getAttribute("data-astronaut-interaction") ===
"initialized"
) {
return;
}
hero.setAttribute(
"data-astronaut-interaction",
"initialized"
);
if (window.matchMedia("(pointer: coarse)").matches) {
return;
}
var astronautContainer =
astronaut.querySelector(".elementor-widget-container") ||
astronaut;
/* Add visor light */
var visor = document.createElement("span");
visor.className = "astro-visor-reflection";
visor.setAttribute("aria-hidden", "true");
astronautContainer.appendChild(visor);
var stones = Array.prototype.slice.call(
hero.querySelectorAll(".magnetic-stone")
);
var stoneStates = stones.map(function (stone) {
return {
element: stone,
xPercent: parseFloat(
stone.getAttribute("data-x")
),
yPercent: parseFloat(
stone.getAttribute("data-y")
),
depth: parseFloat(
stone.getAttribute("data-depth")
),
currentX: 0,
currentY: 0,
currentRotation: 0
};
});
var mouseX = 0;
var mouseY = 0;
var pointerActive = false;
var astronautX = 0;
var astronautY = 0;
var astronautRotation = 0;
var visorX = 50;
var visorY = 45;
var animationFrame = null;
function clamp(value, minimum, maximum) {
return Math.min(
Math.max(value, minimum),
maximum
);
}
function startAnimation() {
if (!animationFrame) {
animationFrame =
window.requestAnimationFrame(animate);
}
}
function animate() {
animationFrame = null;
var heroRectangle =
hero.getBoundingClientRect();
var normalizedX = 0;
var normalizedY = 0;
if (pointerActive) {
normalizedX = clamp(
(
mouseX -
(
heroRectangle.left +
heroRectangle.width / 2
)
) /
(heroRectangle.width / 2),
-1,
1
);
normalizedY = clamp(
(
mouseY -
(
heroRectangle.top +
heroRectangle.height / 2
)
) /
(heroRectangle.height / 2),
-1,
1
);
}
/* Astronaut drift */
var targetAstronautX =
pointerActive ? normalizedX * 7 : 0;
var targetAstronautY =
pointerActive ? normalizedY * 5 : 0;
var targetAstronautRotation =
pointerActive ? normalizedX * 2.2 : 0;
astronautX +=
(targetAstronautX - astronautX) * 0.09;
astronautY +=
(targetAstronautY - astronautY) * 0.09;
astronautRotation +=
(
targetAstronautRotation -
astronautRotation
) * 0.09;
astronaut.style.setProperty(
"--astro-x",
astronautX.toFixed(2) + "px"
);
astronaut.style.setProperty(
"--astro-y",
astronautY.toFixed(2) + "px"
);
astronaut.style.setProperty(
"--astro-rotate",
astronautRotation.toFixed(2) + "deg"
);
/* Move visor light */
var targetVisorX =
pointerActive
? 50 + normalizedX * 24
: 50;
var targetVisorY =
pointerActive
? 45 + normalizedY * 21
: 45;
visorX += (targetVisorX - visorX) * 0.12;
visorY += (targetVisorY - visorY) * 0.12;
visor.style.setProperty(
"--visor-x",
visorX.toFixed(2) + "%"
);
visor.style.setProperty(
"--visor-y",
visorY.toFixed(2) + "%"
);
/* Move stones */
stoneStates.forEach(function (state) {
var baseX =
heroRectangle.left +
heroRectangle.width *
state.xPercent / 100;
var baseY =
heroRectangle.top +
heroRectangle.height *
state.yPercent / 100;
var differenceX = mouseX - baseX;
var differenceY = mouseY - baseY;
var distance = Math.sqrt(
differenceX * differenceX +
differenceY * differenceY
);
var influence = 0;
if (pointerActive) {
influence = Math.max(
0,
1 - distance / 480
);
}
var force =
influence *
0.10 *
state.depth;
var targetX = clamp(
differenceX * force,
-34,
34
);
var targetY = clamp(
differenceY * force,
-34,
34
);
var targetRotation = pointerActive
? normalizedX * 7 * state.depth
: 0;
state.currentX +=
(targetX - state.currentX) * 0.1;
state.currentY +=
(targetY - state.currentY) * 0.1;
state.currentRotation +=
(
targetRotation -
state.currentRotation
) * 0.1;
state.element.style.setProperty(
"--stone-x",
state.currentX.toFixed(2) + "px"
);
state.element.style.setProperty(
"--stone-y",
state.currentY.toFixed(2) + "px"
);
state.element.style.setProperty(
"--stone-rotate",
state.currentRotation.toFixed(2) + "deg"
);
});
var stillMoving =
Math.abs(astronautX - targetAstronautX) > 0.02 ||
Math.abs(astronautY - targetAstronautY) > 0.02 ||
Math.abs(
astronautRotation -
targetAstronautRotation
) > 0.02 ||
Math.abs(visorX - targetVisorX) > 0.02 ||
Math.abs(visorY - targetVisorY) > 0.02;
stoneStates.forEach(function (state) {
if (
Math.abs(state.currentX) > 0.02 ||
Math.abs(state.currentY) > 0.02 ||
Math.abs(state.currentRotation) > 0.02
) {
stillMoving = true;
}
});
if (pointerActive || stillMoving) {
startAnimation();
}
}
hero.addEventListener(
"pointermove",
function (event) {
if (event.pointerType === "touch") {
return;
}
mouseX = event.clientX;
mouseY = event.clientY;
pointerActive = true;
startAnimation();
},
{ passive: true }
);
hero.addEventListener(
"pointerleave",
function () {
pointerActive = false;
startAnimation();
},
{ passive: true }
);
}
if (document.readyState === "loading") {
document.addEventListener(
"DOMContentLoaded",
initializeAstronautInteraction
);
} else {
initializeAstronautInteraction();
}
if (
window.elementorFrontend &&
window.elementorFrontend.isEditMode &&
window.elementorFrontend.isEditMode()
) {
setTimeout(
initializeAstronautInteraction,
500
);
}
})();
</script>
Classes and ID:
Class:
cs-hero bkn-slide bkn-slide-1 portal-hero
ID:
astro1