[{"data":1,"prerenderedAt":323},["ShallowReactive",2],{"project-18919187":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":46,"post_text":47,"what":48,"said":80,"maker_in_thread":178,"shape":190,"grid":195,"attempts":285,"same_week":286,"maker_shows":34,"maker_hidden":315,"reader_version":316,"card":317},"18919187","Shiny.js","Shiny.js simulates reflections on the web for mobile devices","title","Show HN: Shiny.js simulates reflections on the web for mobile devices","https:\u002F\u002Fgithub.com\u002Frikschennink\u002Fshiny","github.com","rikschennink",1547627964,2019,113,38,424,2195,20,"notable","languages","javascript ui effect library","library",[24,25,26,27,28],"javascript","gyroscope","css reflection","mobile web","device orientation","mixed",-0.163,{"positive":32,"neutral":33,"mixed":34,"critical":35},3,6,5,10,24,{"idea":38,"performance":40,"execution":43,"docs":45},{"positive":32,"critical":39},1,{"positive":41,"critical":42},0,7,{"positive":41,"critical":44},2,{"positive":41,"critical":41},[34,41,41,41,41,39,39,39,41,39,41,32,39,39,32,41,32,32,39,41,39,39,32,32,32,32,32,41,34,41,39,41,32,32,41,41,34,41],null,{"problem":49,"audience":47,"pricing":47,"motivation":47,"time_to_build":47,"stack":59,"openness":78,"stage":79,"team_size":79},{"value":50,"source":51,"evidence":52},"Adds reflective shine effects to web pages on mobile devices","maker",[53,55],{"id":54},"post",{"id":56,"by":57,"text":58},"18919708","anonytrary","Admittedly, I didn't read the source code, but looks like this would use the gyroscope API (edit: it does)? Probably wouldn't use this profusely, but it seems like a nice…",[60,68,72],{"value":61,"source":62,"evidence":63},"JavaScript","commenter",[64],{"id":65,"by":66,"text":67},"18919902","onion2k","maybe hardware acceleration is missing or something like that It's doing some seriously slow stuff behind the scenes. For example, when the library initialises it creates a 64 *…",{"value":69,"source":62,"evidence":70},"Canvas API",[71],{"id":65,"by":66,"text":67},{"value":73,"source":51,"evidence":74},"Gyroscope API",[75],{"id":76,"by":11,"text":77},"18919822","Thanks! Indeed it does use the gyroscope. Unfortunately (as always on the web) the implementation apparently differs a lot per device so I'm now gathering test devices to make it…","open_source","unknown",{"praise":81,"objections":101,"requests":139,"questions":154,"alternatives":162},[82,97],{"value":83,"source":62,"evidence":84},"Cool, fun effect",[85,89,93],{"id":86,"by":87,"text":88},"18919771","lbj","Not massively useful, but a fun option none the less.",{"id":90,"by":91,"text":92},"18920171","bibyte","Cool effect. It works fine on my Moto G5 using Chrome. But the page feels really slow. I guess that's because of my low end CPU.",{"id":94,"by":95,"text":96},"18919702","Gigablah","Brb, implementing this on all my websites.",{"value":98,"source":62,"evidence":99},"Nice idea for credit card interfaces",[100],{"id":56,"by":57,"text":58},[102,117,128],{"value":103,"source":62,"evidence":104},"Laggy and choppy on Firefox for Android",[105,109,113],{"id":106,"by":107,"text":108},"18920616","mscasts","It isn't working well on Firefox for Android (at least not for me). It is very laggy, so much so that I would say that there is no shiny effect at all.",{"id":110,"by":111,"text":112},"18920731","lyjackal","Same. Firefox on pixel 2 renders about every second. Chrome works",{"id":114,"by":115,"text":116},"18920826","xpil","Same here. Sort of works, but very laggy. Firefox on OnePlus 3T.",{"value":118,"source":62,"evidence":119},"Wastes battery and CPU resources",[120,124],{"id":121,"by":122,"text":123},"18921329","piotrkubisa","I am a bit biased. It is nice effect to see but also I take it as a complete waste of the device resources, namely a battery.",{"id":125,"by":126,"text":127},"18922077","chooseaname","I would be very upset if a website that I had to use, say a bank website, decided they needed to use this. I consider this to be user hostile.",{"value":129,"source":62,"evidence":130},"Inconsistent rendering across browsers and devices",[131,135],{"id":132,"by":133,"text":134},"18919857","LordHeini","This is a cool idea. The website says it is untested on android and it shows how weird and inconsistent browsers are. On android firefox it looks like the iPhone example but the…",{"id":136,"by":137,"text":138},"18920131","amiga-workbench","Its a bit broken on my Mi Mix 2S. https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Vs8VmNEdCog",[140,147],{"value":141,"source":62,"evidence":142},"Support desktop cursor-following tilt",[143],{"id":144,"by":145,"text":146},"18919803","myfonj","For desktop devices (without gyroscope but with cursor) this quite asks for \"cursor following tilt\", like https:\u002F\u002Fmicku7zu.github.io\u002Fvanilla-tilt.js\u002F .",{"value":148,"source":62,"evidence":149},"Better demo GIF showing a screen recording",[150],{"id":151,"by":152,"text":153},"18922997","pj_mukh","Quick feedback: I got a little confused on the Github readme because the gif shows a video record of the phone. The physical reflections on the glass of the phone seem to be…",[155],{"value":156,"source":62,"evidence":157},"What does it do on devices without a reflective screen",[158],{"id":159,"by":160,"text":161},"18920611","danellis","I don't get it... This is for devices that already have a reflective screen.",[163,174],{"value":164,"source":62,"evidence":165},"Apple Wallet Apple Pay Cash card effect",[166,170],{"id":167,"by":168,"text":169},"18921152","iaml","Apple already did a similar effect for apple pay cash https:\u002F\u002Ftwitter.com\u002Fpanzer\u002Fstatus\u002F927973389792264192?lang=en",{"id":171,"by":172,"text":173},"18921167","jackcarter","iOS does something like this with the Apply Pay Cash card in Wallet: https:\u002F\u002Ftwitter.com\u002Fsupcat\u002Fstatus\u002F1083537384233328640",{"value":175,"source":62,"evidence":176},"vanilla-tilt.js",[177],{"id":144,"by":145,"text":146},{"comments":179,"answered":44,"key":180},8,[181,184,187],{"id":182,"text":183},"18920553","Thanks! Apparently Apple has a patent pending. Bob below has build what you describe above, so he might receive a letter from Apple in the near future ;)…",{"id":185,"text":186},"18920667","Nuts, that doesn't sound good, I haven't been able to test on Android because my Android device does not have a Gyroscope :\\ Hope to fix this next week.",{"id":188,"text":189},"18928851","I haven't been able to test this as my test device is too old. But, I'm betting my money on Firefox somehow rendering `background-attachment: fixed` differently from Webkit\u002FBlink…",{"commenters":191,"max_depth":192,"maker_replies":179,"first_comment_mins":193,"lifespan_hours":194},28,4,101,22,[196,200,204,208,210,212,214,216,217,220,221,223,225,226,227,231,233,235,236,237,239,242,246,249,253,255,259,261,264,265,266,268,270,273,275,277,279,281],[197,41,34,198,199,41],"18920347","project\u002Fpositive\u002Fidea","stupidcar",[201,41,41,202,203,41],"18920455","other\u002Fneutral\u002Fnone","ericwood",[205,41,41,206,207,41],"18924027","other\u002Fneutral\u002Fdesign","kitsunesoba",[182,41,41,209,11,39],"maker\u002Fneutral\u002Fnone",[167,41,41,211,168,41],"other\u002Fneutral\u002Fidea",[159,39,39,213,160,41],"project\u002Fcritical\u002Fidea",[121,44,39,215,122,41],"project\u002Fcritical\u002Fperformance",[125,44,39,215,126,41],[218,32,41,211,219,41],"18920041","cheeaun",[106,192,39,215,107,41],[185,192,41,222,11,39],"maker\u002Fneutral\u002Fperformance",[224,192,32,222,107,41],"18920682",[110,192,39,215,111,41],[114,192,39,215,115,41],[228,192,32,229,230,41],"18920989","project\u002Fmixed\u002Fperformance","werdnapk",[188,192,41,232,11,39],"project\u002Fneutral\u002Fperformance",[86,34,32,234,87,41],"project\u002Fmixed\u002Fidea",[132,33,32,229,133,41],[65,33,39,215,66,41],[238,33,41,222,11,39],"18919965",[240,33,39,215,241,41],"18922196","yoklov",[243,33,39,244,245,41],"18920089","project\u002Fcritical\u002Fexecution","codetrotter",[247,33,32,248,66,41],"18920166","maker\u002Fneutral\u002Fexecution",[250,42,32,251,252,41],"18919623","project\u002Fneutral\u002Fidea","vanderZwan",[151,179,32,254,152,41],"project\u002Fmixed\u002Fdocs",[256,179,32,257,258,41],"18923129","maker\u002Fneutral\u002Fdocs","mdmnk",[144,260,32,251,145,41],9,[262,260,41,263,11,39],"18919820","maker\u002Fneutral\u002Fdesign",[56,35,34,198,57,41],[76,35,41,248,11,39],[136,267,39,244,137,41],11,[269,267,41,248,11,39],"18920378",[271,267,32,272,137,41],"18920392","project\u002Fneutral\u002Fexecution",[90,274,32,229,91,41],12,[276,274,41,222,11,39],"18920372",[171,278,41,211,172,41],13,[94,280,34,198,95,41],14,[282,283,41,202,284,41],"18921441",15,"mothsonasloth",[],[287,292,297,301,306,310],{"id":288,"name":289,"points":290,"category":291},"18902561","HeyFromTheFuture",355,"consumer_social",{"id":293,"name":294,"points":295,"category":296},"18911317","The Plain Contract",299,"productivity",{"id":298,"name":299,"points":300,"category":296},"18872599","JournalBook",268,{"id":302,"name":303,"points":304,"category":305},"18919581","Postmake",197,"dev_tools",{"id":307,"name":308,"points":309,"category":305},"18879209","workstation",155,{"id":311,"name":312,"points":313,"category":314},"18885369","FarmNet",139,"infrastructure",false,"v2",{"id":318,"name":5,"line":6,"ai":315,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":319,"top":18,"kw":320,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":321,"url":9,"mix":322,"praise":83,"objection":103,"sub":21},18919187,-0.16,[24,25,26,27,28],"50000111010311303310113333305010330050",[32,33,34,35],1794036574027]