@viktoroddy
3D landing
✦Claude3D landing
"Automation Machines" Spline 3D landing page
A dark technical landing page with a Spline 3D scene, Orbitron/Space Grotesk fonts and entrance animations.
Build a dark, minimal "Automation Machines" landing page in React + Vite + Tailwind CSS v4 + Motion (from "motion/react") + Lucide React icons + Spline 3D.
Fonts (Google Fonts): Orbitron (headings), Space Grotesk (body), JetBrains Mono (labels/stats/nav).
Tailwind v4 theme colors: brand-orange #F27D26, bg #0a0a0a, text #f5f5f5, muted #888, stroke #1f1f1f. All backgrounds are pure black. Text is white at varying opacities. No purple/indigo anywhere.
Layout & Spline 3D:
A fixed full-screen Spline scene (z-20) using https://prod.spline.design/PIgTjpRFA03yfLyK/scene.splinecode, lazy-loaded.
On scroll, the Spline wrapper smoothly repositions via CSS transform: centered-right for hero (translateX 28%, scale 1.1), slides left for features (translateX -30%, scale 1.05), slides right for process (translateX 30%, scale 1.1). Use lerp between keypoints based on normalized scroll progress.
The Spline object also rotates: rotation.y = scrollProgress * PI * 2.
Forward wheel/touch events from the Spline canvas to window.scrollBy so scrolling works over the 3D.
Content sections use pointer-events-none (with buttons/links set to pointer-events-auto) so the 3D stays interactive beneath.
Z-index layers: Hero z-10, Spline z-20, Features/Process z-30, Navbar/ScrollProgress z-50.
Scroll Progress Bar: 1px white/40 line fixed at top, driven by motion's useScroll + useSpring (scaleX).
Navbar: Fixed, z-50. Logo "Automation" in Orbitron uppercase tracking-widest. Links: Home, Features, Process, Stats -- in JetBrains Mono 11px uppercase white/50. CTA "Get Started" white pill button. Background transitions from transparent to black/70 + backdrop-blur on scroll. Mobile hamburger menu.
Hero Section: Centered, min-h-screen. Large Orbitron title "Automation / Machines *" -- extralight uppercase, gradient text from white/20 via white/70 to white. Subtitle in Space Grotesk white/70 about building the web. Row of 3 circular icon buttons (Snowflake, Maximize, Zap). All fade-up animated.
Features Section: Right-aligned (flex justify-end, w-55% on desktop). Section header: thin line + "Core Systems" mono label, then Orbitron title "Built for / Performance" (first line gradient, second solid white). 3 cards in a grid with border white/6, rounded-2xl, bg white/2. Each card has an icon, stat value (JetBrains Mono), and title. Cards: (Cpu, "Intelligent Runtime", "<12ms Response"), (Globe, "Edge Distribution", "200+ Nodes"), (Shield, "Zero-Trust Security", "256-bit Encryption"). Staggered fade-up on scroll.
Process Section: Left-aligned (w-50% on desktop). Same header pattern: "Workflow" label, "From Idea / To Production" title. Vertical timeline with 2 steps, each with a circle icon connected by an animated vertical line. Steps: (Terminal, "01 Initialize & Develop", tags: "TypeScript + Vite", "HMR < 50ms"), (Rocket, "02 Deploy & Monitor", tags: "Zero-config CI/CD", "Live metrics"). Tags are small mono-text pill borders. Slide-in-from-left animation.
useInView hook: IntersectionObserver-based, fires once (never reverses). Used for all section entrance animations.
Key design rules:
Section headers always follow: horizontal line + mono label above, large Orbitron gradient-to-solid title below
Typography: Orbitron for display, Space Grotesk for body, JetBrains Mono for labels/stats
All animations are entrance-only, no reverse
Dark, technical, minimal aesthetic -- like a developer infrastructure product
