Makisu - CSS 3D dropdown concept

http://soulwire.github.com/Makisu/

by culshaw • 14 years ago

187 54 14 years ago

soulwire.github.com

btipling• 14 years ago

It looks cool, but I think the animation should be faster for the demo. Making users wait for animation is bad UX.

CaveTech• 14 years ago

But the animation is the demo...

mcgain• 14 years ago

Agreed, cool but ultimately shouldn't be used.

Foomandoonian• 14 years ago

Agreed, but a version that fell open almost instantly and swayed just for a moment would be very cool, and perhaps an improvement on the standard UI. I wonder what other subtle animations might be helpful?

recursive• 14 years ago

None, if it locks up your computer while animating at a buttery smooth ~2fps.

colmvp2• 14 years ago

I disagree.

Depends on the situation.

notatoad• 14 years ago

I agree. for instance: if you hate your users and want to make them suffer, that would be a good situation to use this.

mcormier• 14 years ago

Spoiler: It's not really amazing.

culshaw• 14 years ago

is too

BaconJuice• 14 years ago

Thanks for sharing.

sausagefeet• 14 years ago

I'm reminded of how much I hate DVD menus.

duiker101• 14 years ago

It LOOKS nice but it's just an eye-candy. It is not a good thing to implement into an actual website. I really do not see a purpose for it.

error54• 14 years ago

Works in Firefox 16.0.1 but is really slow. Doesn't really do a whole lot in Chrome 24.0.1297.0.

devilshaircut• 14 years ago

I think it's neat. It says "concept" and "experimental" (on the Github readme) so I don't think it's being sold as usable navigation. Always a pleasure to see technology demos like this for CSS.

EDIT: Grammar.

digisign• 14 years ago

Hmm, turns my computer into a vacuum cleaner.

untog• 14 years ago

For the detractors, notice that the title says "concept". It's like a concept car- you're not going to drive one out of the showroom, but themes, hints and touches will make their way down to the models people drive every day.

peterjmag2• 14 years ago

Agreed. I think HN tends to forget another key point: it's just fun! I love "impractical" little things like this, and it's great to see so many people playing around with browser technologies.

lowboy3• 14 years ago

The problem is that we'll get people using this in a primary role on their sites/apps because it's novel and people love using novel things. In order to have that "fun" look, you have to have a pretty long animation duration (currently ~3 seconds until they stop moving), which is doing users a disservice by making them wait until they can use the navigation let alone start reading the contents of the list.

It's a neat demo, I just fear what developers will do with it.

sprobertson• 14 years ago

Neat, reminds me of this more general purpose folding library: http://oridomi.com/

rajat• 14 years ago

While I agree that this effect probably shouldn't be used for a general webpage, it could be quite effective and appropriate for a game.

In any case, a neat concept. Works great on Safari.

mistercow2• 14 years ago

Wow, this comments thread is like a poster child for the unconstructive snark trend of HN.

Anyway, I think it's a neat concept. It runs correctly for me in FF (slow, but FF seems to be having problems taking advantage of my hardware in general for 3D stuff).

On Chrome and Midori it's fast, but the swinging effect gets clipped to the straight edges of the menus, and the text only shows up in the menu headings, rather than for the menu items themselves.

If I change the 'line-height' property for '.list dd' to 0, I can just make out the tops of the menu item ext, so I'm guessing that this is a positioning problem.

zobzu• 14 years ago

likewise, its painfully slow on ff even thus it renders correctly.

i wonder what the cause is however. 3D stuff may go more or less fast on FF, but that one is particularly super slow.

dmotz• 14 years ago

Unfortunately Firefox still lags behind WebKit for CSS 3D transforms in performance and rendering quality (antialiasing). There's a fix for the latter issue, but it involves an even greater performance hit in my experience.

