Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Interactive Showcase</title>
<!-- Premium Technical Typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0A0F1D;
--bg-secondary: #111827;
--accent-glow: #3B82F6;
--accent-warn: #EF4444;
--text-main: #F9FAFB;
--text-muted: #9CA3AF;
--border-line: rgba(255, 255, 255, 0.08);
--glass-bg: rgba(10, 15, 29, 0.8);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background-color: var(--bg-primary);
color: var(--text-main);
font-family: 'IBM Plex Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
.mono {
font-family: 'IBM Plex Mono', monospace;
}
/* Modern Glass-morphism Navigation */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 6vw;
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-line);
}
.nav-logo {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 8px;
}
.nav-logo span {
color: var(--accent-glow);
}
.nav-links {
display: flex;
gap: 32px;
}
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--text-main);
}
/* Smooth Interactive Scrollytelling Track */
#scroll-track {
position: relative;
height: 500vh; /* Determines scroll duration */
}
#sticky-stage {
position: sticky;
top: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
#webgl-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, transparent 30%, var(--bg-primary) 95%);
}
/* Narrative Story Panels */
.story-panel {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
padding: 0 8vw;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: none;
}
.story-panel.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.story-panel.right-align {
justify-content: flex-end;
}
.panel-content {
max-width: 460px;
}
.panel-eyebrow {
color: var(--accent-glow);
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 12px;
}
.panel-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.panel-body {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
}
/* Technical Grid Section */
.grid-section {
position: relative;
z-index: 10;
background-color: var(--bg-primary);
padding: 120px 8vw;
border-top: 1px solid var(--border-line);
}
.section-header {
margin-bottom: 60px;
}
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.feature-card {
background: var(--bg-secondary);
border: 1px solid var(--border-line);
padding: 40px 32px;
border-radius: 4px;
position: relative;
overflow: hidden;
transition: border-color 0.3s ease;
}
.feature-card:hover {
border-color: var(--accent-glow);
}
/* Tactical UI Details (Crop Marks) */
.crop-mark {
position: absolute;
width: 8px;
height: 8px;
border: 1px solid var(--accent-glow);
opacity: 0.4;
}
.crop-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.crop-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.card-icon {
width: 40px;
height: 40px;
stroke: var(--accent-glow);
margin-bottom: 24px;
}
.card-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 12px;
}
.card-body {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.5;
}
footer {
text-align: center;
padding: 40px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
border-top: 1px solid var(--border-line);
background: var(--bg-secondary);
}
</style>
</head>
<body>
<nav>
<div class="nav-logo">NEXUS<span>//</span>ENG</div>
<div class="nav-links">
<a href="#scroll-track">Overview</a>
<a href="#features">Specifications</a>
</div>
</nav>
<!-- Main Scrollytelling Sequence -->
<div id="scroll-track">
<div id="sticky-stage">
<canvas id="webgl-canvas"></canvas>
<div class="vignette"></div>
<!-- Panel 01 -->
<div class="story-panel active" data-index="0">
<div class="panel-content">
<div class="panel-eyebrow mono">System Initiative 01</div>
<h1 class="panel-title">Next-Gen Architecture.</h1>
<p class="panel-body">Welcome to a cleaner presentation engine. Built entirely using high-performance component engineering and hardware-accelerated rendering configurations.</p>
</div>
</div>
<!-- Panel 02 -->
<div class="story-panel right-align" data-index="1">
<div class="panel-content">
<div class="panel-eyebrow mono">System Initiative 02</div>
<h2 class="panel-title">Flawless Fluid Motion.</h2>
<p class="panel-body">As you pass deeper through the viewport stack, layout vectors scale cleanly alongside computational pipelines for a stutter-free runtime environment.</p>
</div>
</div>
<!-- Panel 03 -->
<div class="story-panel" data-index="2">
<div class="panel-content">
<div class="panel-eyebrow mono">System Initiative 03</div>
<h2 class="panel-title">Endless Extensibility.</h2>
<p class="panel-body">Easily wire up geometric forms, standard text overlays, or responsive dynamic grids straight out of the baseline runtime config.</p>
</div>
</div>
</div>
</div>
<!-- Features Technical Grid Section -->
<section class="grid-section" id="features">
<div class="section-header">
<div class="panel-eyebrow mono">Operational Spec Matrix</div>
<h2 class="panel-title" style="font-size: 2.2rem;">Engineered from the ground up.</h2>
</div>
<div class="grid-layout">
<div class="feature-card">
<span class="crop-mark crop-tl"></span><span class="crop-mark crop-br"></span>
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="3" width="20" height="14" rx="2" stroke-linecap="round"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
</svg>
<h3 class="card-title">Hardware Driven</h3>
<p class="card-body">Leveraging GPU-based layout instances to remove layout thrashing and maintain 60 FPS under heavy rendering loads.</p>
</div>
<div class="feature-card">
<span class="crop-mark crop-tl"></span><span class="crop-mark crop-br"></span>
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
<polyline points="2 17 12 22 22 17"/>
<polyline points="2 12 12 17 22 12"/>
</svg>
<h3 class="card-title">Clean Topology</h3>
<p class="card-body">A beautiful, lightweight document architecture built without relying on heavy third-party tracking frameworks or dependencies.</p>
</div>
</div>
</section>
<footer>
© <span id="year-label"></span> NEXUS LABS. ALL RUNTIMES OPERATIONAL.
</footer>
<!-- Stable Three.js Core Script Inclusion -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
document.getElementById('year-label').textContent = new Date().getFullYear();
// --- Core WebGL Scrollytelling Engine Setup ---
(function() {
const canvas = document.getElementById('webgl-canvas');
const track = document.getElementById('scroll-track');
const stage = document.getElementById('sticky-stage');
const panels = Array.from(document.querySelectorAll('.story-panel'));
if (!window.THREE) return;
// Initialize Three.js Components
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0A0F1D);
const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 100);
camera.position.set(0, 0, 4);
const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, powerPreference: "high-performance" });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
// Lighting Rig
const ambientLight = new THREE.AmbientLight(0x1F2937, 1.5);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0x3B82F6, 2.0);
dirLight.position.set(2, 4, 3);
scene.add(dirLight);
// Placeholder Object: High-tech wireframe structure
const geometry = new THREE.IcosahedronGeometry(1, 1);
const material = new THREE.MeshStandardMaterial({
color: 0x111827,
wireframe: true,
roughness: 0.2
});
const coreMesh = new THREE.Mesh(geometry, material);
scene.add(coreMesh);
// Responsive Window Resize Cycle
window.addEventListener('resize', () => {
camera.aspect = stage.clientWidth / stage.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(stage.clientWidth, stage.clientHeight);
});
// Scroll Calculation Loop
function calculateScrollProgress() {
const rect = track.getBoundingClientRect();
const totalScrollable = track.offsetHeight - stage.clientHeight;
if (totalScrollable <= 0) return 0;
return Math.min(Math.max(-rect.top / totalScrollable, 0), 1);
}
let currentActiveIndex = 0;
function updateSceneOnScroll() {
const progress = calculateScrollProgress();
const sectionCount = panels.length;
const activeScale = progress * (sectionCount - 1);
// 1. Dynamic 3D Camera/Object Animations based on Progress
coreMesh.rotation.y = progress * Math.PI * 2;
coreMesh.rotation.x = progress * Math.PI;
coreMesh.scale.setScalar(1 + Math.sin(progress * Math.PI) * 0.4);
// 2. Linear Panel Interpolation State Engine
const nearestIndex = Math.round(activeScale);
if (nearestIndex !== currentActiveIndex) {
panels[currentActiveIndex].classList.remove('active');
currentActiveIndex = nearestIndex;
panels[currentActiveIndex].classList.add('active');
}
}
window.addEventListener('scroll', updateSceneOnScroll, { passive: true });
// Main Animation Engine Core Loop
function renderLoop() {
requestAnimationFrame(renderLoop);
// Slow ambient spin in addition to scroll movements
coreMesh.rotation.z += 0.002;
renderer.render(scene, camera);
}
updateSceneOnScroll();
renderLoop();
})();
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
6
Requests
4
Domains
216KB
Transfer Size
699KB
Content Size
716.0ms
Dom Content Loaded
716.0ms
First Paint
716.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...