Skip to content

~/veltein/studio/lab

The lab, where nothing sits still.

Every effect used on VELTEIN sites, live, with its component name: motion, 3D, texture, comparison. All of it respects reduced motion and stays readable without JavaScript.

The mark, in three dimensions

A three.js scene loaded only when it scrolls into view: physical materials, studio lighting from a room environment, orbit controls without zoom, and buttons for keyboard users. The flat SVG stays as the poster and the fallback.

mark-scene.ts · three@0.186 · WebGLRenderer

Drag to orbit, or use the buttons. Zoom is off so the page keeps scrolling.

Text in motion

Typing

<Typewriter />

Brief., Direction., Build., Browser QA., Launch.

Status shimmer

<TextShimmer />

Rendering at 390 px…

Word entrance

<TextEffect preset="slide" />

No templates.

Next.jsAstroReactTypeScriptGoPostgreSQLCloudflarethree.jsUX-STINGPython

Surfaces that respond

Tilt toward the pointer

<Tilt />
TiltFollows the pointer, flat under reduced motion.

Spotlight on hover

<Spotlight />
SpotlightA soft light that tracks the pointer inside the card.

Staggered reveal

<Reveal stagger />
RevealThese three cards came in one after another as you scrolled.

Template versus direction

Drag the handle, or focus it and use the arrow keys.

Texture without images

Mesh gradient

<MeshGradient animate />

Dot pattern

<DotPattern fade />

Grid pattern

<GridPattern fade />