The full catalogue — 76 live demos

Where it looks good: hero headlines, campaign slogans.

Where it looks good: brand stories, production narratives, case studies.

Where it looks good: technology and innovation emphasis, section headings.

Where it looks good: manifesto texts, value propositions.

Try it by scrolling — the layers flow at different speeds. Where: series and collection headings.

Hover over it — it speeds up. Where: announcement bars, campaigns.

Grain generated live makes flat colours look as if they came off a printing press. Where: premium and retro brands.

What it is for: DECORATIVE data that makes a page feel like a live instrument or laboratory. Mammut did it with a climber's GPS and heart rate — the reader felt they were on the mountain. We do it with the temperature of the vat: the visitor feels they are in the workshop. Some of the numbers are real (the clock, your scrolling, your cursor), some are atmosphere. Where: pages built around production or the lab.

Where: statistics blocks, "us in numbers".

Hover over it — the letters tumble one by one. Where: menus, important links.

Hover over it. Where: product/collection grids — this should be the standard in any store.

Scroll — the lines flow in opposite directions, tilting with the speed of the scroll. Where: section breaks, manifestos.

Where: 404 pages, children's and hobby brands, "playground" sections.

Grab and drag them. Where: moodboard and colour chart play areas, launch pages.

Where: section openings, moments of emotional emphasis.

The same animation, two rhythms. The stepped one feels "hand drawn" — that was the secret of Site of the Year 2021.

Where: colour/series switching moments, theme transitions.

It presents technical content with the elegance of a bar menu. Where: product content and feature details.

Filling in a form is no longer a chore but building a sentence. Where: contact and application pages.

Hover over it — it speeds up. Where: corner badges, "seal of approval" areas.

Where: premium and immersive experiences. Used with restraint, it makes a site feel touchable.

One 3D model, endless colours. Think what that means in a catalogue of 234 colours. Where: product heroes.

The writing is bent on the graphics card as a texture. Where: manifesto sections, brand slogans.

The drops fuse like real liquid when they touch — all of it mathematics. Where: premium openings in the FarbeLab manner.

Scroll = film strip. The scene sticks to the screen and the camera travels as you move. Where: brand journey narratives.

An invisible wind map drags the particles; their trails turn into paint. Where: living backgrounds, 404 pages.

A glass sphere with coloured drops floating inside it that really refracts light. Where: premium product presentations (FarbeLab).

A 3D organism whose surface ripples continuously and changes shape when touched. Where: the central object of a hero, a mascot.

A real cloth simulation with 442 points: gravity, wind and touch. Where: label and flag scenes, launches.

Two images flow into each other through a noise map. Where: gallery hovers, collection transitions.

Not an imitation but physics: the fluid equations are solved on every frame (diffusion, pressure, vorticity). Where: hero openings — this is our signature.

The positions of the particles are stored in a texture and updated on the graphics card. E23 had 9,000 — here there are 262,144.

A light ray is traced for every pixel: reflection, refraction, soft shadow. Where: premium product scenes.

Bloom, lens chromatic shift, vignette, film grain. This layer lifts every scene in the catalogue one step up.

Two separate 3D scenes, one inside the other. E27 was an imitation of this; this is the real thing (stencil buffer).

One photograph + a depth map = the illusion of 3D. Where: studio photographs, product shots.

72 frames prepared in advance and bound to the scroll — like video, but with full control on your side.

It asks for microphone permission; no audio is recorded. Where: trade fair stand screens, event walls.

The writing turns into thousands of cubes and is flung about by physics, then pulls itself back together. Where: launch moments, 404.

Ten thousand copies of the same object drawn in one pass. Where: capacity and scale narratives, the feeling of a huge factory.

Not a surface but a volume: the ray gathers light step by step as it passes through the cloud. The most expensive, most cinematic technique.

Real marbling mathematics: every drop pushes the whole pattern beneath it outward in rings; the comb sweeps along a sine wave. Nobody else in the world has this — a signature effect out of our own culture.

The physics of the colours in a soap bubble (thin-film interference). The digital counterpart of Metakrlyic's pearlescent paint.

A newspaper and screen-print texture. Where: brands with a retro-print feel, poster pages.

A dry paint and ageing texture generated with Voronoi cells. Where: vintage series, restoration narratives.

A soft, low-contrast flow. Where: long text sections, contact pages, below the hero.

Two chemicals spreading and reacting (Gray-Scott). Zebra stripes, coral, a paint stain — all out of the same equation.

On screen blue + yellow = grey. On the palette blue + yellow = green. The difference comes from light being absorbed and scattered inside the pigment grain; the paint industry has computed this with the Kubelka-Munk equation since 1931. That equation is running in the right half. For a paint brand there is no truer signature effect than this.

The signature of watercolour, the dark edge ring is not drawn here — it forms by itself as the water evaporates and the pigment is dragged to the edge and stays there. The texture of the paper is taken into account too: pigment collects in the hollows (granulation).

A ray is cast from every pixel into the scene, and the rays bounce off surfaces trying to reach the light. The white sphere next to the red wall turns reddish by itself — this was not painted, it happened because the light really bounced off there. The browser version of the method used in film effects.

A brush mark is not a "stamp". Each of the 420 bristles behaves like its own spring: press and it spreads, turn and it lags behind, lift and it gathers itself. The mark comes from where the bristles touch the paper — which is why no two strokes are alike.

That trembling bright net a jar of water casts on the floor. Light refracts at the surface of the liquid and gathers at certain points; the brightness is born of that concentration. The slope of the surface is computed for every frame.

to the fluid simulation obstacle were defined: the letters. The paint hits them, flows around their edges and leaves vortices behind them. Your brand name is not the set dressing of the scene but a part of the physics.

