148 lines
6.0 KiB
TypeScript
148 lines
6.0 KiB
TypeScript
/**
|
|
* Splat module landing page — rich content for rspace.online/rsplat
|
|
*/
|
|
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rSplat</span>
|
|
<h1 class="rl-heading">(You)rSplat, your dimension.</h1>
|
|
<p class="rl-subtitle">3D Gaussian Splats on the Infinite Canvas</p>
|
|
<p class="rl-subtext">
|
|
View, share, and gate 3D scenes captured with Gaussian splatting.
|
|
Three.js-powered viewing with optional x402 micropayment gating.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rsplat" class="rl-cta-primary" id="ml-primary">Open Canvas</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What rSplat Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🎨</div>
|
|
<h3>3D Gaussian Splatting Viewer</h3>
|
|
<p>Hardware-accelerated WebGL rendering with orbit controls, smooth camera, and full-screen mode.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🖼</div>
|
|
<h3>Infinite Canvas</h3>
|
|
<p>Embed splats as spatial elements on the rSpace infinite canvas alongside other module content.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🌐</div>
|
|
<h3>Spatial Computing</h3>
|
|
<p>Browse, search, and discover 3D scenes shared by your community. Sorted by recent, popular, or tagged.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">💰</div>
|
|
<h3>Token-Gated Access</h3>
|
|
<p>Monetize 3D content with HTTP 402 micropayments. Viewers pay per-view or per-download automatically.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Upload a .ply or .splat File</h3>
|
|
<p>Upload Gaussian splat files captured from real-world scenes or generated from photos and video.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>View in the 3D Scene Viewer</h3>
|
|
<p>Explore 3D scenes directly in the browser with orbit controls, zoom, and pan. No app install needed.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Embed on the Infinite Canvas</h3>
|
|
<p>Place your splat on the infinite canvas alongside other modules. Build spatial experiences for your community.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rSplat.</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🎲</div>
|
|
<h3>Three.js</h3>
|
|
<p>Industry-standard 3D rendering engine for the web. Powers the WebGL scene viewer and camera controls.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔮</div>
|
|
<h3>GaussianSplats3D</h3>
|
|
<p>High-performance Gaussian splatting renderer. Real-time point cloud rendering in the browser.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🗃</div>
|
|
<h3>PostgreSQL</h3>
|
|
<p>Rock-solid relational database for splat metadata, scene descriptions, and access control.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">💰</div>
|
|
<h3>x402</h3>
|
|
<p>Token-gated payment protocol for HTTP 402 micropayments. Monetize premium 3D content natively.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rSplat keeps your information safe.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔒</div>
|
|
<h3>End-to-End Encryption</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>All content encrypted before it leaves your device. Not even the server can read it.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🕵</div>
|
|
<h3>Zero-Knowledge Architecture</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏠</div>
|
|
<h3>Self-Hosted</h3>
|
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">(You)rSplat, your dimension.</h2>
|
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rsplat" class="rl-cta-primary">Open Canvas</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|