The first thing to understand is that we are NOT looking for anything overelaborate or that would be exceptionally difficult to implement. If there are aspects of what we are suggesting that appear to you to be technically complex or problematic, please advise. We are less concerned about absolute perfection or smoothness as we are about having a clean Web site that operates effectively, works with a broad spectrum of browsers and devices, of varying compute power, and isn't difficult for the user to navigate.
The second thing is that the overall design - as you may have seen - is based on the 'Koch Curve', a fractal figure that at any scale has the same properties. What our thinking is, is that the site will be navigated for the most part by 'descending' through the curve, that is, effectively zooming in to the next level of detail. With that in mind, the animation effect we are trying to achieve is not one of constant-size figures moving around on a 2-D surface, but rather the impression of zooming into a static figure.
One of the main advantages of this approach for us is that it is a completely scalable design, that is to say, as the company grows, we can add pages simply by adding another hierarchical level and zooming in to the next level. At the same time, because zooming in, at any level beyond the top, produces exactly the same figure, only a few graphical templates are required, which can be endlessly replicated as one descends down.
For the moment, only the very top level and one level of hierarchical depth will exist, but later, this could be expanded, again, by replication of the existing templates. The top level is, obviously, different from all the other levels because it's where the recursion 'tops out'. This is the level that shows the 'star' surrounded by the first depth level below it as background 'leaves'. When entering the site at the homepage, these surrounding leaves should be grey; this is a graphical way of hinting at another level of expansion whilst indicating, through the fact that the star's points are in a saturated colour, that this is the level that's active.
Whether at the top level or at subsequent levels, the idea is that the 'point' pointing straight up represents the currently active area. At the homepage, initially, there isn't an active area as such, it's just a means to navigate down to areas which have content. Whatever graphical elements are in the most saturated colour, are clickable, and each point that can be clicked represents a sub-page. If the point clicked is already on top, then the figure just does a straightforward 'zoom' into the next level. But if an off-axis point is clicked, it has to be placed on top. So the idea is that at any level of zoom, the figure rotates first so that the selected point is on top, then zooms into the next level. During the zoom process, the next level of hierarchy - the next group of 'leaves' - appears for the now-zoomed area. Note that because these figures are self-similar at all scales, all zooms can be achieved by simple rotations and scalings of the same figure set, it's not going to be a separate graphic template for each sub-page.
Also, if you hover over a point at the 'active' level (the one that's in a saturated colour), the next level of subpoints (the next 'leaf') should appear over the point. This allows the user to hover and see what they could access by clicking a given point. All points have text labels, these go on the interior of the point. Meanwhile, once you're below the top level (home page), clicking on the exterior point (the largest one sitting at the bottom of the page, in a semi-saturated colour), lets you 'pop' a level, returning to the previous scale. This is nothing more than a reverse zoom, and since only the centre point is involved, there's never any rotation, the zoom-in effect is simply run 'backwards'.
Once you reach a page with content, the screen splits into 2 panes; the left-hand pane contains the figure as always, at the active zoom level, the right-hand pane contains the text content (with any graphics, etc. that may be on it) set on a slate grey background. All of these graphics should be vector format, not bitmaps, especially since we're scaling everything. A set of background SVGs should probably do it quite nicely.
I have been very detailed in describing how this is intended to work to try to avoid ambiguity, but once again I want to emphasise that the overall effect and idea we are looking for is really quite simple
