Hacker News new | comments | show | ask | jobs | submit login
New brand site for Sony uses rendered JPG frames for 3D parallax scrolling (sony.com)
121 points by danhon 1346 days ago | hide | past | web | 100 comments | favorite

Very nice and breathtaking. Just a superb experience, this is the most awesome site I have every visited. Seriously.

Ok, it is big, it is huge. But c'mon, they are stretching creativity, nobody else would come up with something like this, i didnt even know it was possible at all. It not all TECH API's and BITS and BYTES. Its sometimes creativity what matters.

Abusing technology to create something cool often is the first step to making the technology better support something cool like that. So somtimes there is no proper way to do it with current API's. But there is a hack todo it. This is how HTML5 video was created. Because you could hack it in with Flash. But flash was not the best way todo it.

You guys are being way overly critical. I think the website is unique and cool. Reminds me of the those nice story boards on NYTimes.

Also, works ok on Chrome Macbook Air.

Care of Chrome's developer tools...

    Network tab: 1410 requests | 51.4 MB transferred | 2.0 min (load: 1.2 min, DOMContentLoaded: 4.29s)
    Console: 15 errors, 12 warnings

I was wondering how big it was, that completely blows away what I expected. That's really not usable for huge swaths of people.

How many people that can't handle 50MB of content are really in Sony's target market?

People who buy their electronics that happen to have data caps? They could at least load it all that image data on demand.

I don't think Sony is marketing the products depicted on that site to the folks worried about downloading 50MB.

Well, yeah, that's probably true I suppose.

The Good: Really changed my perception of Sony as a brand. They're a lot more experimental and ahead than I though. I feel like going out and buying a PS4 honestly. Great job on the marketing team. (I actually watched the videos and was... "moved", wireless lens, underwater ear buds, 3d viewer)

The Bad: Over complicated and choppy (anyone else?). It's basically a TV commercial that you have to keep scrolling to watch. I think there are better, simpler, less choppier ways that this brand message could have been conveyed.

Alternative: Slides/pages with full screen video? Take each scene and separate it into it's own full screen "slide" (not slide show but one slide after the other on the page) and each mouse scroll moves you down to the next slide.

Well, my feeling was the opposite. I was impressed with the execution, but not the content. My first thought when I read "it's about what we make you feel", was that someone at Sony saw this spot by Apple and decided they wanted to do something similar: http://www.apple.com/designed-by-apple/

They start by saying "we are engineers, but we are also artists", then they spend the rest of the ad creating this separation between engineers and artists, that seems to be common to most electronics companies, like this:

"You don’t wear a TV. You do wear the Personal 3D Viewer. So, we had to rethink our process. We started by designing from the inside out but ended up with a chunky, unwieldy viewer. So we reversed tack and designed the outside first. Only then did we arrange the internal workings and make something desirable to both watch—and wear."

