We design and build websites, and the motion and video graphics that make them feel alive. Everything on this page runs live in your browser, and every piece is something we can build into your site.
Move over them, press, change them. Where WebGPU isn’t available, each one shows a still.
The unicorn becomes a signed-distance shape, and light is traced across it every frame. Drops of mercury orbit and fuse with it wherever they touch. Bring your pointer in to add one of your own.
Where it fits: a hero, a launch, a product reveal
A reaction-diffusion simulation runs inside the letters. Change two numbers and the same word grows as a maze, loops or spots. Touch the letters to seed new growth.
Where it fits: logo stings, loaders, title cards
A fluid solver carries three inks from the studio palette through dark water. Two brushes drift on their own; your pointer is the third. Press to change colour.
Where it fits: backgrounds that respond, event pages, an interactive hero
The unicorn film runs through three print processes as it plays: a one-bit dither, a two-ink halftone and ASCII type. One source becomes a whole family of brand moments.
Where it fits: campaign variations, posters, a terminal mode
The tile carries the unicorn. Blender’s physics solver works out where every piece falls. We render it and play it backwards, so the mark puts itself together.
Both made in 3D for the studio’s own identities, and delivered as ordinary video that plays anywhere.
Small responses to a pointer, a hover or a scroll. Each one is an extra: everything still works with a keyboard, on a phone, or with motion switched off.
Cards light their border where the pointer is. For service lists and pricing tables.
Best with a mouseA lens shows the finished design over its wireframe. For before-and-after and process stories.
Best with a mouseLetters roll to a second copy, one after another. For a button that deserves a second look.
A picture follows the pointer down a list and leans with its speed. For portfolios and menus.
Best with a mouseThe colour follows the pointer in and out. For navigation grids and category menus.
Best with a mouseGood motion is never decoration. It shows people where to look, what changed, and what happens next.
A sentence lights as you read it. For one statement per page, never for body copy.
Scroll inside the frameA line traces a process as you scroll, with a marker riding it. For timelines and how-we-work pages.
Scroll inside the frameA list re-sorts with springs, and a second sort mid-flight just changes course. For filters and leaderboards.
The difference between a site that feels made and one that feels generated is restraint.
Every movement points somewhere: what changed, where to look, what happens next.
We keep native scrolling and the native cursor. Motion answers you and never takes over.
Phones and keyboards get the same content and the same controls, with or without the effect.
Reduced-motion settings and the switch in the footer show the finished frame. Nothing is hidden.
One moment people remember. Everything around it stays quiet.
say hi
A logo that assembles, a hero people play with. Tell us what you want people to feel.
info@caprastudios.co ↗
capra studios