11 ms·

I've seen this a bunch of places, until it's done real time with arbitrary images + content, I don't really see the value. Would be cool if we could do it for

I've seen this a bunch of places, until it's done real time with arbitrary images + content, I don't really see the value. Would be cool if we could do it for translucent toolbar etc.

russellsprouts 13y ago
It's difficult, because you cannot see the pixels in an HTML element's rendering with JavaScript. If you could copy a link to a canvas, then you could see if it has been previously visited, for example. So, canvases would not work. I may be possible with SVG filters or WebGL, but that also has security implications. It's possible to read cross-origin content using timing attacks and filters. http://www.contextis.com/files/Browser_Timing_Attacks.pdf http://www.contextis.com/files/Browser_Timing_Attacks.pdf
myhf 13y ago
It is done client-side in real time with arbitrary content using an SVG GaussianBlur filter. Decode the data: urls in the SVG to see the full source.
- joegaudet 13y ago
  right but it doesn't work with rendered text from arbitrary html content, only by applying filters to an image.
peterhunt 13y ago
How about this? http://petehunt.github.io/react-iphone-photos/#glass http://petehunt.github.io/react-iphone-photos/#glass
- joegaudet 13y ago
  Now this is interesting, how does it work ?
  - jakobe 13y ago
    They use a webkit CSS extension: "-webkit-filter:blur(5px)"
    - comex 13y ago
      There's a Firefox bug to implement it: https://bugzilla.mozilla.org/show_bug.cgi?id=660196 https://bugzilla.mozilla.org/show_bug.cgi?id=660196
    - joegaudet 13y ago
      That blurs the content inside of a div, how is the content tied in, is it scroll synched?
      - peterhunt 13y ago
        I do synthetic scrolling (translate3d() + touch event interpretation and inertial math). Then duplicate the DOM for the top and bottom bars, adjust the positioning to make them look fluid and apply the CSS blur filter. It's easy with React :)
- zuppy 13y ago
  Here's a screenshot for a quick view: https://www.dropbox.com/s/35060r2obuwse4f/Photo%2014.11.2013%2C%2011%2011%2011.png https://www.dropbox.com/s/35060r2obuwse4f/Photo%2014.11.2013... It looks better when you see it moving.
- cheeaun 13y ago
  Any reason why it's only available for iPhone 5?
  - peterhunt 13y ago
    Three reasons. 1. Blur filter is only available on WebKit 2. I know for sure how much texture memory is on an iPhone 5 3. The touch event latency on android is too damn high.
- Zecc 13y ago
  >> <h1>If you see this, something is broken.</h1> The funny thing being that I only saw that because I browsed the source, because the page was so broken for me that I only saw a black screen. In any case, I see Message(null, " This demo is only available for iPhone 5 and iOS 7. Sorry! " ) So I'm out of here.
  - peterhunt 13y ago
    There was some small text centered on the screen specifying the demo is only available on iPhone 5 (see comment above for why)
nraynaud 13y ago
I see a big value in UI design, where you want to make sure that the general layout of your screen is as intended. I'm still thinking in actually making this thing as a physical object with a handle you put in front of the screen.

I've seen this a bunch of places, until it's done real time with arbitrary images + content, I don't really see the value. Would be cool if we could do it for translucent toolbar etc.

russellsprouts 13y ago

It's difficult, because you cannot see the pixels in an HTML element's rendering with JavaScript. If you could copy a link to a canvas, then you could see if it has been previously visited, for example. So, canvases would not work. I may be possible with SVG filters or WebGL, but that also has security implications. It's possible to read cross-origin content using timing attacks and filters. http://www.contextis.com/files/Browser_Timing_Attacks.pdf http://www.contextis.com/files/Browser_Timing_Attacks.pdf

myhf 13y ago

It is done client-side in real time with arbitrary content using an SVG GaussianBlur filter. Decode the data: urls in the SVG to see the full source.

joegaudet 13y ago
right but it doesn't work with rendered text from arbitrary html content, only by applying filters to an image.

peterhunt 13y ago

How about this? http://petehunt.github.io/react-iphone-photos/#glass http://petehunt.github.io/react-iphone-photos/#glass

joegaudet 13y ago
Now this is interesting, how does it work ?
- jakobe 13y ago
  They use a webkit CSS extension: "-webkit-filter:blur(5px)"
  - comex 13y ago
    There's a Firefox bug to implement it: https://bugzilla.mozilla.org/show_bug.cgi?id=660196 https://bugzilla.mozilla.org/show_bug.cgi?id=660196
  - joegaudet 13y ago
    That blurs the content inside of a div, how is the content tied in, is it scroll synched?
    - peterhunt 13y ago
      I do synthetic scrolling (translate3d() + touch event interpretation and inertial math). Then duplicate the DOM for the top and bottom bars, adjust the positioning to make them look fluid and apply the CSS blur filter. It's easy with React :)
zuppy 13y ago
Here's a screenshot for a quick view: https://www.dropbox.com/s/35060r2obuwse4f/Photo%2014.11.2013%2C%2011%2011%2011.png https://www.dropbox.com/s/35060r2obuwse4f/Photo%2014.11.2013... It looks better when you see it moving.
cheeaun 13y ago
Any reason why it's only available for iPhone 5?
- peterhunt 13y ago
  Three reasons. 1. Blur filter is only available on WebKit 2. I know for sure how much texture memory is on an iPhone 5 3. The touch event latency on android is too damn high.
Zecc 13y ago
>> <h1>If you see this, something is broken.</h1> The funny thing being that I only saw that because I browsed the source, because the page was so broken for me that I only saw a black screen. In any case, I see Message(null, " This demo is only available for iPhone 5 and iOS 7. Sorry! " ) So I'm out of here.
- peterhunt 13y ago
  There was some small text centered on the screen specifying the demo is only available on iPhone 5 (see comment above for why)

nraynaud 13y ago

I see a big value in UI design, where you want to make sure that the general layout of your screen is as intended. I'm still thinking in actually making this thing as a physical object with a handle you put in front of the screen.