
Show HN: Zircle UI – a circular zooming user interface library based on Vue.js - tinchox5
http://zircle.io/
======
tinchox5
Hi folks I'm presenting you Zircle UI, which is a circular zooming user
interface library based on Vue.js. It took me a lot of time to develop it
since I'm a diplomat not a programmer. So, I had to learn Javascript, how to
use Git and a lot of tools first. Also I experimented with many concepts
before achieving what I wanted. I always wanted to create a library to build
apps or sites that use zoomable navigation so I build one :). I hope you like
it! Thank you, Martin

~~~
mortenjorck
Not sure about circles as sole UI primitives, but this is a great start that
could grow to support rectilinear views as well.

The big thing I would take a look at is the animation: Ease-in with a hard
stop is not a pleasant motion for a zooming UI. I'd try an ease-in-out, and
see if you can synchronize the scaling and the positioning so the new circle
smoothly zooms into place rather than zooming offscreen and jumping into the
center at the end of the animation.

Keep up the good work!

~~~
tinchox5
Thank you for your suggestion! Surely the eases could be improved, maybe the
best is to allow to the developers to define their own ease and timing
according the use.

~~~
Seylerius
Certainly _allow_ it, but provide a sane default, too. If you don't, people
wiill be more likely to do something stupid than they would be otherwise.

~~~
tinchox5
Thank you for your suggestion about using ease-in-out. I'm playing with that
and it is more pleasant.

------
tpae
I like it, but it's a bit nausea inducing for me. I'm also the type of person
that feels nausea playing FPS games, shifting my focus quickly is not the
right feel for me.

~~~
tinchox5
Thank you for your feedback! I appreciate your comment. Maybe it is a good
idea to have the possibility to set the transition speed. Thank you!

------
rtcoms
This is really cool. Recently I was looking for zoomable ui for a complex
timeline I want to implement, this may be useful for that.

Here is another example of zoomable ui : [https://jonikorpi.com/zoomable-ui-
for-the-web](https://jonikorpi.com/zoomable-ui-for-the-web)

How much effort will be need to make it squarish instead of circular ?

~~~
tinchox5
Thank you! It is very easy to use boxes instead of circles! You only have to
change the css border of some classes. Pls feel free to contribute withan
issue in Github if you like! I ended with circle shapes just because a
personal interest.

------
JeanMarcS
I've made an user interface based on spheres turning like a carrousel (using
mouse wheel). When you clicked on a sphere they'll all go to the center and
then the next level of navigation/menu appears.

Pretty aww demo effects on the final client.

Strictly no interest on a daily basis use. The company I worked with finally
removed it.

So my point is that, despite the fact that I really like what you did (and I
do :-), reinventing navigation way is a pretty rash UX problem and must be
apply in very specific places.

Good work anyway and thanks for sharing

~~~
tinchox5
Thank you! Pls, JeanMarcs understand that I've never thought on reinvent the
navigation. I'm not feel comfortable in such position and It wasn't my goal.

On the contrary, Zircle allows me to learn Javascript and meet a very
interesting people. Maybe, but just maybe it is a small contribution to the
ZUI.

Also, I'm agree with you in to apply it to specific places. I think that
Zircle may be work for building UIs for IoT, health & fitness apps, mini-
dashboards, among other potencial implementations.

------
soapdog
Hey, congratulations on your work. Be aware that I am seeing lots of strange
visual artifacts when testing this on Firefox Dev Edition. Basically there are
scrollbars in all circles...

~~~
tinchox5
Thank you for your support! You are right I have problems with the scrollbars
in some ffox editions. I'll work on that!

------
skore
Demos seem to suffer from a lack of "overflow: hidden".

Affected classes: .z-content, .maindisc

~~~
tinchox5
Good to know that! I really tried to make the transition as much smooth as I
could. Your info will help me a lot to improve this aspect. Thank you

------
achikin
I feel dizzy :)

