Hacker News new | past | comments | ask | show | jobs | submit login
Makisu - CSS 3D dropdown concept (soulwire.github.com)
187 points by culshaw on Oct 22, 2012 | hide | past | favorite | 54 comments



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.


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.


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.


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.


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.


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.


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.


Let them ruin their UX with it and learn their lessons, I say. No point in stunting innovation at the risk of poor implementation.


If someone is building a site with no UX experience, is isn;t the fault of this incredible CSS developer that his site has bad UX. His site would probably have bad UX with or without this menu.


Fair enough. I would no more blame the manufacturers of spoons for America's obesity rates than I would this developer for incorrect application of this demo.

Although, this demo is the equivalent of a spoon manufacturer demonstrating their spoons by having a picture of someone eating a giant bucket of gravy. Maybe the manufacturer can't be blamed for obesity, but they could help out by providing a healthier demonstration of how their product should be used.


Any new technology or novel approach has the potential for abuse. That doesn't mean you shouldn't develop new technologies or novel approaches, though.


Agreed, and I should have stated that more clearly in my first comment.


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.


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.


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


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


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.


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


But the animation is the demo...


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?


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.


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


Agreed, cool but ultimately shouldn't be used.


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?


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


I disagree.

Depends on the situation.


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


Nope


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


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!


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.


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.


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


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


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


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


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


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?


Well that is CSS. And of course there's a performance improvement - unless you're applying a transformation to a hundred or so elements, it's usually much quicker to directly manipulate element.style than generate some CSS, put it in a style element, append that to the DOM, and wait for the browser to parse the CSS.


I love it so much! Great job.


I wish I'd thought of this.


Thanks for sharing.


you had me at unfolding.


Spoiler: It's not really amazing.


is too


Hmm, turns my computer into a vacuum cleaner.


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


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.


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


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.


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...


> 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.


Japan was never really very futuristic in terms of technology as far as I can tell, although an enthusiasm for futurism (as opposed to, e.g., the rather backward-looking U.S.) means that things are often more futuristic in appearance, and there's often less arbitrary resistance to change when it happens.

but this: > because anyone who's actually been to Japan can tell you that it's not the least bit futuristic anymore ... > the Japanese have by and large failed to understand or grasp the digital revolution.

... is quite silly.

Japanese society's adoption of tech advances, as far as I can tell, is neither particularly advanced, nor particularly backwards compared to other societies. The details differ, so from certain narrow perspectives it may appear as either. It's simply a different place, and simplistic comparisons ("more" or "less") don't capture much. I know when I visit my relatives in America (I've lived in Japan since the '90s), walking about town there's a definite perception that not a whole lot has changed since about 1950, even in the richest and most urbane areas, because American society is both rather conservative and kind of cheap; Japan is a whole different story, because they love "new".

In terms of industry, the stereotypical Japanese style of working, which favors continual incremental advances and attention to detail (sort of a "craftsman's" approach) over large but disruptive leaps and fixation on "the big picture", is fundamentally sort of conservative, and this is not well-suited to very fast-changing tech nor to software (where avoiding big changes inevitability leads to massive unmaintainable heaps of bit-rotting code...). This factor affect big companies (a mainstay of Japanese industry) more than small ones, because big companies also have the usual bureaucratic overhead, but it's a cultural artifact, and can be seen everywhere.

In addition, a big damper on Japanese software has been the relative isolation of Japanese software developers from the west, where much of the important research and development is happening. There's some interaction, but the Japanese are often a conspicuous absence in forums with otherwise international participation, despite a large domestic software industry. As far as I can tell, this stems in large part from a simple lack of confidence in English: Europeans are willing to participate even if their English is pretty shaky (it may be a chore, but it gets the job done), but Japanese are not, even when they have a fairly workable grasp of English. I know many Japanese whose English is perfectly acceptable when they're forced to use it, but they're absolutely loathe to do so unless forced.

The Japanese software developers I've talked to about such things are perfectly aware of these issues. But awareness, unfortunately, is not enough to change the system, at least quickly.

Things will work out in the end, I'm pretty sure, because the competence and work-ethic of Japanese software developers in general seems pretty good (many of those I know are top-notch); but before that comes the pain...


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: