Hoversplat

Interactive Gaussian Splat landing page with mouse-driven displacement effects. Hover over the scene to disintegrate and color-shift splats in real time.

Built with Three.js + Spark.js (Gaussian Splat renderer) + a custom GLSL vertex shader for per-splat displacement.

Quick Start

npm install
npm run dev

Opens at http://localhost:5173. Move your cursor over the scene to see the effect.

How It Works

1. A full-viewport canvas renders a Gaussian Splat scene (.spz file) via Spark.js
2. An invisible collider mesh (.glb) sits behind the splats for mouse raycasting
3. When the cursor moves, a ray is cast from the camera through the mouse position
4. Where it hits the collider, an Ethereal Volume (invisible sphere) follows
5. A custom vertex shader checks each splat's distance to the volume center
6. Splats inside the radius are displaced (moved) and color-shifted per frame
7. The radius scales automatically based on distance from camera (small close, larger far)

Project Structure

src/
  main.js        — App entry: renderer, camera, input, render loop, GUI controls
  ethereal.js    — EtherealVolume class, uniform bridge, GLSL vertex shader (657 lines)
  styles.css     — Full UI styling (loader, overlay, vignette, lil-gui theme)
public/assets/
  scene.spz      — Gaussian Splat model
  collider.glb   — Invisible raycasting mesh (must match splat geometry)
index.html       — Canvas + overlay markup
vite.config.js   — Vite build config

Configuration

All tunable parameters live in the CONFIG object at the top of src/main.js:

Camera

Key	Default	Description
fov	87	Field of view (degrees)
position	[0.04, 0.85, 0.98]	Camera XYZ position
target	[-0.53, 1.99, -0.53]	Look-at target

Volume Effect

Key	Default	Description
radius	1.1	Sphere radius when close to camera
radiusFar	2.5	Sphere radius when far from camera
feather	0.45	Edge softness (0 = hard, 0.99 = very soft)
pattern	4	Displacement pattern (see below)
intensity	0.5	Effect strength multiplier
amplitude	0.16	How far splats move
frequency	0.1	Pattern detail frequency
speed	3.6	Animation speed

Displacement Patterns

ID	Name	Description
0	Sine Drift	Gentle sinusoidal waves
1	Cubic Warp	Cubic distortion
2	Spiral Vortex	XY rotation spiral
3	Breathe	Radial pulse in/out
4	Turbulence	Per-splat random oscillation
5	Shatter	Outward explosion / disintegration
6	Spiral Flat	XZ horizontal spiral
7	Ripple	Concentric waves

Color

Key	Default	Description
colorShift	1.0	Color change strength (0-1)
colorMode	0	0=Tint, 1=Override, 2=Desaturate, 3=Rainbow, 4=Emissive
tint	[0.65, 0.75, 1.0]	Tint color (RGB, used in mode 0)
brightness	10.0	Emissive brightness (used in mode 4)
colorOverride	[1.0, 0.3, 0.1]	Override color (used in mode 1)
alphaFlicker	1.0	Opacity flicker amount (0-1)

Smoothing

Key	Default	Description
centerLerp	8.0	How fast the volume follows the mouse (higher = snappier)
intensityFade	4.0	Fade-out speed when cursor leaves
intensityRise	6.0	Fade-in speed when cursor enters

GUI Controls

A lil-gui panel appears in the top-right corner with real-time controls for all effect parameters. The camera uses standard Three.js OrbitControls (drag to rotate, scroll to zoom, right-click to pan).

Export Settings

Click Export Settings in the GUI to copy the current camera position, target, and all volume/color/renderer settings to your clipboard as JSON. Paste the result into CONFIG in main.js to persist your changes.

Swapping Assets

1. Replace public/assets/scene.spz with your Gaussian Splat file
2. Replace public/assets/collider.glb with a matching invisible collider mesh
   • The collider should roughly match the splat's geometry so raycasts hit the right surfaces
   • It's placed on layer 2 (invisible to camera) and used only for raycasting
3. Adjust CONFIG.camera position/target to frame your new scene
4. Use the GUI + OrbitControls to find the right angle, then Export Settings

Tech Stack

• Three.js v0.180 — WebGL renderer, camera, raycasting
• Spark.js v2.0-preview — Gaussian Splat rendering (SPZ format)
• lil-gui — Runtime parameter controls
• Vite v6 — Dev server and build

Build

npm run build      # Production build → dist/
npm run preview    # Preview production build locally