Gaussian Splatting Landing Pages: Scroll-Driven 3D Storytelling (2026)

For two years, Gaussian splats lived inside a box. You captured a space, dropped it into a viewer, and visitors spun it around like a 3D model on Amazon. Impressive once. Forgettable by the second scroll.

That box is gone. The same photoreal capture that powered those spin-the-model viewers can now be the set for a story — revealed by scroll, lit by a real lighting system, and fused with interactive 3D objects that respond to physics. The capture is the world; everything else moves through it.

This is what a scroll-driven Gaussian splatting landing page is. Not a 3D toy embedded in a corner of your homepage — a hero experience where photoreal reality and interactive 3D share one scene, and scrolling is the camera.

Who this is for: Brand leads, marketing teams, and founders commissioning a flagship landing page or product launch — anyone who wants photoreal differentiation that a video can't match and a generic 3D scene can't fake.

Key Takeaways

• What it is: A landing page where a photoreal Gaussian splat capture is the environment, and scroll position drives a cinematic camera through it — mixed with real-time 3D objects, physics, and lighting.
• Why it beats video: Video plays the same path every time. A splat scene is real depth — parallax, interaction, and 3D objects that live inside the captured world, not on top of it.
• The hard part is weight, not wonder: A raw splat scene is 20–200 MB. The craft is loading it without wrecking your LCP. Done right, you ship a photoreal hero that still passes Core Web Vitals.
• Performance, once loaded, is excellent: Real-time 60 FPS on desktop, 30–45 FPS on modern phones, with photoreal detail that would cost far more in polygons.
• Cost band: Capture runs $500–$5,000; a custom scroll-driven splat landing page typically $15,000–$60,000+ depending on physics, interactivity, and mobile polish.
• When it converts vs. when it's vanity: Brilliant for a flagship hero, a product reveal, or a launch moment with a real conversion thesis. Wrong for an SEO-primary page or a thin "we wanted something cool" brief.

What a Scroll-Driven Splat Landing Page Actually Is

It helps to separate three things people lump together.

A static splat viewer. You've seen these — a captured room or product in a frame, with orbit controls. The visitor drives the camera. It's useful for inspection (real estate tours, e-commerce close-ups) and we cover it fully in our Gaussian Splatting guide. But it's passive. The page doesn't tell a story; it waits for the visitor to poke at it.

Generative-3D scrollytelling. The Stripe / Apple-product-page lineage: scroll drives an animation through 3D scenes built in Blender or three.js. Gorgeous, narrative, proven — we wrote the playbook in our immersive storytelling websites guide. But the 3D is modeled. It looks like CG because it is CG.

A scroll-driven splat landing page is the third thing. It takes the photoreal capture from the first and the narrative camera from the second, and puts them together. Scroll moves a cinematic camera through a real captured place, while interactive 3D elements — product geometry, UI, typography that lives in space — are composited into the same scene and respond to the visitor.

The differentiator is one word: photoreal. Your hero isn't a stylized 3D render of your product or space. It's the actual thing, captured as light, with a camera gliding through it as the visitor scrolls.

Why Mix Splats With Real 3D — and Why That's the Hard Part

A splat on its own is beautiful but inert. You can't easily put a button inside it, make an object collide with it, or relight it for a different mood. Splats are captured light — they don't natively know about your CG geometry, your interactions, or your scene's lighting.

Making them work together with normal 3D is the real engineering. This is where Utsubo has spent serious R&D, and it's the heart of what makes these experiences possible:

• A custom Gaussian splatting player on a three.js WebGPU renderer. Splats and ordinary three.js objects render in the same pipeline, in the same scene, with correct depth between them — so a 3D product can sit in front of part of the captured world and behind another part, the way it would in reality.
• Our own physics engine. Objects collide, fall, and react inside the captured space. The scene can respond to scroll and input — a splat environment that isn't just a backdrop but something the experience acts upon.
• Our own lighting system. We can relight a captured scene and introduce CG lights that affect both the splats and the 3D objects, so everything shares one coherent lighting model instead of looking like two layers pasted together.