Two paints in daylight exactly the same (ΔE = 0.0). Under the bulb they separate, and under fluorescent light the difference ΔE = 19— in other words, obvious. The industry has a name for it: metameric mismatch — the reason behind the complaint "it looked right in the shop, wrong at home". Here real CIE colour matching functions and real light source spectra are used; the reflectance curves of two pigments are solved so that are produced.

Here paint is not colour but volume. Every stroke leaves a height behind; the light refracts according to the slope of that surface and a ridge forms at the edge of the knife. The relief of an oil painting that you see when you look at it from the side.

Not on a grid, but 780 separate particles fluid solved on it. Every particle measures the density of its neighbours and pushes or pulls; surface tension is born of that. The drops really merge and break apart — they are not drawn.

The shared mathematics of frost on glass, a copper crystal and lightning. Randomly wandering particles freeze at the first point they touch the cluster — which is why the tips grow and the interior stays starved. Nobody draws the pattern; it emerges on its own.

The ray enters the glass and leaves through the back surface — and every colour at a different angle is refracted. That is where the rainbow fringe at the edges comes from; the same event as a prism splitting light. The shape of the bottle is defined as a single mathematical surface too, with no model file.

Give a colour, and which pigments in what ratio should be mixed. What you see on screen is exactly the work done by the colour matching instrument in a paint laboratory: Kubelka-Munk computes the colour of the mixture, and the ratios are corrected step by step until ΔE shrinks. The numbers flow live — the solution is found on the spot, not read from a ready table.

The paint industry's way of measuring opacity: a film of increasing thickness is drawn across a black-and-white card, and the ratio of the readings over the black and the white ground is taken. The thickness at which the contrast ratio passes 98% is the point of "full coverage". Here that equation (Kubelka-Munk over a ground) is solved pixel by pixel.

Every colour the human eye can see lies inside this horseshoe-shaped area. The triangle is the part your screen can actually show. Every colour outside the triangle is lying on your screen — some real pigments sit exactly there. The most honest way to tell a customer "the colour you see on screen is not the thing itself".

"It went lighter as it dried" is the most frequent complaint, and it is not a fault of the paint: while wet, water and medium fill the space between the pigment grains, light scatters less, and the colour dark and saturated appears. As the water leaves, air takes its place, scattering rises, and the colour lightens and turns matt. Here the scattering coefficient rises over time; the rest is the equation's work.

A weave is not a pattern but a an instruction: which warp thread passes over which weft. Real weave repeats are running here — plain, twill, satin, herringbone. Change the repeat and the fabric changes; change the yarn colours and the pattern changes. This is precisely the core of textile CAD software.

The shadows were not placed "to look nice": for the chosen latitude, day and hour the height and azimuth angle of the sun are computed and the light is placed accordingly. The very same calculation architecture practices make for shadow and daylight studies on a neighbouring plot.

Wherever the load falls, the force in every member solved instantly: red is tension, blue is compression, thickness is the magnitude of the force. Behind it a real stiffness matrix is assembled and the system of equations is solved — a direct application of a statics course. The transparent outline shows the deformation, exaggerated.

This is not an animation: a small artificial neural network is being trained right now, in your browser. The coloured region is the model's decision; backpropagation runs on every frame, the error drops, and the boundary bends until it learns to separate the two clusters. The shortest way for a software or technology brand to say "we really do this work".

Hundreds of objects scattered in empty space from one single point of view only line up and form the writing. The anamorphosis technique discovered in the Renaissance; each object was placed at a different depth along the ray passing through that single camera. Made for art, gallery and experiential space work.

60 stops, one vehicle, the shortest tour. There are far too many possibilities for a computer to try by brute force (for 60 stops, more than the number of atoms in the universe), which is why being improved: two crossing legs are found and reversed, and the tour keeps shortening. The fuel bill of every business that makes deliveries lives inside this calculation.

The wheel of the year: the harvest window of every product, outside the real day length curve along with it. Day length is computed from latitude — not a decorative wave but the calendar of farming itself. It answers the question "what is fresh right now?" at a glance.

In food science the The Q10 rule: a 10 °C rise multiplies the rate of spoilage. That equation is running here — change the temperature and watch the shelf life melt away. Underneath is the calculation of "what is lost if the cold chain breaks for one day". The most convincing way to explain storage conditions to a customer.

Olive oil, honey, grape molasses — each one flows differently and the customer wants to see it in a video. When the drop breaks off by Tate's law is computed: the drop breaks off the instant its weight overcomes surface tension. A viscous liquid leaves a thread behind, a watery one does not.

Used in olive oil, coffee, honey and wine sensory panel displayed. As the profiles of two products overlap, you see where they match and where they part. Showing instead of saying "ours is more fruity" — this is the only thing that explains the price difference.

The grain is not a texture file, the geometry of the log. Here the annual rings are defined in three dimensions and intersected with the plane the board was cut along: cut along the heart you get straight lines, cut on the tangent you get cathedral arches — the real difference every carpenter knows. Change the species and the ring spacing, the colour and the pore texture change with it.

The same wood, three different varnishes. The difference is not in the colour in the distribution of the reflection: a matt surface spreads light widely, a glossy one gathers it narrowly and sharply. The customer can only answer "matt or gloss" once they see them side by side.

The most frequently heard sentence in furniture e-commerce: "I couldn't tell how big it was". Showing the product In the same scene as a person 1.75 m tall and showing it in correct perspective puts an end to this problem. It shrinks as it moves away, and the measurements are written live.

In boxed furniture, most of the return and support burden comes from assembly. Showing how the parts fit together three-dimensional and step by step both directly affects confidence before the purchase and support after it. Exactly the same thing is used in the machinery and spare parts industry.