[{"data":1,"prerenderedAt":394},["ShallowReactive",2],{"project-33920510":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":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":46,"post_text":47,"what":48,"said":72,"maker_in_thread":175,"shape":185,"grid":189,"attempts":351,"same_week":359,"maker_shows":40,"maker_hidden":386,"reader_version":387,"card":388},"33920510","Metallic CSS","Versatile Metallic Finish for CSS","title","Show HN: Versatile Metallic Finish for CSS","https:\u002F\u002Fwww.metallicss.com","metallicss.com","mikaelaast",1670588933,2022,112,61,558,2570,22,"notable","dev_tools","css library","library",[24,25,26,27],"css metallic effect","css gradient","brushed metal css","css button style","debated",-0.163,{"positive":31,"neutral":31,"mixed":32,"critical":33},8,0,12,28,{"execution":36,"design":38,"idea":41,"docs":43,"privacy":45},{"positive":32,"critical":37},4,{"positive":39,"critical":40},5,6,{"positive":42,"critical":32},3,{"positive":32,"critical":44},1,{"positive":32,"critical":44},[32,44,39,39,42,39,32,32,32,32,44,44,32,32,42,44,32,42,39,44,44,44,32,44,32,32,42,44,42,39,32,32,44,32,42,44,32,39,42,32],null,{"problem":47,"audience":47,"pricing":47,"motivation":47,"time_to_build":47,"stack":49,"openness":71,"stage":71,"team_size":71},[50,57,64],{"value":51,"source":52,"evidence":53},"CSS","commenter",[54],{"id":55,"by":11,"text":56},"33925586","Thanks for the feedback. The \"for CSS\" is in reference to how CSS properties like the dimensions and border-radius are what determine the rendered effect. Also, there are…",{"value":58,"source":52,"evidence":59},"JavaScript",[60],{"id":61,"by":62,"text":63},"33922402","vultour","Considering it's distributed as a JS library I'm gonna go out on a limb here and say it requires javascript.",{"value":65,"source":66,"evidence":67},"SVG","maker",[68],{"id":69,"by":11,"text":70},"33921661","OP here. Awesome to get some feedback on the library. Please let me know if you are curious about details. The insanely hard part of this was reconciling the differences in SVG…","unknown",{"praise":73,"objections":100,"requests":136,"questions":155,"alternatives":163},[74,93],{"value":75,"source":52,"evidence":76},"Looks beautiful and clever, especially the gradient-based brushed metal effect",[77,81,85,89],{"id":78,"by":79,"text":80},"33922587","crazygringo","Wow, that is absurdly good. I never would have imagined you could use a repeating gradient effect to produce a brushed metal texture. That's crazy clever, and it's also crazy how…",{"id":82,"by":83,"text":84},"33921815","cbeach","that is beautiful!",{"id":86,"by":87,"text":88},"33921620","xmonkee","Jeez, that's so good",{"id":90,"by":91,"text":92},"33921322","tyingq","Caused me to find this brushed metallic effect which I think is well done, and is all CSS, no JS. https:\u002F\u002Fcodepen.io\u002Fsimurai\u002Fpen\u002FkvyEeg",{"value":94,"source":52,"evidence":95},"Useful for button styling like membership tiers",[96],{"id":97,"by":98,"text":99},"33925018","freedomben","This is neat! and actually very useful! My client wants a \"Bronze, Silver, and Gold\" button to represent membership levels, and this will be perfect!",[101,115,121],{"value":102,"source":52,"evidence":103},"Demo requires JavaScript and fails without it",[104,108,112],{"id":105,"by":106,"text":107},"33921061","toastal","You'd hope there would be at least an example that doesn't require JavaScript if this is a CSS thing. It could have made a good \u003Cnoscript> block to remind you to enable to see…",{"id":109,"by":110,"text":111},"33927878","autoexec","There's something just plain wrong about showing off some cool trick that doesn't need JS by putting it on a website that refuses to show you anything without it being enabled.",{"id":113,"by":106,"text":114},"33921878","It's about the experience. Having JavaScript is fine, but \u003Cnoscript> is a part of accessibility. It's just plain broken with no warning when scripts are disabled. It's a wise…",{"value":116,"source":52,"evidence":117},"Reflection ripple on edges is physically implausible",[118],{"id":119,"by":79,"text":120},"33921792","Very fun in a maximalist way! I do have a nitpick though -- I'm always bothered by whenever shadows or reflections operate in a way that makes no physical sense. And in this…",{"value":122,"source":52,"evidence":123},"Retro look feels dated, like Windows Vista or 90s web",[124,128,132],{"id":125,"by":126,"text":127},"33925277","durnygbur","Windows Vista is calling.",{"id":129,"by":130,"text":131},"33921590","BaudouinVH","1997 personal page navigation buttons called.",{"id":133,"by":134,"text":135},"33921298","ToJans","The 90s demoscene called...",[137,148],{"value":138,"source":52,"evidence":139},"Metallic texture that reflects the environment or uses webcam or head tracking",[140,144],{"id":141,"by":142,"text":143},"33923218","gampleman","I'm really hoping someone will make a metallic texture that behaves like an actual metallic colour - i.e. reflecting the environment. I think that would require some awareness of…",{"id":145,"by":146,"text":147},"33925810","rbanffy","Now all it needs is user head tracking to make the highlights and reflections move.",{"value":149,"source":52,"evidence":150},"Add a titanium preset",[151],{"id":152,"by":153,"text":154},"33921145","snshn","Plox add Titanium to the drop-down list of presets.",[156],{"value":157,"source":52,"evidence":158},"Why is it called CSS when it relies on JavaScript",[159],{"id":160,"by":161,"text":162},"33921553","dylan604","But in this case, it is a decent question. Why is it not called MetalliJS? It's not CSS so much that you can just open up a CSS file and manipulate it. You have to dive into a JS…",[164,168],{"value":165,"source":52,"evidence":166},"Brushed metal CodePen by simurai",[167],{"id":90,"by":91,"text":92},{"value":169,"source":52,"evidence":170},"Shiny accelerometer JS library",[171],{"id":172,"by":173,"text":174},"33926235","yreg","Accelerometer would also work, like in this library: https:\u002F\u002Fgithub.com\u002Fmaustinstar\u002Fshiny",{"comments":176,"answered":32,"key":177},9,[178,179,182],{"id":55,"text":56},{"id":180,"text":181},"33925656","Thank you for the comment. I get it completely. The ripple effect is my artistic and decidedly unrealistic way of evoking the general feeling of the kind of distortion that…",{"id":183,"text":184},"33933555","OP again. I couldn't get this out of my head, so I went to some steps to mitigate the unrealism. Updated now, with a slightly less wobbly horizon.",{"commenters":186,"max_depth":37,"maker_replies":176,"first_comment_mins":187,"lifespan_hours":188},46,63,27,[190,192,195,197,199,200,202,204,205,208,212,214,217,220,223,225,230,232,234,236,237,239,240,244,247,250,253,256,257,260,264,268,269,271,274,277,279,282,285,288,291,293,294,296,298,301,305,308,310,314,318,321,324,327,331,333,335,339,343,345,347],[90,32,32,191,91,32],"other\u002Fneutral\u002Fnone",[193,32,32,191,194,32],"33921539","agos",[109,32,44,196,110,32],"project\u002Fcritical\u002Fexecution",[86,32,39,198,87,32],"project\u002Fpositive\u002Fdesign",[82,32,39,198,83,32],[78,32,39,201,79,32],"project\u002Fpositive\u002Fidea",[145,32,42,203,146,32],"project\u002Fneutral\u002Fidea",[172,32,42,203,173,32],[206,32,39,201,207,32],"33923678","solardev",[209,32,32,210,211,32],"33923857","commenter\u002Fneutral\u002Fnone","darepublic",[213,32,32,210,91,32],"33926305",[215,44,32,191,216,32],"33921236","skrebbel",[218,44,32,191,219,32],"33922876","thatwasunusual",[221,44,32,191,222,32],"33924183","867-5309",[224,44,32,191,146,32],"33925822",[226,227,44,228,229,32],"33923154",2,"project\u002Fcritical\u002Fdocs","plusminusplus",[55,227,32,231,11,44],"maker\u002Fneutral\u002Fdocs",[119,42,44,233,79,32],"project\u002Fcritical\u002Fdesign",[180,42,32,235,11,44],"maker\u002Fneutral\u002Fdesign",[183,42,32,235,11,44],[69,37,32,238,11,44],"maker\u002Fneutral\u002Fexecution",[141,39,42,203,142,32],[241,39,44,242,243,32],"33924046","project\u002Fcritical\u002Fprivacy","lostlogin",[245,39,32,246,173,32],"33926325","other\u002Fneutral\u002Fprivacy",[248,39,32,249,11,44],"33925707","maker\u002Fneutral\u002Fidea",[251,39,42,203,252,32],"33925801","matheist",[254,39,42,203,255,32],"33925803","SebastianKra",[97,40,39,201,98,32],[258,40,32,259,11,44],"33925664","maker\u002Fneutral\u002Fnone",[261,262,44,196,263,32],"33922477",7,"jawngee",[265,31,32,266,267,32],"33923000","other\u002Fneutral\u002Fdesign","n8cpdx",[129,176,44,233,130,32],[133,270,44,233,134,32],10,[272,270,32,191,273,32],"33921468","f6v",[275,270,32,191,276,32],"33921501","alsetmusic",[105,278,44,196,106,32],11,[280,278,32,191,281,32],"33921130","schwartzworld",[283,278,32,191,284,32],"33921183","tomrod",[286,278,32,191,287,32],"33921224","reaperducer",[289,278,32,191,290,32],"33921355","9wzYQbTYsAIc",[160,278,42,292,161,32],"project\u002Fneutral\u002Fdocs",[113,278,44,196,106,32],[61,278,42,295,62,32],"project\u002Fneutral\u002Fexecution",[297,278,32,259,11,44],"33925751",[299,33,39,198,300,32],"33921450","globalise83",[302,303,32,266,304,32],"33924317",13,"spaceman_2020",[306,303,32,266,307,32],"33925116","LordDragonfang",[309,303,32,266,304,32],"33927024",[311,312,44,233,313,32],"33921813",14,"v3ss0n",[315,316,32,266,317,32],"33921013",15,"prox",[319,316,32,266,320,32],"33921057","frb",[322,316,32,266,323,32],"33921201","smcl",[152,325,42,326,153,32],16,"project\u002Fneutral\u002Fdesign",[328,329,44,233,330,32],"33925491",17,"andybak",[332,329,32,259,11,44],"33925545",[334,329,32,210,330,32],"33925615",[336,337,39,198,338,32],"33922051",18,"maidul",[340,341,39,198,342,32],"33924404",19,"Aeolun",[125,344,44,233,126,32],20,[346,344,32,235,11,44],"33925781",[348,349,32,191,350,32],"33921654",21,"cm42",[352,353,356],{"id":4,"t":12,"points":14,"comments":15},{"id":354,"t":355,"points":44,"comments":42},"39889055",1711926488,{"id":357,"t":358,"points":262,"comments":44},"39904089",1712053206,[360,365,369,374,378,382],{"id":361,"name":362,"points":363,"category":364},"33923907","LearnGPT",352,"ai",{"id":366,"name":367,"points":368,"category":364},"33910863","Hello (sayhello.so)",318,{"id":370,"name":371,"points":372,"category":373},"33931971","Pg_CRDT",296,"data",{"id":375,"name":376,"points":377,"category":373},"33969908","XetHub",279,{"id":379,"name":380,"points":381,"category":20},"33922754","Pynecone",209,{"id":383,"name":384,"points":385,"category":20},"33906520","Ezy",155,false,"v2",{"id":389,"name":5,"line":6,"ai":386,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":390,"top":18,"kw":391,"maker":11,"domain":10,"tier":19,"attempts":42,"strip":392,"url":9,"mix":393,"praise":75,"objection":102,"sub":21},33920510,-0.16,[24,25,26,27],"0155350000110031035111010031350010310530",[31,31,32,33],1794036628290]