The reality is that Sony has _always_ been focused on how things look and on making things smaller, there are many stories about how their product managers would carry around a wooden replica of the final product as they wanted it to be, challenging the engineers to make it smaller and make it all fit (open up an early MiniDisc player, and you'll see this process at work :).

So this just makes the whole ad look like it's created by a marketing department that doesn't know anything about Sonys history and its design philosophy.

Oh, the ad—and, it seems, the whole publicity message of Hirai-era Sony—is a painfully obvious Apple me-too. Given the brief to deliver that "we ♥ design, too!" message, I think the ad does a pretty good job with the materials available to it. One obvious difference between Sony and Apple is that the former is and has always been* "busy making everything". By pulling together a bunch of diverse, but fairly classy and desirable items from the Sony catalogue the ad helps to mitigate the "consumer-electronics flea market" impression.

The irony is that while Sony chases the Apple halo, Apple's released a couple of ads recently that are highly defensive underneath the sugar-coating. The "Making a difference. One app at a time." videos http://www.apple.com/ios/videos/ http://www.youtube.com/watch?v=MOUfzyAEQHk seem intended as a rebuttal to the "lol Angry Birds" dismissal of the iOS App Store, while "Misunderstood" http://www.youtube.com/watch?v=nhwhnEe7CjE is a response to the moral panic about smartphone zombies (and to a lesser extent the "iOS is for consuming, not producing" criticism).

* Well, since maybe the '70s at least.

Changed perception? That has to be insane. Just a mere funky web page and you go from not interested to wanting to buy? Good grief. I am stunned that a mere web page can do that for any one in actual reality. You seem far too easily bought. Here, have a shiney thing, there you go...... I had no idea people were so easily manipulated, and equally happy to say so in public.

I really don't get on with these scroll down animated sites.

As usual with these things, I don't see anything useful or informative on the landing part of the page, begin to scroll, see I'm expected to scroll for god knows how long incase there is anything useful, all I usually see is show off animation, I sigh, then close the page.

Why am I suddenly expected to constantly scroll these things? Is it just so some web developer can show off their latest, now tired, seen it all before now, trick?

I want to land on a page, see if its worth anything, then possibly click for more info. If I want to see an animation, video, or what ever, just show the darn thing in a normal video. But I want a choice there, not a silly site that auto starts it, often hurting my ears, or waking up the house, with full volume in the process. If the landing page gives me interest, I'll happily watch a short advert, animation, or whatever to get more info.

Why all this scrolling? There are much simpler ways to show all this, without me having to almost work to get to see it. Its not my message, its theirs. Why are they making it harder for me to see their message? I just left the page.

Just me?

Oh, BTW, I have some magic beans for sale on a pretty website. Any takers?



Im not in to lying, hiding and pretending. I dont like these sites. I have explained why. I stand by that. To normal non "Critical, stressed, agitated, easily annoyed and aggravated" people, that is called feedback.

Additionally, I dont insult people who have an opinion different to mine. If I did, I might suggest I might not be the one looking like an "asshole".

(BTW, These " " are quotes from the OP, not a weirdo scare thing that as a Brit I don't understand)

Chris, I don't agree, it's you that should be ashamed: Expletives say the most about those who use them, not much about anything else.

Couldn't disagree more. We're all adults here. Expletives add colour and succinctness. Being a dick is the problem.


Does he do that to the conversation partners, or does he use them just as the stylistic figure? If you know an example of the former, please cite. For the later, it still doesn't represent him particularly favorable, but it's his choice of how he wants to be seen.


You're the asshole. I didn't think you were an asshole for falling for marketing gimmickry (because that's what it's for), but combined with the PC nonsense trying to persuade someone to self-censor for having a different opinion than yours..

plus you blamed The Bad Things on coffee.

There is a small nugget of a point somewhere in this guy's assholery, IMO. It is a little strange that just some fancy (perhaps superfluously so) use of web technologies would convert you so easily?

i think saying you "feel like" going out and buying something is not the same as "i will absolutely buy it now without looking into reviews or anything else whereas before i saw the ad i would never have bought it." The first suggests that something moved you emotionally. The other might be more irrational.

Maybe if you make a pretty website he would "feel like" buying some magic beans and eventually decide not to.

personally, i love the scrolling. you get to stop and look at things. in the future, these are going to have much more interaction and exploration. That's the next logical step.

It makes me wonder why they don't just show a much higher quality and perhaps smaller file size video, and then overlay links etc over the top based on keyframes.

I guess it comes down to fashion and at the moment these animated scroll things are it...

We show lower res while scrolling, load in high-res when stopped. All text, overlays etc are HTML which track frame-by-frame.

Assume all the usual tensions between designers and developers :).

But what's killer feature this offers over a video?

I agree completely. It was pretty and also changed my perception of Sony as a brand, but it was tedious to scroll through and could have been done better.

Jeese this is a tough crowd. I thought it looked great and made the brand look great. Kudos to the designers.

I should clarify that I agree it looked great and was pretty neat. But like Chris said, it was choppy. It took a few too many tries to get it to scroll down from the top of the page. Didn't mean to be a cynic!

After all, it's not about what we make; it's about what we make you feel.

What their site, their opening punchline, the responsive design problems, and the slowness make me feel is that they're overly focussed on superficial form at the expense of deeper functionality.

> they're overly focussed on superficial form at the expense of deeper functionality

Then again, isn't that what almost all advertising is trying to do these days: draw your attention to the superficial form so you forget to criticise fundamental flaws with the design?

water resistant IP65 smartphone is a real enhancement, as in 100M deeper functionality. I wish the iphone had that instead of lighter/ taller/ thiner fonts.

Yeah I dont take calls underwater but I keep a bag of rice handy...

Agree: cellphones should be waterproof. One of the two iPhones that I destroyed in 2013 drowned in a waterproof case that was not closed properly, when I took an unexpected swim in the Atlantic. The silver lining was that I discovered Android, which I prefer.

Also, I visited the site using a Thinkpad T60, which dates from around 2006 and would not be considered high-end. Using Chrome on Ubuntu, it was pretty smooth - but I let it load before trying to scroll.

"cellphones should be waterproof."

It would be nice if they were. But all manufacturing involves design and price tradeoffs.

I have a Sony Rx100ii (great camera) and it would be nice if that were waterproof. But it's not and Sony (and others) offer a different camera that is waterproof (but doesn't have the features of the Rx100ii). Any feature adds to cost (or maybe makes something else not practical or not as good). Even a slight increase in cost can change the demand curve. Or performance (take a car with 4 wheel drive vs. 2 wheel drive). Etc.