I wrote another library that relies heavily on 3D transforms to do folding effects (http://oridomi.com) and it's frustrating seeing the same issues you see in Makisu in Firefox.

Mozilla's been iterating quickly, so hopefully it's just a matter of time.

mistercow2• 14 years ago

In case anyone still reads this, I determined that the problem is that Chrome (and I guess Midori too) won't do any 3D CSS stuff via software rendering. I checked "Override software rendering list" in chrome://flags and it rendered beautifully and smoothly.

mmanfrin• 14 years ago

Observations: this is really neat and HN commenters are jerks in this thread.

silveira2• 14 years ago

Really cool. Why so much of the CSS is inline?

tomelders2• 14 years ago

I think you're looking at the DOM, not the Source. Javascript adds CSS to the style attribute.

silveira2• 14 years ago

Yes, I was looking at the DOM. But why add styles as attributes? There is any performance improvement? Couldn't be done with just CSS?

jamesrcole• 14 years ago

Cool. After the menus fluttered down, they felt just a bit too static as rigid rectangles just sitting there.

It'd be cool if you could make them flutter a bit by moving the mouse around or by grabbing and dragging the edges (or some other means).

Think of them as like curtains.

Or perhaps it could be like there is a constant slight breeze, making them move like a curtain in a gentle breeze.

Anyway, just some thoughts.

hnriot• 14 years ago

FF 16/Linux is very slow, but works and looks great on the iPad with its hw accelerated CSS.

I agree with some others that the animation speed is a little slow to give that suspension of disbelief, and the menus are a little too static once the animation has finished, but I have useful suggestions there because they would stop being very useful if they moved around. Maybe the effect would work best in the form of a dropdown menu?

tomelders2• 14 years ago

I wish I'd thought of this.

JacksonGariety2• 14 years ago

This is also a great example of how far behind gecko is from webkit in the performance game. Look at it on Firefox as opposed to Safari or Chrome!

TazeTSchnitzel2• 14 years ago

Sadly, on Ubuntu, Chrome and my ATI card's drivers don't get along, so I'm forced to use Firefox when doing anything with 3D CSS Transformations or WebGL.

w1ntermute2• 14 years ago

Why is everyone naming software after random Japanese stuff? ("makisu", or 「巻き簾」 in Japanese, are mats used for food preparation, primarily sushi).

tijs• 14 years ago

And lo and behold; the menu folds up just like one of those mats. Japanese yes, random no.

vhf• 14 years ago

Why would it be "random Japanese stuff" ? It unfolds/unrolls kind of like a makisu. I think it's a good name, not an unrelated, random one.

DanBC• 14 years ago

Syllables and K's are strong sounds (Kodak). Most English words in English have been claimed; there's no domain name available and there likely at least 5 other businesses registered with that word in their name.

Romaji[1] seems like a fun place to plunder exciting sounding words from.

Anime and Manga became mainstream popular X years ago, where X is long enough for those early fans to become old enough to start naming products.

snogglethorpe2• 14 years ago

As another responder noted, it's not actually a random word in this case, but in general, "random japanese words" have been popular for naming in the software industry since the 1980s ("Wasabi Systems" etc).

As far as I can tell it's simply because Japan (and the Japanese language) is perceived as exotic, futuristic, and cool, which are exactly the image the tech industry wants.

My perception is that in the '80s, it was done even more randomly ("pick cool-sounding word off of sushi menu"), and people are a bit more sophisticated now and more likely to actually consider the meaning, but the root cause seems the same.

I suppose the image of "futuristic Japan" might be waning these days, but the mainstream popularity of Japanese anime/manga in other countries probably picks up the slack...

w1ntermute2• 14 years ago

> I suppose the image of "futuristic Japan" might waning a bit these days

It's funny, because anyone who's actually been to Japan can tell you that it's not the least bit futuristic anymore. And I'm not talking about traditional culture - I'm talking about an entire country stuck in the 70s/80s, technologically speaking. There are rare pockets of fresh air, mostly provided by the outside world (like smartphones), but the Japanese have by and large failed to understand or grasp the digital revolution.

Tell me something - is there a single internationally famous Japanese software company that you can name? Even if you want to talk about famous Japanese programmers, the only one I can think of is Matz, but he's Mormon and has 4 children - not exactly your average Japanese guy.

KaoruAoiShiho• 14 years ago

This looks fantastic, but it seems really hard to learn. Need some tools, or a CSS physics engine.

mcmire• 14 years ago

I like the gravity effect. Next: make it so I can drag around the menus.

chubbard• 14 years ago

Hey it's very stylistic which means it's of limited use in general, but I could see it being used in certain situations. I think what makes it impractical is how tall the menus are in the demo. If the menus were smaller then the fold out, roll up effects would happen much quicker (<1s) which would make it less annoying to watch. It takes almost 5 secs to unroll. You can adjust the speed of each menu item (default 0.8) so lower than to 0.4 and it might be less cumbersome to use. I think it's a neat effect.

loceng• 14 years ago

I love it so much! Great job.

arunoda• 14 years ago

Wow superb. This is very attractive for a website and would love to use.

But this might not be usable for a Web App, but there may be some situations.

pcwalton• 14 years ago

For those interested in the cause of the slowdown on Firefox, it's a bug in the calculation of overflow in 3D transforms that causes the browser to repaint the background every frame: https://bugzilla.mozilla.org/show_bug.cgi?id=804324

prisonguard• 14 years ago

you had me at unfolding.

Makisu - CSS 3D dropdown concept

Related Stories