[{"data":1,"prerenderedAt":364},["ShallowReactive",2],{"project-18755782":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":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":43,"post_text":45,"what":46,"said":76,"maker_in_thread":170,"shape":182,"grid":186,"attempts":326,"same_week":327,"maker_shows":33,"maker_hidden":356,"reader_version":357,"card":358},"18755782","Wiv.js","A library for a more wiggly div","title","Show HN: Wiv.js – A library for a more wiggly div","https:\u002F\u002Fjjkaufman.github.io\u002Fwiv.js\u002F","jjkaufman.github.io","jjkaufman",1545709796,2018,265,55,109,2155,6,"legend","languages","javascript library","library",[21,24,25,26],"wiggle effect","canvas animation","div animation","mixed",0.357,{"positive":30,"neutral":31,"mixed":32,"critical":33},15,12,1,3,31,{"performance":36,"idea":39,"design":41,"execution":42},{"positive":37,"critical":38},0,2,{"positive":40,"critical":32},13,{"positive":32,"critical":37},{"positive":37,"critical":37},[33,37,44,44,37,44,37,44,33,33,32,32,44,33,33,37,37,37,44,33,37,44,37,37,44,37,37,37,37,44,44,33,37,33,44,37,37,44,44,33],5,null,{"problem":47,"audience":45,"pricing":45,"motivation":45,"time_to_build":45,"stack":57,"openness":73,"stage":74,"team_size":75},{"value":48,"source":49,"evidence":50},"Makes plain HTML div elements wiggle as a decorative effect","inferred",[51,53],{"id":52},"post",{"id":54,"by":55,"text":56},"18756007","zeta0134","Ha! This is completely nonsense, and completely awesome. Description checks out. Well done!",[58,65],{"value":59,"source":49,"evidence":60},"JavaScript",[61],{"id":62,"by":63,"text":64},"18757195","PavlovsCat","move these things into initWiv() and cache them: ``` var speed = parseFloat(wivCurve.parentNode.dataset.wivSpeed) var height = parseFloat(wivCurve.parentNode.dataset.wivHeight)…",{"value":66,"source":49,"evidence":67},"HTML canvas",[68,69],{"id":62,"by":63,"text":64},{"id":70,"by":71,"text":72},"18756466","MatthewRayfield","Looks like it's adding a canvas element to the divs and positioning it to line up.","open_source","launched","unknown",{"praise":77,"objections":102,"requests":126,"questions":141,"alternatives":149},[78,95],{"value":79,"source":80,"evidence":81},"Fun, nostalgic, charming retro effect","commenter",[82,86,87,91],{"id":83,"by":84,"text":85},"18756358","ryanchoi","This is guilt-trippingly sweet, there's a certain charm I get from this, kind of like that of tacky Christmas sweaters or unironically used comic sans :)",{"id":54,"by":55,"text":56},{"id":88,"by":89,"text":90},"18756190","quickthrower2","This should have existed in 1994",{"id":92,"by":93,"text":94},"18756067","hayksaakian","It's cool, and I could see it making it's way into more lighthearted projects",{"value":96,"source":80,"evidence":97},"Useful for form validation feedback",[98],{"id":99,"by":100,"text":101},"18756483","kangoo1707","It can be use for form validation. If user doesn't enter an input, we can \"wiggle\" it for 2 seconds (together with a red error message). Recently I did just that :)",[103,115],{"value":104,"source":80,"evidence":105},"CPU-intensive and slows older hardware",[106,110,114],{"id":107,"by":108,"text":109},"18757153","KeybInterrupt","I opened this on my Notebook, and it's Fan spun out of control! it might be my ancient hardware, but this is rather CPU intensive it seems. But the effect is fun, and cool non…",{"id":111,"by":112,"text":113},"18758719","1125","I have a water-cooled i7 6700k and the rising fan speed was the first thing I heard as well. Normally this does not happen when browsing the web.",{"id":62,"by":63,"text":64},{"value":116,"source":80,"evidence":117},"Annoying and bad for accessibility",[118,122],{"id":119,"by":120,"text":121},"18756300","pzone","Thanks, I hate it.",{"id":123,"by":124,"text":125},"18759829","JoshMnem","The ripple looks bad and is terrible for accessibility. Not everything on a page should move. Look up animation and accessibility.",[127,134],{"value":128,"source":80,"evidence":129},"Built into browsers natively",[130],{"id":131,"by":132,"text":133},"18756353","kidoodle","This should come built in in all modern browsers.",{"value":135,"source":80,"evidence":136},"Support for text wiggling",[137],{"id":138,"by":139,"text":140},"18756734","hkon","Great stuff! Now let's see it for text next!",[142],{"value":143,"source":80,"evidence":144},"Can hover speed be increased",[145],{"id":146,"by":147,"text":148},"18757300","madprops","Wondering if it's possible to increase the speed on hover",[150,157,163],{"value":151,"source":80,"evidence":152},"Netscape layers and IE3 div animation",[153],{"id":154,"by":155,"text":156},"18758549","jasonkester","It did. Here's my personal site from that era, complete with javascript \"Layer\" (in Netscape) (or DIV in IE3) tags doing the wiggling: http:\u002F\u002Fjasonkester.com\u002F",{"value":158,"source":80,"evidence":159},"Material Design ripple effect",[160],{"id":161,"by":124,"text":162},"18756263","It's already here: Material Design \"ripple\" effect.",{"value":164,"source":80,"evidence":165},"freezeframe.js",[166],{"id":167,"by":168,"text":169},"18758230","Kagerjay","reminds me of freezeframe.js, you can grab an a slice of a gif and draw a canvas image on top https:\u002F\u002Fgithub.com\u002Fctrl-freaks\u002Ffreezeframe.js except this is just any regular div…",{"comments":171,"answered":32,"key":172},7,[173,176,179],{"id":174,"text":175},"18760534","Thank you for the thoughtful code review. It is already running smoother https:\u002F\u002Fgithub.com\u002Fjjkaufman\u002Fwiv.js\u002Fpull\u002F5 if you are curious",{"id":177,"text":178},"18760578","neocities is rad https:\u002F\u002Fcoughdrop.neocities.org\u002F",{"id":180,"text":181},"18760575","MySpace was rad",{"commenters":183,"max_depth":18,"maker_replies":171,"first_comment_mins":184,"lifespan_hours":185},38,73,134,[187,189,191,194,198,201,203,206,210,213,214,216,220,223,225,229,230,234,235,237,240,241,243,247,248,250,255,258,261,264,266,267,269,271,274,276,278,280,282,284,287,288,290,294,295,297,298,299,302,305,308,312,316,318,322],[62,37,33,188,63,37],"maker\u002Fneutral\u002Fperformance",[174,37,37,190,11,32],"project\u002Fpositive\u002Fperformance",[192,37,37,193,63,37],"18785204","commenter\u002Fneutral\u002Fnone",[195,32,44,196,197,37],"18756504","project\u002Fpositive\u002Fidea","edoo",[199,32,44,196,200,37],"18756745","vanderZwan",[177,32,37,202,11,32],"other\u002Fneutral\u002Fnone",[204,32,44,205,200,37],"18761511","maker\u002Fpositive\u002Fnone",[207,32,33,208,209,37],"18756829","project\u002Fneutral\u002Fidea","agumonkey",[211,32,37,202,212,37],"18757463","DaiPlusPlus",[180,32,37,202,11,32],[83,38,44,215,84,37],"project\u002Fpositive\u002Fdesign",[217,38,33,218,219,37],"18757412","project\u002Fneutral\u002Fdesign","snazz",[221,38,33,218,222,37],"18757723","lapnitnelav",[107,33,32,224,108,37],"project\u002Fcritical\u002Fperformance",[226,33,37,227,228,37],"18758030","other\u002Fneutral\u002Fperformance","LukeShu",[111,33,32,224,112,37],[231,232,44,196,233,37],"18756088",4,"saagarjha",[54,44,44,196,55,37],[119,18,32,236,120,37],"project\u002Fcritical\u002Fidea",[238,171,33,208,239,37],"18756235","m0zg",[161,171,37,202,124,37],[242,171,37,227,200,37],"18756747",[244,171,37,245,246,37],"18758289","other\u002Fpositive\u002Fdesign","tuesdayrain",[123,171,37,202,124,37],[92,249,44,196,93,37],8,[251,252,33,253,254,37],"18756931",9,"project\u002Fmixed\u002Fdesign","miguelmota",[256,252,33,218,257,37],"18756936","cafebabbe",[259,252,37,260,11,32],"18760572","maker\u002Fneutral\u002Fnone",[146,262,33,263,147,37],10,"project\u002Fneutral\u002Fexecution",[88,265,44,196,89,37],11,[154,265,37,202,155,37],[268,265,37,260,11,32],"18760557",[270,265,37,193,11,32],"18760562",[272,31,44,196,273,37],"18761480","dsalaj",[275,31,37,202,200,37],"18761520",[277,31,37,202,273,37],"18761553",[279,31,37,202,200,37],"18768798",[281,31,37,202,273,37],"18777911",[283,31,37,193,200,37],"18790355",[285,40,44,196,286,37],"18756460","mindcrime",[99,40,44,196,100,37],[289,40,44,196,286,37],"18756517",[291,292,33,263,293,37],"18756371",14,"kristopolous",[70,292,33,263,71,37],[296,292,37,193,293,37],"18756476",[167,292,33,208,168,37],[131,30,44,196,132,37],[300,30,37,202,301,37],"18756979","amelius",[303,30,37,193,304,37],"18757228","RobertKerans",[306,307,37,205,11,32],"18760409",16,[309,310,44,196,311,37],"18758339",17,"jccalhoun",[313,314,33,208,315,37],"18756955",18,"amunategui",[138,317,44,196,139,37],19,[319,320,33,208,321,37],"18757008",20,"conanthe",[323,324,37,202,325,37],"18757014",21,"more-coffee",[],[328,333,337,342,347,352],{"id":329,"name":330,"points":331,"category":332},"18738275","curves",341,"creative",{"id":334,"name":335,"points":336,"category":20},"18750561","Magic Grid",167,{"id":338,"name":339,"points":340,"category":341},"18765482","Notable",124,"productivity",{"id":343,"name":344,"points":345,"category":346},"18725485","Serverless Analytics (Statsbot \u002F Cube.js)",114,"data",{"id":348,"name":349,"points":350,"category":351},"18754010","Inside Python Dict",111,"learning_science",{"id":353,"name":354,"points":355,"category":20},"18761359","lambdatalk FFT",100,false,"v2",{"id":359,"name":5,"line":6,"ai":356,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":360,"top":18,"kw":361,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":362,"url":9,"mix":363,"praise":79,"objection":104,"sub":21},18755782,0.36,[21,24,25,26],"3055050533115330005305005000055303500553",[30,31,32,33],1793990983702]