By the way my own example of "should be" involves desktop or rack mounted servers having at least a nominal surge protection or UPS. Obviously that has been thought of and ruled out for various competitive reasons. (Weight, size, cost, demand).

Agree completely. In the case of cell phones, what I mean by "should" is that, since we carry them around everywhere, it would be extremely desirable for them to be at least very water resistant, and is downright inconvenient to be obligated to protect them from rain, etc. Worth paying a premium!

I dont think the "Dell marketing" feature/price tradeoff logic applies to the top of the market.

I just want the best tool, period. Since a price point for best device period is well established since the original iphone, and the build cost keeps going down, at one point it is this feature/that feature tradeoff for the next-gen iteration.

I care more for indestructibility for a wearable or quasi-wearable device than for a fingerprint reader that sort of works. And for a better camera that opens at 1.8 or even 1.4 than for 9 grams less in my pocket and 1mm less thickness.

But that's me. I guess the folks at Apple have a better algorithm. I'm really tempted by the xperia tho, just not ready to ditch iOS, although the banning of coinbase got me really close.

You should probably keep some proper desiccant on-hand instead... maybe some sillica gel. http://en.wikipedia.org/wiki/Desiccant

Something is wrong when you are selling image quality and your site features blurry artifacted images.

The animations are nice, but they are basically doing frame by frame 704 × 396 movie that look terrible when pushed to 1920 wide.

Just use a proper video format, which is much more efficient.

I'm curious why the images have artefacts (or pre-loading fuzz)? A year or so ago Andreas Gysin did something very similar http://ertdfgcvb.ch/p2/sm/play/protog3 and for some reason does not have the artefact issue. (code for that here http://ertdfgcvb.com/sequencer/)

Try running them on MBPr then ;) And don't forget that they get blurred even more by webkit while scrolling - I guess -webkit-translate is the culprit responsible for that.

Just realized how lazy I've become, thank you.

It's not just about being lazy, this is really helpful for mobile users.

What's the point of these scrolling sites? It's really hard to control the scrolling speed and stop just in the right place. Just let me press a button and then proceed to the next "slide" if you want fancy transitions.

I agree, and on this site, over on the far right side, are some little rectangles you can click to jump between the sections (albeit still with the animations, but sped up).

There are page down buttons that appear at the bottom of the page.

So I follow the URL, and it takes 30 seconds to show me three lines of text on the screen, and I can't skip forward or anything.

How is this better than Flash landing pages, exactly?

Because now you can make people's iPads slow, too :)

It does not require proprietary nonfree software.

So crappy performance and bad customer experience is okay as long as the software involved was not proprietary and free?

I don't understand what you're statement means in terms of what it is replying to.

Very choppy and hard to go back.

On the plus side, I didn't know about these "Smartphone Attachable Lens-Style Camera", is there someone here able to tell me if it is worth it? (I have a Galaxy Note and no other camera).

Like many other verticals there are many technological innovations happening in photography too. This "smartphone attachable lens-style camera" is one of these recent innovations. I can't comment on quality of the lens itself but they must be far better than that of a standard camera installed on mobile phones. These lenses can be used both attached/detached to the mobile phone. They use NFC (if your phone is into that sort of thing) or create their very own Wi-Fi signal to connect with the phone.

