✦ClaudeDesign

"Automation Machines" Spline 3D landing page

A dark technical landing page with a Spline 3D scene, Orbitron/Space Grotesk fonts and entrance animations.

Loading the original X post…

A dark technical landing page with a Spline 3D scene, Orbitron/Space Grotesk fonts and entrance animations.

The prompt

✦Claude (AI builder)

1	Build a dark, minimal "Automation Machines" landing page in React + Vite + Tailwind CSS v4 + Motion (from "motion/react") + Lucide React icons + Spline 3D.
2
3	Fonts (Google Fonts): Orbitron (headings), Space Grotesk (body), JetBrains Mono (labels/stats/nav).
4
5	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.
6
7	Layout & Spline 3D:
8
9	A fixed full-screen Spline scene (z-20) using https://prod.spline.design/PIgTjpRFA03yfLyK/scene.splinecode, lazy-loaded.
10	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.
11	The Spline object also rotates: rotation.y = scrollProgress * PI * 2.
12	Forward wheel/touch events from the Spline canvas to window.scrollBy so scrolling works over the 3D.
13	Content sections use pointer-events-none (with buttons/links set to pointer-events-auto) so the 3D stays interactive beneath.
14	Z-index layers: Hero z-10, Spline z-20, Features/Process z-30, Navbar/ScrollProgress z-50.
15
16	Scroll Progress Bar: 1px white/40 line fixed at top, driven by motion's useScroll + useSpring (scaleX).
17
18	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.
19
20	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.
21
22	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.
23
24	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.
25
26	useInView hook: IntersectionObserver-based, fires once (never reverses). Used for all section entrance animations.
27
28	Key design rules:
29
30	Section headers always follow: horizontal line + mono label above, large Orbitron gradient-to-solid title below
31	Typography: Orbitron for display, Space Grotesk for body, JetBrains Mono for labels/stats
32	All animations are entrance-only, no reverse
33	Dark, technical, minimal aesthetic -- like a developer infrastructure product