planetrenox/planetrenox.com
1
0
Fork 0
mirror of https://github.com/planetrenox/planetrenox.com.git synced 2026-01-13 16:18:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
bbf0ca56b1d5a6e2890f82811d822423b6fc2d6f
planetrenox.com/index.html

310 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Planet Renox — Neon Momentum</title>
<meta name="description" content="Planet Renox crafts kinetic experiences and a hyperflow runner game that pushes your reflexes beyond the ordinary.">
<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=Space+Grotesk:wght@400;500;600;700&family=Archivo+Black&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#050311;--bg2:#08041f;--text:#f8f9ff;--muted:#a3a7d7;--accent:#ff5cf4;--accent2:#4df3ff;--accent3:#ffe66d;--max:1080px;--glass:linear-gradient(135deg,rgba(24,18,54,.9),rgba(12,9,28,.9));--shadow:0 30px 80px -40px rgba(0,0,0,.8)}
html,body{scroll-behavior:smooth}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:radial-gradient(circle at 15% 20%,rgba(108,19,255,.35),transparent 45%),radial-gradient(circle at 80% 10%,rgba(0,183,255,.25),transparent 40%),radial-gradient(circle at 50% 75%,rgba(255,63,137,.2),transparent 55%),var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
body::before{content:"";position:fixed;inset:-40vh;pointer-events:none;background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.15),transparent 60%),radial-gradient(1px 1px at 90px 80px,rgba(255,255,255,.2),transparent 50%),radial-gradient(1px 1px at 140px 120px,rgba(255,255,255,.08),transparent 45%);background-size:200px 200px,160px 160px,140px 140px;opacity:.5;filter:blur(.2px);z-index:-1;animation:twinkle 28s linear infinite}
@keyframes twinkle{50%{opacity:.3}100%{transform:translate3d(48px,-32px,0);opacity:.55}}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:9;background:rgba(5,3,17,.75);backdrop-filter:blur(18px);border-bottom:1px solid rgba(92,86,146,.25)}
nav{max-width:var(--max);margin:auto;display:flex;align-items:center;gap:max(5vw,2rem);padding:1.25rem 5vw}
.logo{font-family:'Archivo Black',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;font-size:1.05rem;display:inline-flex;align-items:center;gap:.35rem;color:var(--accent2)}
.logo span{display:inline-block;width:.6rem;height:.6rem;border-radius:999px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.nav-links{display:flex;gap:1.75rem;font-weight:500;color:var(--muted)}
.nav-links a{position:relative;font-size:.95rem}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-.45rem;width:0;height:2px;border-radius:2px;background:var(--accent2);transition:.3s}
.nav-links a:focus-visible,.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
.cta-github{margin-left:auto;display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1rem;border:1px solid rgba(77,243,255,.35);border-radius:999px;background:rgba(16,24,46,.2);color:var(--accent2);font-weight:600;box-shadow:0 12px 30px -22px rgba(77,243,255,.8);transition:.25s}
.cta-github:hover{transform:translateY(-2px);border-color:rgba(255,92,244,.45);color:var(--accent)}
main{flex:1}
section{padding:clamp(4rem,4vw+2rem,6.5rem) 5vw}
.container{max-width:var(--max);margin:auto}
.hero{padding-top:5rem;padding-bottom:6rem}
.hero-grid{display:grid;gap:4rem;align-items:center;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.badge{display:inline-flex;align-items:center;gap:.65rem;padding:.45rem .95rem;border-radius:999px;background:rgba(16,24,46,.55);border:1px solid rgba(77,243,255,.45);text-transform:uppercase;font-size:.72rem;letter-spacing:.2em;color:var(--accent2)}
.badge span{display:inline-flex;width:.6rem;height:.6rem;border-radius:50%;background:var(--accent3);box-shadow:0 0 6px rgba(255,230,109,.7)}
.hero h1{font-family:'Archivo Black',system-ui,sans-serif;font-size:clamp(2.8rem,5vw,4.3rem);line-height:1.05;letter-spacing:.04em;text-transform:uppercase}
.hero h1 strong{display:block;color:var(--accent);text-shadow:0 0 28px rgba(255,92,244,.6)}
.hero p{max-width:32rem;color:var(--muted);font-size:1.05rem;margin:1.6rem 0 2.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}
.btn{display:inline-flex;align-items:center;gap:.75rem;padding:.9rem 1.6rem;border-radius:999px;font-weight:600;letter-spacing:.045em;background:var(--accent);color:#0b0212;border:none;box-shadow:0 18px 40px -26px rgba(255,92,244,.9);transition:.25s}
.btn svg{width:1.1rem}
.btn:hover{transform:translateY(-3px);filter:brightness(1.08)}
.btn-alt{background:transparent;color:var(--accent2);border:1px solid rgba(77,243,255,.45);box-shadow:0 18px 40px -28px rgba(77,243,255,.7)}
.hero-card{position:relative;padding:2.1rem;border-radius:1.8rem;background:var(--glass);box-shadow:var(--shadow);overflow:hidden}
.hero-card::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle,rgba(77,243,255,.25),transparent 50%);opacity:.9;animation:pulse 12s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}55%{transform:scale(1.15);opacity:.8}}
.hero-card h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.28em;color:var(--accent2);margin-bottom:1.4rem}
.mission{display:grid;gap:1.5rem}
.mission p{color:var(--muted)}
.mission ul{list-style:none;display:grid;gap:.8rem}
.mission li{display:grid;gap:.25rem;padding:1rem;border-radius:1.1rem;background:rgba(11,7,26,.7);border:1px solid rgba(92,86,146,.25)}
.mission li strong{font-size:.95rem;color:var(--text);letter-spacing:.04em}
.mission li span{font-size:.85rem;color:var(--muted)}
.product{background:linear-gradient(140deg,rgba(21,14,48,.95),rgba(7,9,35,.85))}
.section-heading{display:flex;flex-direction:column;gap:.55rem;margin-bottom:2.5rem}
.section-heading span{font-size:.72rem;text-transform:uppercase;letter-spacing:.3em;color:var(--accent3)}
.section-heading h2{font-size:clamp(2.1rem,3vw,2.8rem);font-family:'Archivo Black',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.section-heading p{max-width:34rem;color:var(--muted)}
.product-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.steam{padding:1.8rem;border-radius:1.6rem;background:rgba(8,5,26,.9);border:1px solid rgba(77,243,255,.2);box-shadow:var(--shadow);display:grid;gap:1.4rem}
.steam iframe{width:100%;max-width:646px;height:190px;border:0;border-radius:1rem;filter:drop-shadow(0 20px 35px rgba(0,0,0,.55))}
.product-points{display:grid;gap:1.4rem}
.feature-card{padding:1.4rem 1.6rem;border-radius:1.4rem;background:rgba(12,9,32,.9);border:1px solid rgba(255,92,244,.22);position:relative;overflow:hidden}
.feature-card::after{content:"";position:absolute;top:-40px;right:-50px;width:160px;height:160px;background:radial-gradient(circle,rgba(255,92,244,.28),transparent 60%)}
.feature-card h3{font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem;color:var(--accent)}
.feature-card p{color:var(--muted);font-size:.95rem}
.ethos{background:linear-gradient(160deg,rgba(10,6,28,.95),rgba(26,12,45,.7))}
.ethos-grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ethos-card{padding:1.8rem;border-radius:1.6rem;background:rgba(11,6,30,.85);border:1px solid rgba(118,87,255,.28);box-shadow:var(--shadow);display:grid;gap:.9rem}
.ethos-card h3{font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2)}
.ethos-card p{font-size:.92rem;color:var(--muted)}
.ethos-card ul{list-style:none;display:grid;gap:.5rem}
.ethos-card li{display:flex;align-items:center;gap:.65rem;font-size:.9rem;color:var(--text)}
.ethos-card li::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(255,92,244,.6)}
.mechanics{position:relative}
.mechanics::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%,rgba(255,92,244,.12),transparent 55%);pointer-events:none}
.mechanics-grid{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mechanics-card{padding:1.6rem;border-radius:1.5rem;background:rgba(8,8,36,.82);border:1px solid rgba(77,243,255,.26);display:grid;gap:.8rem}
.mechanics-card h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent2)}
.mechanics-card p{color:var(--muted);font-size:.95rem}
.mechanics-card .chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .75rem;border-radius:999px;background:rgba(255,92,244,.18);color:var(--accent);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
.roadmap{background:linear-gradient(150deg,rgba(12,7,26,.95),rgba(8,15,42,.85))}
.timeline{position:relative;padding-left:1.4rem;display:grid;gap:1.8rem}
.timeline::before{content:"";position:absolute;left:.55rem;top:.3rem;bottom:.3rem;width:2px;background:linear-gradient(180deg,var(--accent2),rgba(255,92,244,.3))}
.timeline-item{position:relative;padding:1.6rem;border-radius:1.5rem;background:rgba(11,8,32,.8);border:1px solid rgba(77,243,255,.2);box-shadow:var(--shadow)}
.timeline-item::before{content:"";position:absolute;left:-1.4rem;top:1.8rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 6px rgba(77,243,255,.18)}
.timeline-item h3{font-size:1rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.6rem;color:var(--accent2)}
.timeline-item p{color:var(--muted);font-size:.95rem}
.community{position:relative;overflow:hidden}
.community::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(77,243,255,.18),transparent 55%),radial-gradient(circle at 20% 80%,rgba(255,92,244,.15),transparent 50%);pointer-events:none}
.community-card{max-width:780px;margin:auto;padding:3rem;border-radius:2rem;background:rgba(6,4,23,.75);border:1px solid rgba(255,92,244,.25);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);text-align:center;display:grid;gap:1.4rem}
.community-card h2{font-family:'Archivo Black',system-ui,sans-serif;font-size:clamp(2.2rem,4vw,2.9rem);letter-spacing:.12em;text-transform:uppercase}
.community-card p{color:var(--muted);max-width:34rem;margin:auto}
.community-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
footer{border-top:1px solid rgba(92,86,146,.25);background:rgba(5,3,17,.92);padding:2.6rem 5vw}
.footer-inner{max-width:var(--max);margin:auto;display:flex;flex-direction:column;gap:.9rem;color:var(--muted);font-size:.9rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer-links a{color:var(--accent2);font-weight:500}
.footer-note{font-size:.8rem;color:rgba(163,167,215,.7)}
@media (max-width:820px){
nav{gap:1.5rem}
.nav-links{gap:1rem;font-size:.9rem}
.cta-github{display:none}
.hero-grid{gap:3rem}
.hero-card{order:-1}
section{padding:3.8rem 7vw}
}
@media (max-width:540px){
nav{flex-direction:column;align-items:flex-start;padding:1.1rem 6vw}
.nav-links{width:100%;justify-content:space-between}
.hero p{font-size:.98rem}
.hero-cta{flex-direction:column;align-items:flex-start}
.community-card{padding:2.4rem}
}
</style>
</head>
<body>
<header>
<nav>
<a class="logo" href="#hero"><span></span>Planet Renox</a>
<div class="nav-links">
<a href="#manifesto">Manifesto</a>
<a href="#game">Game</a>
<a href="#mechanics">Systems</a>
<a href="#roadmap">Roadmap</a>
<a href="#community">Community</a>
</div>
<a class="cta-github" href="https://github.com/planetrenox" target="_blank" rel="noopener">↗ GitHub</a>
</nav>
</header>
<main>
<section class="hero" id="hero">
<div class="container hero-grid">
<div>
<div class="badge"><span></span>Hyperflow collective</div>
<h1>Ride the Neon Momentum<strong>The next pulse of Planet Renox</strong></h1>
<p>We sculpt kinetic worlds where reaction time is worshipped and flow state is mandatory. Planet Renox is a playground for players who thrive on impossible velocity and smooth execution.</p>
<div class="hero-cta">
<a class="btn" href="#game" title="Jump into the Steam experience">
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 5l6 5-6 5V5z" fill="#0b0212"/><path d="M10 1a9 9 0 100 18 9 9 0 000-18zm0 1.5a7.5 7.5 0 110 15 7.5 7.5 0 010-15z" stroke="#0b0212" stroke-width="1.2"/></svg>Play the Widget
</a>
<a class="btn btn-alt" href="https://github.com/planetrenox" target="_blank" rel="noopener">View the source</a>
</div>
</div>
<div class="hero-card">
<h2>Our Mission</h2>
<div class="mission">
<p>Planet Renox exists to hybridize anime energy, movement mastery, and synthwave futurism into one addictive ecosystem.</p>
<ul>
<li><strong>Movement is the narrative</strong><span>Every gradient, obstacle, and track tells the story of speed.</span></li>
<li><strong>Style earns respect</strong><span>Precision lines, saturated colors, kinetic UI, always on brand.</span></li>
<li><strong>Community drives canon</strong><span>Feedback loops turn fans into collaborators and curators.</span></li>
</ul>
</div>
</div>
</div>
</section>
<section class="product" id="game">
<div class="container">
<div class="section-heading">
<span>Game drop</span>
<h2>Renox Hyperflow Runner</h2>
<p>Our flagship Steam release turns endless running into an aerial ballet. Built for the bhop faithful, tuned for anyone chasing instant flow.</p>
</div>
<div class="product-grid">
<div class="steam">
<div>
<h3 style="font-size:1.08rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem;color:var(--accent2);">Steam spotlight</h3>
<p style="color:var(--muted);font-size:.92rem;margin-bottom:1.1rem;">Sit inside the neon pulse. Widget is live, leaderboard-ready, and constantly evolving with community challenges.</p>
</div>
<iframe src="https://store.steampowered.com/widget/1745790/?t=A%20movement%20focused%20endless%20anime%20runner.%20Jump%20till%20you're%20dead.%20It's%20basically%20a%20bhopping%20game.%20Developed%20by%20Planet%20Renox." title="Planet Renox Steam Widget" allowfullscreen></iframe>
</div>
<div class="product-points">
<div class="feature-card">
<h3>Velocity-first design</h3>
<p>Low-latency inputs, clean silhouettes, and easing curves make every micro-adjustment feel intentional, not accidental.</p>
</div>
<div class="feature-card">
<h3>Anime-fueled worldbuilding</h3>
<p>Each background layer references synth cityscapes, chromatic suns, and velocity graffiti to paint the Renox atmosphere.</p>
</div>
<div class="feature-card">
<h3>Endless roadmap</h3>
<p>Seasonal drops add fresh biomes, mutation tracks, and experimental modifiers that reward risk and creativity.</p>
</div>
</div>
</div>
</div>
</section>
<section class="ethos" id="manifesto">
<div class="container">
<div class="section-heading">
<span>Design stance</span>
<h2>The Renox Manifesto</h2>
<p>We cultivate experiences where art direction, mechanics, and sonic identity form an inseparable feedback loop.</p>
</div>
<div class="ethos-grid">
<div class="ethos-card">
<h3>Visual electricity</h3>
<p>Tension between deep-space violets and vaporwave neons creates a pulse that guides the player’s eye.</p>
<ul>
<li>Spectral gradients with chromatic aberration trims</li>
<li>UI glyphs inspired by sci-fi signage</li>
<li>Adaptive glow levels respecting contrast</li>
</ul>
</div>
<div class="ethos-card">
<h3>Mechanic honesty</h3>
<p>Every mechanic surfaces clearly; no hidden stats, no wasted frames. Momentum is earned, not granted.</p>
<ul>
<li>Frame-perfect hops &amp; buffered turns</li>
<li>Readable hitboxes with telegraphed cues</li>
<li>Skill ceilings tuned for esports spectatorship</li>
</ul>
</div>
<div class="ethos-card">
<h3>Sonic fusion</h3>
<p>Bass-driven arcs and airy leads ebb with player velocity, syncing attention with muscle memory.</p>
<ul>
<li>Reactive soundtrack stems</li>
<li>Impact SFX pitched by combo streak</li>
<li>Soundstage calibrated for headphones</li>
</ul>
</div>
<div class="ethos-card">
<h3>Player-as-coauthor</h3>
<p>Community mods, lore submissions, and speedrun labs inform core updates—built in public on GitHub.</p>
<ul>
<li>Transparent issue tracking</li>
<li>Weekly build notes</li>
<li>Contributor shout-outs in launcher</li>
</ul>
</div>
</div>
</div>
</section>
<section class="mechanics" id="mechanics">
<div class="container">
<div class="section-heading">
<span>Systems</span>
<h2>Movement engineering</h2>
<p>We obsess over flow states, tuning micro-interactions to reduce friction and amplify adrenaline.</p>
</div>
<div class="mechanics-grid">
<div class="mechanics-card">
<div class="chip">Momentum</div>
<h3>Hyperlane weaving</h3>
<p>Procedural lane shifts ensure countless pathways without sacrificing route readability.</p>
</div>
<div class="mechanics-card">
<div class="chip">Skill</div>
<h3>Chroma boosts</h3>
<p>Color-coded accelerators force commitment: miss one and you rewrite your entire line.</p>
</div>
<div class="mechanics-card">
<div class="chip">Style</div>
<h3>Aircut combos</h3>
<p>String dives and vaults to unlock particle flourishes that stamp your run in neon.</p>
</div>
</div>
</div>
</section>
<section class="roadmap" id="roadmap">
<div class="container">
<div class="section-heading">
<span>Trajectory</span>
<h2>Plotted course</h2>
<p>Transparent milestones keep our community orbiting the same star map.</p>
</div>
<div class="timeline">
<div class="timeline-item">
<h3>Phase 01 · Foundations</h3>
<p>Refined core physics, shader polish, and implemented the Steam build pipeline with automated QA hooks.</p>
</div>
<div class="timeline-item">
<h3>Phase 02 · Community orbit</h3>
<p>Launching weekly challenge playlists, leaderboard revamps, and tight GitHub issues for collaborative balancing.</p>
</div>
<div class="timeline-item">
<h3>Phase 03 · Mixed reality</h3>
<p>Experimenting with motion rigs, adaptive haptics, and partner showcases to bring Renox off the screen.</p>
</div>
</div>
</div>
</section>
<section class="community" id="community">
<div class="container community-card">
<h2>Dock with the Renox Collective</h2>
<p>Join the builders who are shaping every new patch. File issues, drop concept art, stream speedruns—Planet Renox is an open hangar.</p>
<div class="community-ctas">
<a class="btn" href="https://github.com/planetrenox" target="_blank" rel="noopener">Contribute on GitHub</a>
<a class="btn btn-alt" href="mailto:hello@planetrenox.com">Contact the crew</a>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-inner">
<div class="footer-links">
<a href="#hero">Back to top</a>
<a href="#game">Steam widget</a>
<a href="https://github.com/planetrenox" target="_blank" rel="noopener">GitHub</a>
</div>
<p class="footer-note">© Planet Renox. Crafted for players living on the edge of momentum.</p>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink