See examples · seven full websites
Each one is a complete page built only with the UI Vault library: its CSS, its themes and parts, and the scroll API (uv-pin, data-uv-scrub, UV.scrub). No frameworks, no build step and no animation libraries. Open one and scroll slowly.
01 · Orbital launch
A rocket launch you drive with the scrollbar. The title drifts apart, a planet rises, the countdown runs T−10 to orbit with a live altitude readout, then six planets slide past sideways.
uv-pindata-uv-scrub="pin"UV.scrub()uv-scrub-trackdata-uv-fx="starfield"data-uv-count02 · A dive to 10,935 m
One long scroll from sunlit water to the bottom of the Mariana Trench. The sea darkens with page progress, a depth gauge keeps count, marine snow drifts and you light the midnight zone with a torch.
data-uv-scrub="page"UV.scrub()data-uv-speeddata-uv-fx="snow"data-uv-fx="spotlight"theme "deep-sea"03 · Cyberpunk audio
A product launch for imaginary headphones. Marquees lean into your scroll speed, a 3D exploded view pulls apart in five layers with callouts, specs decrypt, and four colourways swap the whole page theme.
data-uv-velocityuv-skewuv-pinUV.scrub()data-uv-fx="matrix"data-uv-scrambleparts "cyber"04 · Magazine long-read
An editorial feature on Scotland's last lighthouse keepers. The headline shrinks as the photograph opens, a pull quote lights up word by word, a chart follows the story and the lighthouse beam turns with the scroll.
uv-scrollbaruv-pindata-uv-scrub="center"UV.steps()UV.scrub()theme "editorial"05 · Slow coffee
A coffee roaster's homepage. Scroll to pull a shot and steam the milk into the cup, watch the farm-to-cup path draw itself, then flick through the menu as cards stack on top of each other.
uv-pin--p in calc()data-uv-scrub="center"position: sticky stackdata-uv="tilt"parts "clay"06 · Design-tool landing page
A light, pearly SaaS page. An app dashboard assembles itself from flying pieces, then puts on five UI Vault themes as you keep scrolling. Includes spotlight bento, marquee, a pricing switch and FAQ.
uv-pinUV.scrub()data-uv-themeuv-card--spotuv-marqueeUV.countUp()uv-accordion07 · Camo grind in 3D
A live 3D blade you scroll through the mastery ladder: Gold, Platinum, Damascus, then animated Obsidian. Each skin wipes in behind a glowing scan line while a challenge counter fills and the tiers tick off.
skins3d.jsdata-uv-3ddata-syncuv-pinUV.scrub()clip-path wipesHow they work
UI Vault turns the scroll position into a number from 0 to 1 and writes it to --p on the element. Use it in any CSS calc(). Only transform and opacity change, so the examples stay smooth on integrated graphics.
data-uv-scrub: 0 when the element enters, 1 when it leaves="center": reaches 1 at the middle of the screen="pin": for a tall .uv-pin scene that stays on screen="page": progress through the whole pagedata-uv-velocity: scroll speed as --vUV.scrub(el, p => …): the same value in JavaScript<!-- a 300vh scene; the stage stays pinned while --p goes 0 → 1 --> <section class="uv-pin" data-uv-scrub="pin" style="--len:300vh"> <div class="uv-pin__stage"> <h1 class="title">Lift off</h1> </div> </section> <style> .title { transform: translateY(calc(var(--p) * -80vh)) scale(calc(1 + var(--p))); } </style> <script> // numbers come from the same value UV.scrub(scene, p => alt.textContent = Math.round(p * 400) + " km", "pin"); </script>