That last point is what separates "a splat with some HTML over it" from a believable world. When the captured environment and the injected 3D respond to the same lights and the same physics, the visitor stops seeing a trick and starts believing the space.

To be clear about framing: a specific landing page built end-to-end is a concept we can ship for your brand. The underlying technology — the WebGPU splat player, the physics, the lighting integration — is real and built. We bring the engine; the page is the commission.

Scroll as the Director

In a traditional landing page, scrolling moves a document. In one of these experiences, scrolling moves a camera through a world — and triggers everything that world does.

A single scroll timeline can drive:

• The camera path — a slow push into the captured space, a pull-back to reveal scale, an orbit around a product placed inside it.
• Reveals — sections of the splat or 3D objects fading in, snapping into focus, or assembling as the visitor descends.
• Physics beats — an object dropping, scattering, or settling at a precise scroll position for a beat of drama.
• Lighting shifts — the captured scene moving from dawn to dusk, a spotlight finding the product, mood changing with the narrative.

The orchestration pattern is the same scroll-triggered approach that powers all premium narrative sites — GSAP and ScrollTrigger are the industry standard, and we go deep on the narrative craft in the immersive storytelling guide. The difference here is what's being directed: not a modeled scene, but a photoreal one with real 3D and physics living inside it.

File Weight: The Thing That Makes or Breaks It

Here's the honest constraint, and the one decision-makers most need to understand before commissioning: splats are heavy.

A raw captured scene routinely lands at 20–200 MB. A normal landing page hero image is a few hundred kilobytes. If you naively drop a full splat scene onto a page, your Largest Contentful Paint collapses, mobile users bounce, and the beautiful experience never gets seen.

So the entire discipline of doing this well is loading the weight without paying for it up front:

• Compression. Modern formats (SPZ, KSPLAT, SOG) cut file size 5–10× versus raw PLY with little visible loss. This is non-negotiable for web.
• Level of detail (LOD). Serve a lighter version of the scene first, refine as the visitor stays and scrolls. The opening frame loads fast; full fidelity arrives behind it.
• Progressive and lazy loading. The hero doesn't need the whole scene to start — it needs the first beat. The rest streams as the visitor scrolls toward it, so the initial paint stays light and your LCP stays green.
• Mobile budgets. Phones can't carry desktop splat counts. Targeting 200K–500K splats (versus 1–2M on desktop), with a graceful fallback for low-end devices, keeps the experience fast where most traffic actually is.

The framing that matters: weight is a discipline, not a blocker. This is exactly the "one WebGL surface, lazy-loaded, with a passing LCP" principle from our SaaS marketing site engineering breakdown — applied to the most demanding asset on the page. Handled by a team that does the loading work, a photoreal splat hero ships with green Core Web Vitals, not against them. Handled carelessly, it's the heaviest mistake on your site.

The Upside: Performance and Impact

Once the scene is loaded, the math turns in your favor.

Performance. Gaussian splats render in real time — 60 FPS on desktop, 30–45 FPS on modern phones — and they're often cheaper for the GPU than an equivalently detailed polygon scene, because there are no millions of triangles to shade. WebGPU pushes this further, with meaningful speed-ups over WebGL for splat workloads. You get photoreal detail at a frame rate that feels alive.

Impact. This is where the budget justifies itself:

• Differentiation. Almost no one is shipping photoreal, scroll-driven, interactive splat experiences. You won't look like every other site with a Spline scene in the hero.
• Dwell time. People scroll all the way through a world they want to explore. Depth and interactivity hold attention in a way a looping video doesn't.
• Shareability and PR. A genuinely novel hero gets posted, linked, and written about. The experience becomes its own distribution. (The neuroscience of why immersive 3D captures attention is in our psychology of digital awe piece.)

When to Use It — and When Not To

This is a sharp tool. Use it on purpose.

Reach for a scroll-driven splat page when the realness of a place or product is the story — a captured flagship store, a real hotel, a physical product whose material quality is the selling point — and you have a conversion goal behind the wow.

