01
Search by feeling
Type weighty, brittle or buttery and get motion curves that genuinely read that way. Every entry stores its easing, its duration and the reason we settled on them.
Creative development studio
Hand-built web experiences that actually move.
Imaginary D.I.Y. designs and engineers animated interfaces for founders and product teams, then hands over the source, the tokens and the documentation so your own engineers can keep shipping without us.
- You own the source from the first commit
- WCAG 2.2 AA is the starting point, not the upgrade
- Every effect has a reduced-motion counterpart
- Handover documentation written for your team
Request a demo
Forty five minutes, screen shared, no deck. You show us the interface you are stuck on and we walk through how we would build it, which patterns from the library apply, and what it would realistically take.
What happens next
- 01We reply within two working days.
- 02We send three times we can meet.
- 03You leave the call with an approach, whether or not you hire us.
01 / Search
Find the interaction before you build it.
Every motion pattern we have shipped lives in one searchable library. Scroll-linked reveals, cursor-reactive canvases, page transitions that survive a router change. Search by feeling, by framework or by frame budget, then take the source straight into your own repository.
02
Frame budget filters
Narrow results to patterns that hold sixty frames a second on a four year old Android. Each one carries its measured cost on real low-end hardware, not a laboratory number.
03
Framework native output
Copy any pattern as React, Svelte or plain CSS. No wrapper library, no runtime you have to adopt, and nothing to unpick when you move on.
04
Reduced motion pairs
Every pattern ships with its calm counterpart. Change the preference in your browser and the same component switches to the version we would ship to someone who asked for less.
02 / Games
Prototypes we built to settle an argument.
Small, playable experiments where we work out the hard parts in public. Pointer physics, canvas throughput, state that survives a refresh. Each one began as a disagreement about whether something was actually possible in a browser.
Orbital
Easing studyA gravity toy for tuning easing by hand. Drag a body, watch the trail it leaves, then export the exact curve it traced into your stylesheet.
Talk through this buildRipple Field
ThroughputThousands of points reacting to a single pointer on the GPU. Built to find the precise moment a grid stops feeling responsive and starts feeling late.
Talk through this buildVector Trail
Loading statesA path-following study for progress and loading. The stroke is one SVG path animated with nothing but a dash offset, so it stays sharp at any size.
Talk through this buildDepth Stack
ParallaxParallax without the stutter. Six layers, one scroll listener and no layout thrash, which is what we point at whenever somebody asks for a three dimensional hero.
Talk through this build03 / Toolkit
Everything we hand over.
The same section, read two ways. Tools is what we build with. Developers is what your engineering team inherits on the last day of the engagement.
Tools
The kit we build with, packaged so your team can build with it too.
01
Motion tokens
Durations, easings and distances as design tokens rather than magic numbers. Change one value and every transition across the site moves with it.
02
Component kit
Accessible primitives with the motion already wired in. Dialogs that trap focus properly, menus that survive keyboard-only use, carousels that stop when you hover them.
03
Frame budget report
A local report that flags any interaction dropping below its budget, so a regression shows up in code review instead of on a customer handset.
04
Handover pack
A written record of every decision. Why this easing, why this breakpoint, why this component is deliberately not a modal.
For your designers
The tokens land in Figma and in code as the same set of values, so the file your designers open matches what your engineers build against.
How we work
Three things we will not negotiate on.
Not client quotes. These are our own operating principles, written down so you can hold us to them during the engagement.
Motion is a load-bearing part of the interface. If it does not help somebody understand what just happened, we delete it.
If the animation only works on the machine it was built on, it is not finished. We test on the cheapest phone in the studio first.
Every effect ships with a version for people who asked for less motion, and that version is designed rather than simply switched off.
Engagements
Ways to work with us.
We quote per scope rather than per seat, so there is no rate card below. This is the shape each engagement usually takes.
Sprint
Two weeksOne interaction, prototyped and shipped. Usually the hero, the onboarding flow, or whichever thing your team keeps arguing about.
- A working prototype in your repository
- Motion tokens for that surface
- A recorded walkthrough of the build
Build
Six to ten weeksA full marketing site or product surface, designed and engineered end to end, delivered with the complete handover pack.
- Design and front-end engineering
- Component kit and motion tokens
- Accessibility audit and fixes
- Two weeks of pairing after launch
Partner
OngoingA standing block of our week. You bring the roadmap, we bring the motion design and the front-end engineering behind it.
- Reserved capacity every sprint
- A direct line to the people building
- Quarterly performance review
Every engagement is quoted after a call, because no two of these have ever been the same.
Questions
The things founders ask us first.
If yours is not here, put it in the demo request and we will answer it on the call instead of in a proposal.
You get a working prototype in your own repository inside the first two weeks. Not a slide, not a screen recording, but a branch you can pull and run on your own machine.
Yes, from the first commit. We work inside your repository under your licence, and there is no agency framework you have to keep licensing from us afterwards.
It should not, and we measure that rather than promise it. Every interaction is checked on a low-end Android handset, and anything that cannot hold its frame budget gets rebuilt or cut before it ships.
Every animation has a reduced-motion counterpart that we design deliberately, instead of a blanket switch that flattens the interface into a static page. Set the preference in your operating system and this very site will show you its calm version.
Usually, yes. We start by reading what you already have and extending it. Replacing a design system is a far larger conversation, and we will tell you plainly if we think it is the wrong one to be having right now.
React and Svelte day to day, and plain HTML and CSS when that is genuinely the better answer. If your stack is something else, say so on the call and we will be honest about whether we are the right team for it.
Start here
Tell us what you cannot get working.
The scroll effect that stutters, the hero that dies on mobile, the page transition that breaks the router. Send us the specific thing, and we will tell you on the call whether it is worth building at all.
Request a demoGet updates
One short email a month: a new experiment, what broke while we built it, and how we fixed it. No sales sequence.
