How one monogram became a construction drawing, an engineered system, a hardened surface and a living object, without turning the website into a performance problem.
A logo usually turns up as a small pile of finished files. The horizontal version, the stacked version, the monochrome one, and the version built to survive being dropped over a photograph nobody anticipated when the guidelines were signed off. All of them necessary, and all of them static.
That was fine while a logo mainly sat on paper, packaging, signage and the corner of an advert. On a website it makes less sense, because there a brand mark can move, respond, change material and become part of the story unfolding around it.
So the question stops being how a logo looks. It becomes what the logo can do.
Table of Contents
Designing For Time, Not Just Space
The monogram on erryn.io was built as a stable underlying form rather than a permanently finished object. As a visitor moves down the homepage, the same mark shifts state to stand for four different parts of the business.
It opens as a technical construction drawing for the build section. Internal structures then assemble inside it as the page moves into systems and infrastructure. A metallic surface travels across the shape for security and trust. Then procedural plant growth spreads over the geometry for search, visibility and the slow compounding of authority.
The outline stays recognisable throughout. Only the meaning changes, and that difference is the whole point.
Movement for its own sake is just decoration. It might look impressive for a few seconds, but it rarely tells the visitor anything a still image could not. A shifting identity earns its keep only when each transition has a reason to be there.
State one: construction
The first section covers web design, user experience and 3D visualisation. For that stretch of the page the monogram shows up as a technical sketch: outlines, measurement marks, construction axes, the visual grammar of an object still being worked out. Deliberately unfinished.
That felt righter than opening on a glossy final render, because good design rarely starts with decoration. It starts with structure, constraints, hierarchy, and a clear sense of what the thing has to achieve. The construction state is that process, made visible.
It also gives the animation somewhere to travel. A mark that begins fully resolved has nowhere left to go. Start with the raw geometry instead and every later material state reads as a progression rather than a bag of unrelated effects.
State Two: The Machinery Beneath The Surface
The second area covers performance, infrastructure and the systems that carry a business quietly in the background. Here internal structures start forming inside the monogram, and the surface matters less than what goes on beneath it: networks, channels, connections, engineered components that read as a working machine rather than a decorative shell.
Which is true to the nature of infrastructure work, where the expensive faults tend to be the invisible ones. A website can look perfectly respectable while being slow, fragile, badly integrated, or quietly dependent on something nobody left standing fully understands. The mark had to hint that there was more inside it than its outline let on.
This state was assembled in layers rather than one flat material swap. Different elements had to surface at different points in the scroll while still behaving as a single continuous transformation. That layering mattered a great deal later, once the work left Blender for the browser.
State Three: A Surface Built To Hold
For the security section a harder metallic treatment moves across the logo. The point was to avoid the usual shorthand of padlocks, shields and glowing blue circuitry, since cyber security already drowns in the stuff. So the material itself changes instead.
The mark starts to feel sealed, reinforced, less permeable. A chrome-like ripple runs over the geometry and swaps the exposed internal state for a harder outer skin. Even so, it never becomes a different object; the construction underneath stays visible through the change.
That was deliberate. Security is not a separate layer painted over a finished system. It rests on the system beneath being understood, configured and maintained properly, so the transition had to feel like an answer to the earlier state rather than a reset.
State Four: Procedural Growth
The last treatment stands for search, visibility, and the way authority compounds over time. Vegetation grows across the mark here, driven by a larger Geometry Nodes setup and a bit of simulated wind. The growth is generated over the form rather than revealed as a flat texture, so it reacts to the geometry, spreads unevenly and drifts a little, giving the logo an organic state without surrendering its outline.
The metaphor is blunt, and it holds. Search visibility gets sold as though it were a switch waiting to be flicked. It isn’t. Durable visibility grows, through accumulated authority, sound technical structure, content worth reading, and repeated proof that a business is worth recommending. That is slower, messier and far more alive than the usual upward arrow, and the logo’s final state had to carry it.
The Difficult Part Was Not Rendering It
The Blender work was only half the job. A film plays start to finish on its own terms; a website will not sit still for you. The transition had to track the visitor’s scroll position, run smoothly in both directions, and stay locked to the surrounding page, all while working across browsers, screen sizes and devices without dragging performance down with it.
That knocked out the easy options. A normal compressed video is built to play in sequence, with most frames leaning on data held in earlier ones. Efficient for straight playback, awkward the moment the browser has to leap between points in the timeline. Scroll-controlled video is being asked to seek, constantly, and when a visitor jumps from one section to the next the browser may need an exact frame at once. Make it decode a chain of previous frames first and the whole thing turns sticky.
The fix was to encode the videos with one-to-one GOP frames, so any frame can be reached on its own instead of through a run of predictive frames. Seeking got sharper. The catch is that independent frames are heavier, which turned the job into a balancing act: responsiveness against file size against codec support against image quality, plus the awkward truth that no single solution behaves the same everywhere.
One Animation, Several Delivery Problems
VP9 handled the cases where it gave the best mix of quality, transparency and compression. Apple devices got H.265 as the fallback. One tidy sentence, but in practice it meant generating, testing and serving several versions of the same sequence, then making sure the right asset actually reached the right device.
Several video layers came into it too. Parts of the treatment had to be combined without collapsing everything into one bloated universal file. Layering bought more control at the price of more assets, more loading decisions, more rendering conditions to keep track of.
Desktop and mobile could not be the same canvas at two widths, either. A composition that sings on a wide display can bury the important part of the animation under the copy on a phone. A file that’s fine over fibre can be punishing on mobile data. Autoplay rules differ, hardware decoding differs, browser support differs. Every device had to be sold the illusion of one continuous identity, even while the files and delivery logic behind it quietly diverged.
Performance Was Part Of The Design
The lazy route was available: load everything up front and let the browser eat the cost. It would also have made a liar of the whole site. This animation lives on the homepage of a consultancy that sells web performance and technical architecture, so a gorgeous transition that wrecks responsiveness would be a very public own goal.
So the files were compressed, segmented and served carefully enough that the site holds perfect PageSpeed scores on both mobile and desktop. That reached past the animation itself. Assets load at the right moment rather than getting dumped on the page to fight critical content for bandwidth. The first visible state paints without waiting for the full sequence, and later stages are readied as the visitor closes in on them.
The browser needed proper fallbacks, as well. Not every device should be asked to render a complex scroll-linked sequence the same way. Reduced-motion preferences are honoured, and a plain static state still holds the surrounding content up when animation isn’t the right call. Performance here was never the final polish. It was one of the constraints the thing was designed around from the start.
A Dynamic Identity Still Needs Discipline
A shape-shifting logo can quickly turn into an excuse to parade every effect the software owns, which rarely improves anything. The movement has to stay subordinate to the page. A visitor should grasp the service before they admire the transition, and the animation is not allowed to muddy the copy, stall interaction, or beg for attention every few pixels of scroll.
The mark also needs a stable core. Push each state so far from the last that recognition breaks, and you no longer have a flexible identity. You have four unrelated illustrations squatting in the same slot. On erryn.io the silhouette holds constant while materials, internal structures and surface behaviour change around it, the geometry anchoring the whole sequence. That constancy is exactly what lets the logo carry several meanings without letting go of the identity underneath them.
The Logo Becomes Part Of The Interface
You can watch the full transition on the erryn.io homepage, where each state sits beside the section it was made for. It isn’t a showreel bolted on above the real message. It splits the site into conceptual zones, hands each one its own visual language, and lets the identity develop as you scroll.
That is the genuinely interesting bit about motion branding. A logo doesn’t have to stay a finished object sitting politely in the corner. Given a screen, it can respond to context: showing how a thing is built, what runs underneath it, how it defends itself, what it might grow into. It can have a beginning, a middle and an end, and still print perfectly well in black on white.
It just doesn’t have to sit still.
Join The Logo Community
We hope this article has been helpful. If you would like more personal tips, advice, insights, and access to our community threads and other goodies, join us in our community.
You can comment directly on posts, access our community threads, have a discussion and ask questions with our founder Andrew.
Tired of clients questioning your logo design prices? Our new eBook gives you the exact scripts, objection handlers, and confidence to communicate your value. No more awkward pricing conversations—just more high-paying projects.
Get it Now!
