Spline is a design platform to create and collaborate on interactive production-ready experiences in real-time.
Frosted chrome sits on translucent panels so the rendered scene always shows through.
Build interactive experiences that ship straight to the browser.
Model, light and animate product concepts in real time.
Add physics, events and states without leaving the canvas.
Chrome is built from the white-alpha ladder, never hex greys, and depth comes from backdrop-filter: blur(24px) rather than shadow — the page has no box-shadow recipes at all. No form fields were exposed on the landing page, so inputs and focus rings were not captured. The pair above stands the real frosted hint pill up in field position instead: rest is rgba(255,255,255,.08), and the focus state is derived from tokens that were captured — the panel alpha stepped to .08 + .03 plus a 1px #0062ff ring, with the placeholder text lifting from #fff6 to #ffffffe6.
There are no box-shadow recipes and no CSS gradients on this page — every sense of depth comes from stacking alpha and backdrop-filter. Live colour comes from 3 canvas elements running WebGL plus 12 video elements. Motion is uniform: color 0.2s, background-color 0.2s, transform 0.2s ease-out.