I first read about such lenses and other similar products on http://photojojo.com/store/ . They have such products for both android and iphone.

Now, is it worth it? Depends on your requirements. If you don't want to get into professional photography but still want to improve the quality of your photographs you can use one of these. However, remember that these don't replace DSLRs.

1. Mobile Camera : average quality/almost zero creative control/very good mobility

2. Mobile Camera + Lens accessory : better quality/almost no creative control/good mobility

3. Point & Shoot Camera : decent quality/little creative control/good mobility

4. Hybrid/Zoom Camera : decent quality/very high optical zoom/decent creative control/poor mobility

5. Mirrorlesss/Interchangeable Lens Camera : Good quality/Good Creative Control/average mobility

6. DSLRs : Good quality/Good Creative Control/Poor Mobility

I personally prefer to keep [1] in my pocket & [5] in my bag(along with lenses). I also have an old Zoom Camera that usually sits in my home. I occasionally use it together with a teleconverter lens to take photographs of sun, moon & objects/people that are far far away.

According to reviews, the lens cameras don't work well in large crowds (e.g. Sporting events, your kids' school play). Physically docking to your phone would be more sensible (there's a kickstarter project along those lines). But frankly the gap between cellphone cameras and the rest is closing to the point where 1-3 is a wash, and 4 is pretty crap anyway. So it's 1-4, 5/6. If Sony would produce some decent lens options for reasonable prices...

Thanks for these details. I'm interested because I usually don't carry a bag, and care about mobility and availability. I also like the idea of taking picture without disturbing too much the (human) environment, e.g. without shooting too explicitely. However this lens seem to be too big to fit in a pocket.

DPReview had a preview in September: http://www.dpreview.com/previews/sony-cybershot-dsc-qx100

Does anyone else have an i7 4702Q with a HD4600 running Chrome (Windows 8.1)? Is smooth scrolling, actually smooth for you? It doesn't for me, and even Internet Explorer (which surprisingly runs most pages 60fps smooth) runs the page really badly.

edit: firefox runs the page smoothly, but on other pages, still can't top IE's smoothness. What a weird world it is now.

I don't see any parallax here. Seems like normal 3D triggered by scrolling.

Could you define parallax? Because I see it, as I know it, in several places throughout the page.

"background images move by the camera slower than foreground images" http://en.wikipedia.org/wiki/Parallax_scrolling

And you don't see that on this page?

Not really, no.

Really cool website. I've noticed that really cool brand websites for large Fortune 500 tech. companies tend to be done by a high end agency rather then the companies' own teams.

Interesting experiment, but even chugs along on my latest generation rMBP in Chrome. Meh

Does it still chop after it's had an extra 30 seconds or so to load? It lets you start scrolling before it's fully loaded, but unfortunately the backfill-loading causes the scrolling to go choppy.

The site is not "retina-ready" and it looks pretty bad on rMBP. There is also some progressive rendering which looks poor. I think with a little more work it can be a great website though.

Weird. It's fast on my Thinkpad X201s from aeons ago (running chromium).

I have a 3y old 1.3GHz cpu with integrated graphics only on Gentoo, but it's so smooth, I can't believe it's not a video! How do they make it so smooth?

When I click the last page button on the right side, it runs smoothly through all animations, same when happens when I scroll around. Can't wait to see someone make a blog post on: "This is how Sony exploited HTML5 to run Smooth Parallax Effects on their Page".

I ran it in Firefox with about ~100 tabs open having over a dozen addons, an IDE opened and npm install running in the background.

They are images being pushed into a canvas element and then they are stepping through them as you fake scroll. Fake scroll, meaning they take over scrolling duties from the browser. Other elements such as the text are layered on top of the canvas and then are parallaxed into/out of view as you scroll.

It's quite a simple and elegant way to do it, other than the incredibly large number of images required to pull it off. You are essentially watching a video frame-by-frame.

As for the smoothness of it, your mileage may vary based on various things to do with your personal setup.

For me it is not smooth on Firefox. It's choppy but still presentable. The experience is much better in Chrome on my Mac.

Slack user here.

tips fedora

Yeah, fedora runs it, too.

No problems on Windows with i7 and GT 430.

>" A journalist once called us a guinea pig because the results of our experiments were copied by others.It was meant as an insult, but we took it as a compliment. Combining artistry and engineering IS an experiment—but when artists work with engineers, every day is a chance to be moved." Found this at bottom of page

... I really want to like Sony. They seem to have the best chance of bringing Apple-style quality to more open software-platforms.

But seriously, this is crap (at least on Firefox). It's slow and choppy and it has a (however brief) unskippable intro. Pretty, but broken.

At some point, wouldn't you just rather play a movie than have me scroll all the time?

All that, and they couldn't get the damn Twitter icon right.

The text and images also cut off on the left and right if your browser window is "only" 1200px wide.

Any reason why they didn’t just use a paused video and step through it frame by frame on scroll? Seems like it’d be a much more efficient experience for the user.

Reverse scrolling a video is really slow, unless you set the key frames close together (in which case, you don't really gain much file size wise).

Ah, I figured there was a reason I was missing. Thanks!

My guess is it's to get attention by sparking discussions like this.

It is interesting to note that even if I ever manage to create a splash page as awesome as this, HN will still (partly) respond: Meh - choppy.

I think it has more to do with the choices in technology than art direction. It is cool, but if it sucks performance-wise for enough people then it sucks no matter how cool it looks.

I haven't been a big fan of these types of pages, especially the type that take over the scrolling functionality. I was recently tasked with building one. The creatives love it, I dislike these pages even more now.

One implied claim that stuck out was that their recent full-frame digital camera produces images comparable with "medium format film". This is extremely unlikely, and casts all their claims in doubt. Also, I couldn't find anything about their creative research into incorporating rootkits and other exploits into their products: I know what that makes me feel.

Apparently the RX1R PREMIUM COMPACT CAMERA (third from the end) includes a slice of cheese in the middle of the sensor. Easter cheese? :-)

I got a pretty good desktop computer and it's choppy. These things really have to be silky smooth for me or I leave pretty quickly.

Was it done in-house at Sony USA or who produced it, does anyone know?

Quite funny how the use meta keywords like its 2002 … "download movies online, online movies, internet movies, video on demand, movies on demand, tv shows, watch movies online, watch online movies, support, technical, service, repair, fix, USA"

I was distracted by blurriness and compression artifacts. Homework for Sony web designers: try the site on a rotated 1920 x 1200 screen. Then you'll also notice that it's cut off left and right. Apple has the same problem on their Mac Pro site, which uses a very similar mechanic.

Curious how it was build? Here is the Be Moved site deconstruction - http://ihatetomatoes.net/sonys-be-moved-website-deconstructe...

Nicely done Sony.

there's a Venus de Milo inside the ps4 controller! can't wait to open mine!

I really like it! Imagine how easy it must be to create something like that! Simply export a video into jpegs, add some JS and BAM! A nice scrolling effect. I like it!

Design should not force the user to relinquish tactile control. I spent more time aware of the broken scrolling physics choppy animations than reading anything.


Feels better in my opinion. The jpg method seems too jerky.

"Scroll Down to Explore"

So, where's the scroll bar?

And I generally use the space bar to scroll. That's not working here :(

Scroll wheel on my mouse isn't working either.

Nor are arrow keys.

Someone tried a little too hard to optimize for Safari and OSX and forgot that's like 8% of the market.

Chrome on Win 8.1. Site is nearly un-usable (I can click in their custom scrollbar to make it move).

That all works for me but everyone's mileage may vary because of the way it appears to have been built. It doesn't use the browsing scrolling and likely attempts to take over all the normal scrolling duties to do what it wants. So if you browser of choice is not on the list for whatever reason, then their will be problems.

You can click the "scroll down to explore" arrow.

This trend of sites that break gesture forward/back, space bar scroll, and other standard browser features needs to stop.

Ah, that explains why it works without crashing Chrome (as HTML5 WebGL monkeying does).

Ow my CPU load

How does this work exactly?

Series of images are loaded into a canvas element that steps through them as you scroll. The text is layered on top and parallax-ified as needed.


Applications are open for YC Winter 2018

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact