Landing Page
A ready-to-host page for spher8.com. Preview it below, then copy the full HTML and paste it into your website. Its buttons link to your Apps page.
Live preview
HTML source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spher8 - The Collection</title>
<meta name="description" content="Step into the Spher8 collection — a growing universe of immersive 3D instruments, sequencers, and sound-design tools blending audio, science, and mathematics.">
<meta name="keywords" content="3D music apps, music instruments, sequencers, sound design, scientific sonification, interactive music, Web Audio MIDI, 3D sound collection">
<script src="https://unpkg.com/lucide@0.441.0/dist/umd/lucide.js"></script>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: radial-gradient(circle at center, #1e1b4b 0%, #0d0225 100%);
color: #fff;
line-height: 1.5;
position: relative;
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
padding: 2rem 1rem;
max-width: 896px;
margin: 0 auto;
position: relative;
z-index: 1;
flex: 1;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 896px;
margin: 0 auto;
padding: 0 1rem;
padding-bottom: 2rem;
}
.logo {
display: flex;
align-items: center;
}
.logo-container {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-icon-wrapper {
position: relative;
}
.logo-icon {
width: 2.5rem;
height: 2.5rem;
background: linear-gradient(to right, #3b82f6, #7c3aed);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.logo-icon i {
width: 1.5rem;
height: 1.5rem;
color: #fff;
stroke-width: 2;
stroke: #fff !important;
fill: none !important;
}
.logo-blur {
position: absolute;
inset: 0;
background: linear-gradient(to right, #3b82f6, #7c3aed);
border-radius: 0.75rem;
filter: blur(8px);
opacity: 0.5;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.5; }
50% { opacity: 0.3; }
100% { opacity: 0.5; }
}
.logo-text h1 {
font-size: 1.25rem;
font-weight: bold;
background: linear-gradient(to right, #ffffff, #bfdbfe);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin: 0;
line-height: 1.1;
}
.logo-text p {
font-size: 0.75rem;
color: #94a3b8;
margin: 0;
line-height: 1.1;
}
.nav {
display: flex;
gap: 1rem;
align-items: center;
}
.nav .cta {
padding: 0.75rem 1.5rem;
background: linear-gradient(to right, #3b82f6, #7c3aed);
color: #fff;
text-decoration: none;
border-radius: 0.5rem;
transition: background 0.3s ease, transform 0.2s ease;
font-size: 0.875rem;
font-weight: 600;
}
.nav .cta:hover {
background: linear-gradient(to right, #7c3aed, #3b82f6);
transform: scale(1.05);
}
.nav .login-btn {
padding: 0.75rem 1.5rem;
background: linear-gradient(to right, #f472b6, #fb923c);
color: #ffffff;
text-decoration: none;
border-radius: 0.5rem;
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
font-size: 0.875rem;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.nav .login-btn:hover {
background: linear-gradient(to right, #fb923c, #f472b6);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.title-section {
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 1;
padding: 2rem;
}
.hero-title {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
background: linear-gradient(to right, #38bdf8, #a78bfa, #f472b6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 0.75rem;
padding: 0.5rem 0;
}
.section-title {
font-size: 1.875rem;
font-weight: 700;
background: linear-gradient(to right, #38bdf8, #a78bfa);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 1.5rem;
}
.description {
font-size: 1.125rem;
color: #d1d5db;
max-width: 672px;
margin: 0 auto;
}
.invitation-wrapper {
position: relative;
width: 100%;
left: 0;
right: 0;
z-index: 0;
overflow: hidden;
}
.invitation-wrapper::before {
content: '';
position: absolute;
top: 0;
left: calc(50% - 50vw);
width: 100vw;
height: 100%;
background-image: url('images/Spher8Bk-01.png');
background-size: auto 100%;
background-position: 0 center;
background-repeat: repeat-x;
opacity: 0.8;
animation: slideBackground 40s linear infinite;
z-index: -1;
}
@keyframes slideBackground {
0% { background-position: 0 center; }
100% { background-position: -1000px center; }
}
.invitation {
margin-top: 4rem;
text-align: center;
position: relative;
z-index: 1;
padding: 2rem;
}
.invitation .frosty-panel {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
max-width: 672px;
margin: 0 auto;
}
.invitation .frosty-panel p {
font-size: 1.125rem;
color: #d1d5db;
margin: 0 auto;
margin-bottom: 1rem;
}
.invitation .frosty-panel p:last-child {
margin-bottom: 0;
}
.invitation strong {
color: #ffffff;
}
.italsky {
color: #38bdf8;
font-style: italic;
font-weight: 600;
}
.explore {
margin-top: 4rem;
text-align: center;
position: relative;
z-index: 1;
padding: 2rem;
}
.explore h2 {
font-size: 1.875rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.explore p {
font-size: 1.125rem;
color: #d1d5db;
max-width: 672px;
margin: 0 auto;
margin-bottom: 2rem;
}
.explore-btn {
display: inline-block;
padding: 1rem 2.5rem;
background: linear-gradient(to right, #3b82f6, #7c3aed);
color: #fff;
text-decoration: none;
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 600;
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}
.explore-btn:hover {
background: linear-gradient(to right, #7c3aed, #3b82f6);
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.55);
}
.footer {
text-align: center;
padding: 2rem 1.5rem;
background: linear-gradient(135deg, rgba(30, 27, 75, 0.5), rgba(13, 2, 37, 0.5));
border-top: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
margin-top: 2rem;
}
.footer p {
font-size: 0.75rem;
color: #94a3b8;
margin-bottom: 0.5rem;
}
.footer a {
color: #94a3b8;
text-decoration: none;
margin: 0 0.5rem;
transition: color 0.3s ease;
}
.footer a:hover {
color: #ffffff;
}
#stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.description {
font-size: 1rem;
}
.section-title,
.explore h2 {
font-size: 1.5rem;
}
.logo-text h1 {
font-size: 1rem;
}
.logo-text p {
font-size: 0.65rem;
}
.logo-icon {
width: 2rem;
height: 2rem;
}
.logo-icon i {
width: 1.2rem;
height: 1.2rem;
}
.nav {
gap: 0.5rem;
}
.nav .cta,
.nav .login-btn {
padding: 0.5rem 1rem;
font-size: 0.75rem;
}
.invitation,
.explore {
padding: 1.5rem;
}
.invitation .frosty-panel {
padding: 1rem;
}
}
</style>
</head>
<body>
<canvas id="stars"></canvas>
<div class="container">
<div class="header">
<div class="logo">
<a href="https://www.spher8.com" style="text-decoration: none; color: inherit;">
<div class="logo-container">
<div class="logo-icon-wrapper">
<div class="logo-icon">
<i data-lucide="atom"></i>
</div>
<div class="logo-blur"></div>
</div>
<div class="logo-text">
<h1>Spher8</h1>
<p>3D Music Composer</p>
</div>
</div>
</a>
</div>
<nav class="nav">
<a href="https://app.spher8.com/apps" class="cta">Apps</a>
</nav>
</div>
<!-- Hero Section -->
<div class="title-section">
<h1 class="hero-title">A Universe of Sound</h1>
<h2 class="section-title">One Collection. Endless Instruments.</h2>
<p class="description">
Spher8 is a growing collection of immersive 3D instruments, sequencers, and sound-design tools — each one a creative space where you shape sound into music you can move through.
</p>
</div>
<!-- Invitation -->
<div class="invitation-wrapper">
<div class="invitation">
<em class="italsky">Every instrument, one universe...</em><br><br>
<div class="frosty-panel">
<p><strong>Explore the full collection</strong> — from expressive synths and playful sequencers to real-time sound tools and tactile 3D performance spaces.</p>
<p>Each app stands on its own, yet they all share the same spatial, hands-on spirit. Discover new textures and craft a sound that's completely yours.</p>
<p>Set your sonic imagination free.</p>
</div>
</div>
</div>
<!-- Call to Action -->
<div class="explore">
<h2>Step Inside the Collection</h2>
<p>
Wander the full suite of Spher8 apps and find the instrument that speaks to you. No manuals, no barriers — just press play and start creating.
</p>
<a href="https://app.spher8.com/apps" class="explore-btn">Browse the Apps →</a>
</div>
</div>
<footer class="footer">
<p>© 2026 Spher8. All rights reserved.</p>
<p>All music and compositions created with Spher8 are the intellectual property of the user.</p>
<div class="links">
<a href="https://app.spher8.com/apps">Apps</a>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
lucide.createIcons();
const canvas = document.getElementById('stars');
const ctx = canvas.getContext('2d');
let stars = [];
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
class Star {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 1 + 1;
this.opacity = Math.random() * 0.5 + 0.3;
this.speed = Math.random() * 0.02 + 0.01;
this.direction = Math.random() > 0.5 ? 1 : -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
ctx.fill();
}
update() {
this.opacity += this.speed * this.direction;
if (this.opacity > 1 || this.opacity < 0.5) {
this.direction *= -1;
}
this.draw();
}
}
function initStars() {
stars = [];
const numStars = Math.floor((canvas.width * canvas.height) / 50000) + 50;
for (let i = 0; i < numStars; i++) {
stars.push(new Star());
}
}
initStars();
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
stars.forEach(star => star.update());
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', () => {
resizeCanvas();
initStars();
});
});
</script>
</body>
</html>