[{"data":1,"prerenderedAt":323},["ShallowReactive",2],{"project-46925811":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":44,"post_text":45,"what":46,"said":70,"maker_in_thread":164,"shape":169,"grid":173,"attempts":284,"same_week":285,"maker_shows":42,"maker_hidden":315,"reader_version":316,"card":317},"46925811","fun-with-clip-path","I saw this cool navigation reveal, so I made a simple HTML+CSS version","title","Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version","https:\u002F\u002Fgithub.com\u002FMomciloo\u002Ffun-with-clip-path","github.com","momciloo",1770486327,2026,141,38,457,4366,11,"notable","creative","css visual effects","web_app",[24,25,26,27],"css clip-path","navigation animation","css-only menu","html css effect","debated",0.125,{"positive":18,"neutral":31,"mixed":32,"critical":33},4,1,9,25,{"design":36,"execution":38,"idea":41,"performance":43},{"positive":31,"critical":37},5,{"positive":39,"critical":40},0,2,{"positive":42,"critical":32},3,{"positive":32,"critical":32},[39,42,39,39,39,39,32,39,32,39,39,32,32,37,32,32,42,39,37,37,37,37,42,37,32,42,37,37,37,39,37,42,32,39,39,39,37,32],"Two clip-paths, over the navigation:\n\n- The first clip-path is a circle (top-left corner)\n- The second clip-path is a polygon, that acts like a ray (hardcoded, can be improved)\n\nThe original work by Iventions Events https:\u002F\u002Fiventions.com\u002F uses JavaScript, but I found CSS-only approach more fun\n\nHere's a demo and the codebase: https:\u002F\u002Fgithub.com\u002FMomciloo\u002Ffun-with-clip-path",{"problem":47,"audience":53,"pricing":53,"motivation":54,"time_to_build":53,"stack":58,"openness":67,"stage":68,"team_size":69},{"value":48,"source":49,"evidence":50},"Recreates a navigation reveal effect using CSS only instead of JavaScript","maker",[51],{"id":52},"post",null,{"value":55,"source":49,"evidence":56},"Found the CSS-only approach more fun than the original JavaScript version",[57],{"id":52},[59,63],{"value":60,"source":49,"evidence":61},"HTML",[62],{"id":52},{"value":64,"source":49,"evidence":65},"CSS",[66],{"id":52},"open_source","prototype","unknown",{"praise":71,"objections":103,"requests":140,"questions":147,"alternatives":159},[72,96],{"value":73,"source":74,"evidence":75},"Looks cool and creative","commenter",[76,80,84,88,92],{"id":77,"by":78,"text":79},"46928246","flaburgan","It looks cool, but to have to navigate from one side of the screen to the opposite one is quite suboptimal",{"id":81,"by":82,"text":83},"46933931","MagicMoonlight","That looks really cool. No idea what to use it in, but it’s great.",{"id":85,"by":86,"text":87},"46930576","felineflock","Good job! Looks amazing! It is a great way to call attention to content.",{"id":89,"by":90,"text":91},"46932315","pmkary","This is just awesome!",{"id":93,"by":94,"text":95},"46944704","drakeswalla","looks really cool",{"value":97,"source":74,"evidence":98},"Demo loads fast",[99],{"id":100,"by":101,"text":102},"46935017","xtiansimon","The _inspiration_ site loaded slowly on my Dino laptop, but the _demo_ was super fast. Good job.",[104,116,127,134],{"value":105,"source":74,"evidence":106},"Poor usability: menu requires moving mouse across the screen",[107,108,112],{"id":77,"by":78,"text":79},{"id":109,"by":110,"text":111},"46941098","deterministic","I am not a big fan of that kind of UI. You have to move your mouse all the way top left and then all the way bottom right. It's the worst possible distance-to-move you can come…",{"id":113,"by":114,"text":115},"46929790","uxcolumbo","Neat experiment, but this is not good design. Design is about solving problems. A menu is suppose to help you to quickly find and get to a specific section of your site. Why do I…",{"value":117,"source":74,"evidence":118},"Not mobile friendly and breaks on some screen sizes",[119,123],{"id":120,"by":121,"text":122},"46934885","djfobbz","This is not mobile friendly. Was that intentional?",{"id":124,"by":125,"text":126},"46933548","self_awareness","As expected, this doesn't work with non-standard browser window sizes and is butchered on mobile in horizontal mode. But since the original implementation is also broken, I guess…",{"value":128,"source":74,"evidence":129},"Keyboard accessibility is weak",[130],{"id":131,"by":132,"text":133},"46930874","AlexAplin","I'm pretty forgiving about accessibility (I'm able to say this at all because I don't have to rely rigidly on accessibility tools) but nav menus feel like a baseline we shouldn't…",{"value":135,"source":74,"evidence":136},"Slow performance on some hardware",[137],{"id":138,"by":114,"text":139},"46933677","I tried to use it yesterday on my iPad. Some kind of element was blocking the menu. Tried it today on my PC (big screen) - the intro animation is slow - 6-10 FPS and clicking on…",[141],{"value":142,"source":74,"evidence":143},"Write-up on the design to code process",[144],{"id":145,"by":101,"text":146},"46935078","I like the demo. It's bold, creative, and dynamic. Will there be more explorations? Maybe a writeup on the design to code process?",[148],{"value":149,"source":74,"evidence":150},"Is there a working demo link?",[151,155],{"id":152,"by":153,"text":154},"46932255","bmacho","Is there a demo? The link points to a github repo, and github pages is not active",{"id":156,"by":157,"text":158},"46932275","ddtaylor","Site is death hugged? Anyone have a working link?",[160],{"value":161,"source":49,"evidence":162},"Original JavaScript implementation by Iventions Events",[163],{"id":52},{"comments":32,"answered":32,"key":165},[166],{"id":167,"text":168},"46932545","good point. added the demo link",{"commenters":170,"max_depth":37,"maker_replies":32,"first_comment_mins":171,"lifespan_hours":172},32,163,43,[174,178,180,184,186,189,191,195,199,202,205,208,211,213,217,218,220,223,225,227,232,233,236,240,242,244,247,251,254,258,262,264,268,271,275,277,279,282],[175,39,39,176,177,39],"46932793","commenter\u002Fneutral\u002Fdesign","tgv",[77,32,42,179,78,39],"project\u002Fmixed\u002Fdesign",[181,32,39,182,183,39],"46931352","commenter\u002Fneutral\u002Fnone","mym1990",[185,32,39,182,125,39],"46933527",[187,32,39,182,188,39],"46934036","jotaen",[190,32,39,182,125,39],"46934470",[192,32,32,193,194,39],"46931956","project\u002Fcritical\u002Fdesign","savolai",[196,40,39,197,198,39],"46927871","other\u002Fneutral\u002Fnone","swyx",[200,40,32,193,201,39],"46928120","orphea",[203,40,39,182,204,39],"46928345","division_by_0",[206,40,39,182,207,39],"46929649","falloutx",[209,40,32,193,210,39],"46933630","vrighter",[131,42,32,212,132,39],"project\u002Fcritical\u002Fexecution",[214,31,37,215,216,39],"46931319","project\u002Fpositive\u002Fidea","todotask2",[109,37,32,193,110,39],[124,219,32,212,125,39],6,[152,221,42,222,153,39],7,"project\u002Fneutral\u002Fnone",[167,221,39,224,11,32],"maker\u002Fneutral\u002Fdocs",[100,221,37,226,101,39],"project\u002Fpositive\u002Fperformance",[228,229,37,230,231,39],"46927594",8,"maker\u002Fpositive\u002Fnone","thekevan",[81,33,37,215,82,39],[145,234,37,235,101,39],10,"project\u002Fpositive\u002Fdesign",[237,18,42,238,239,39],"46929811","project\u002Fneutral\u002Fidea","rhplus",[85,241,37,235,86,39],12,[120,243,32,193,121,39],13,[156,245,42,246,157,39],14,"project\u002Fneutral\u002Fexecution",[248,249,37,235,250,39],"46944498",15,"devluc",[89,252,37,253,90,39],16,"project\u002Fpositive\u002Fnone",[255,256,37,253,257,39],"46930941",17,"jackomelon",[259,260,39,197,261,39],"46930332",18,"elian55",[93,263,37,235,94,39],19,[265,266,42,246,267,39],"46931767",20,"Gabrys1",[113,269,32,270,114,39],21,"project\u002Fcritical\u002Fidea",[272,269,39,273,274,39],"46929806","commenter\u002Fneutral\u002Fidea","hippo22",[276,269,39,176,183,39],"46931374",[278,269,39,176,114,39],"46933553",[280,269,37,215,281,39],"46932392","peckemys",[138,269,32,283,114,39],"project\u002Fcritical\u002Fperformance",[],[286,291,296,301,305,310],{"id":287,"name":288,"points":289,"category":290},"46954696","Wall Street Raider",721,"games",{"id":292,"name":293,"points":294,"category":295},"46943568","AllTheViews",412,"learning_science",{"id":297,"name":298,"points":299,"category":300},"46916609","rememory",402,"security_privacy",{"id":302,"name":303,"points":304,"category":20},"46917033","Vecti",386,{"id":306,"name":307,"points":308,"category":309},"46930391","LocalGPT",331,"ai",{"id":311,"name":312,"points":313,"category":314},"46918429","Look Ma, No Linux",327,"dev_tools",false,"v2",{"id":318,"name":5,"line":6,"ai":315,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":319,"top":18,"kw":320,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":321,"url":9,"mix":322,"praise":73,"objection":105,"sub":21},46925811,0.13,[24,25,26,27],"03000010100115113055553513555053100051",[18,31,32,33],1793991143172]