Webshop landing page with live threads
Yarn you don't just look at: you see it flow.
Move the mouse: you stir a whirl among the threads. Click: a shockwave runs through. The brand and the figures are illustrative samples.
Custom animation / motion design
Custom animation, motion, and interactive elements that set the site apart from a template look.
from HUF 60,000
The landing page of a yarn shop. Thousands of fine threads flow behind it, like yarn drawn from a skein, and the cursor stirs a whirl among them. Made for a webshop where the material is the product.
- Canvas 2D
- Simplex noise
- Webshop
How it works
The threads drift on a slowly changing noise field: the field is a simple grid and the threads are lines drawn on a canvas, so no GPU is needed and it runs smoothly on a modest machine. The colour is the brand's colour, so the motion isn't a foreign element on the page but part of its mood.
The content and the buttons are plain HTML, so the product list and search engines see it exactly as if the background weren't there. A medium one: it starts by itself when it is in view, and stops when you scroll past.
Want something like this on your own site?
Motion and WebGL are part of what I do. We'll work out what fits your site while keeping it fast.
Get an estimate