Lab
Techniques we test before we use them.
Experiments with fictitious brands, so we can show the process without using anyone's brand without their permission. Each one comes with its technique, explained in a few lines.
01
Before and after
Solera is a fictitious coffee brand: the same brand with a template website and rebuilt by xstdio. Drag the x or use the arrow keys.
Technique · clip-path with a slanted line that follows the pointer
stdin · beforestdout · after02
Text that lights up
Scroll slowly: each word lights up as you go.
Technique · per-word opacity tied to scroll (scrub)
The text is in the HTML from the start. The animation only decides when you see it.
03
The opening x
The x in the logo is an SVG mask with the exact shape of the letter. As you scroll it grows on a logarithmic scale (so the pace feels the same at the start and at the end) until it reveals the work underneath.
04
Continuous zoom
A single photo that grows with the scroll, from the whole dish down to a grain of rice. Only transform is animated, so the phone never has to repaint the page.
05
Back to the same spot
Every history entry stores its scroll position. Open a service and go back: you land where you left off, not at the top.
Tell us about your project
Your business goes in.Your website comes out.
Tell us what you do and what website you have. We'll get back to you as soon as possible with a first idea.