Don't, when the page's primary job is SEO and text discovery (these are conversion/impression surfaces, not ranking pages — pair them with a traditional structure), when there's no real reason for photorealism over a stylized scene, or when your audience is overwhelmingly on low-end mobile and the experience would degrade for most of them.

Cost and Timeline

Two cost layers stack here.

Capture — getting the photoreal scene: $500–$5,000 depending on the size and complexity of the space or object, consistent with the figures in our Gaussian Splatting guide.

The custom landing page — building the scroll-driven experience on top: typically $15,000–$60,000+. What moves the number:

• Camera and narrative complexity (a single push-in vs. a multi-scene journey)
• Physics and interactivity (static beauty vs. objects that react)
• Lighting integration (use the captured lighting vs. a fully relit, mood-shifting scene)
• Mobile QA and loading optimization — budget this as a real line item, not an afterthought; it's the work that protects your Core Web Vitals
• 3D asset production for the objects composited into the scene

Timelines generally run 4–10 weeks: capture and processing first, then scene assembly, scroll choreography, and the loading/mobile optimization pass that makes it shippable.

FAQs

Will a Gaussian splatting hero hurt my SEO or page speed? Not if it's built with loading discipline. The splat scene is lazy-loaded and progressively streamed so your Largest Contentful Paint stays green — the heavy data arrives behind the first paint, not in front of it. Treat these pages as conversion and impression surfaces, and keep a traditional text structure for search discovery.

Does this work on mobile? Yes, with the right budget. Phones run optimized scenes at 30–45 FPS by targeting lower splat counts (200K–500K versus 1–2M on desktop) and serving a graceful fallback for low-end devices. Mobile optimization is core scope, not an add-on.

How big are the files, really? Raw scenes are 20–200 MB. After compression (SPZ/KSPLAT/SOG, 5–10× smaller) plus level-of-detail and progressive loading, the visitor never downloads the full weight before seeing the hero — they get the first beat fast and the rest streams as they scroll.

Can you really mix splats with physics and 3D objects? Yes — that's the core of our R&D. Our custom splat player runs on a three.js WebGPU renderer with our own physics engine and lighting system, so photoreal splats and ordinary 3D objects share one scene, one depth buffer, and one lighting model. Objects can collide inside the captured space and react to scroll.

Why not just use a video hero instead? Video plays one fixed path and has no depth or interaction. A splat scene is real 3D — parallax, a camera the visitor drives by scrolling, and interactive objects living inside the captured world. It's the difference between watching a space and being in it.

What does a project like this cost and how long does it take? Capture runs $500–$5,000; the custom scroll-driven landing page typically $15,000–$60,000+ depending on physics, interactivity, lighting, and mobile polish. Plan on roughly 4–10 weeks from capture to launch.

About Utsubo

Utsubo is a creative technology studio specializing in real-time 3D web experiences. For scroll-driven Gaussian splatting landing pages, our toolkit is built in-house:

• Custom Gaussian splatting player on a three.js WebGPU renderer: Splats and ordinary 3D objects render in one pipeline, one scene, with correct depth between them.
• Our own physics engine: Objects collide, fall, and react inside the captured world, and the scene responds to scroll and input.
• Our own lighting system: Relight captured scenes and introduce CG lights that affect both splats and 3D objects, so everything shares one coherent lighting model.
• Web optimization pipeline: Compression, LOD, and progressive loading so photoreal scenes ship with green Core Web Vitals.
• Immersive websites: Scroll-driven narratives and brand storytelling, from concept to launch.

We've been building with Three.js since its early days and have integrated Gaussian Splatting into our toolkit as the technology matured — including the harder problem of making splats coexist with real-time 3D, physics, and lighting in a single coherent scene.

Get Started

Whether you're scoping a flagship hero or a product launch, we can help you decide whether a scroll-driven splat experience fits — and what it would take to ship one that stays fast.

Book a 30-minute consultation to discuss your concept, the capture, and a realistic loading and budget plan.

• Book a call:cal.com/utsubo/30min
• Email:contact@utsubo.co