[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"project-34214896":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":35,"aspects":36,"strip":43,"post_text":45,"what":46,"said":98,"maker_in_thread":212,"shape":222,"grid":226,"attempts":306,"same_week":307,"maker_shows":33,"maker_hidden":335,"reader_version":336,"card":337},"34214896","Mafs","React components for interactive math","title","Show HN: Mafs – React components for interactive math","https:\u002F\u002Fmafs.dev\u002F","mafs.dev","stevenpetryk",1672639763,2023,196,37,284,3109,10,"notable","dev_tools","ui component library","library",[24,25,26,27,28],"react","math visualization","interactive math","svg","components","debated",0.256,{"positive":18,"neutral":32,"mixed":33,"critical":34},5,1,6,22,{"design":37,"execution":40,"idea":41,"docs":42},{"positive":38,"critical":39},4,0,{"positive":39,"critical":34},{"positive":33,"critical":39},{"positive":33,"critical":39},[32,33,39,33,33,44,39,32,39,39,39,44,39,39,39,44,39,44,39,44,33,39,32,33,32,32,32,33,44,39,39,39,32,32,32,32,39],3,null,{"problem":47,"audience":58,"pricing":45,"motivation":73,"time_to_build":45,"stack":78,"openness":97,"stage":97,"team_size":97},{"value":48,"source":49,"evidence":50},"Making interactive math visualizations in React","inferred",[51,54],{"id":52,"by":11,"text":53},"34221057","Thank you! I actually can’t remember what made me start building it. I think I was learning differential equations and wanted to try visualizing some parts of that, and it…",{"id":55,"by":56,"text":57},"34224030","iamflimflam1","Fantastic work. I’ve been using the Manim library a lot for my YouTube videos - but I’ve been looking for a replacement. I see that you already have some animation support. Great…",{"value":59,"source":49,"evidence":60},"Developers building interactive math explainers and educational content",[61,65,69],{"id":62,"by":63,"text":64},"34220937","diskzero","This is really neat. Can you share what inspired you to create these components? My significant other is an educator and she is always looking for fun and inspiring ways to…",{"id":66,"by":67,"text":68},"34231203","solarkraft","It's beautiful and very cool. Are there more tools like this for building exploratory maths UIs? Something like GeoGebra comes to mind. Maybe I'll try to use this to help me…",{"id":70,"by":71,"text":72},"34222814","pablo24602","Super cool! Will definitely be using this to explain mathematical concepts",{"value":74,"source":75,"evidence":76},"Started while learning differential equations and wanted to visualize them; enjoys building it","maker",[77],{"id":52,"by":11,"text":53},[79,85,89],{"value":80,"source":75,"evidence":81},"React",[82],{"id":83,"by":11,"text":84},"34228438","It might work better in terms of bandwidth\u002Fperformance, but developer experience was a priority (for myself) for me in this case.",{"value":86,"source":75,"evidence":87},"SVG",[88],{"id":52,"by":11,"text":53},{"value":90,"source":91,"evidence":92},"Tailwind","commenter",[93],{"id":94,"by":95,"text":96},"34224606","dmix","That's one beautiful website. The code snippets colorscheme\u002Fnav\u002Ftypography. Well done. Edit: looks like it's using Tailwind.","unknown",{"praise":99,"objections":126,"requests":158,"questions":170,"alternatives":185},[100,109,118],{"value":101,"source":91,"evidence":102},"Beautiful design and website",[103,104,108],{"id":94,"by":95,"text":96},{"id":105,"by":106,"text":107},"34224547","robertlagrant","This is gorgeous. Very Reacty (Reacthonic?) API as well, which is nice.",{"id":66,"by":67,"text":68},{"value":110,"source":91,"evidence":111},"Useful for teaching and explaining math concepts",[112,113,114],{"id":70,"by":71,"text":72},{"id":62,"by":63,"text":64},{"id":115,"by":116,"text":117},"34221611","luuuzeta","Such a sweet library! It's nice to see examples so well laid out.",{"value":119,"source":91,"evidence":120},"Clean React API",[121,122],{"id":105,"by":106,"text":107},{"id":123,"by":124,"text":125},"34228901","shivekkhurana","The `y= {fn}` prop is neat",[127,141,148],{"value":128,"source":91,"evidence":129},"Broken or non-interactive on small mobile screens",[130,134,138],{"id":131,"by":132,"text":133},"34225096","rukuu001","But broken on my iPhone (tiny SE). Now I have to get off my butt to get my laptop to see it",{"id":135,"by":136,"text":137},"34226496","blobcode","It seems like all interaction + scrolling is broken on the SE for me, although rendering and animations play.",{"id":139,"by":132,"text":140},"34226929","Yes, as per blobcode’s comment - it’s a zero-interaction page for me. No scroll, no clicks.",{"value":142,"source":91,"evidence":143},"Zoom via mouse or touchpad does not work",[144],{"id":145,"by":146,"text":147},"34230092","yayr","It's great! I just could not figure out how to zoom the chart \u002F coordinate system with the mouse \u002F touchpad. pinching and modifier keys did not work.",{"value":149,"source":91,"evidence":150},"Some examples use awkward scaling code",[151,155],{"id":152,"by":153,"text":154},"34227908","fatih-erikli","I wasn't expecting scaling the points by a some multiplier number for line through points example…",{"id":156,"by":11,"text":157},"34248282","Yeah, you found some jank.",[159,166],{"value":160,"source":91,"evidence":161},"Stop vertical scroll being captured on mobile",[162],{"id":163,"by":164,"text":165},"34229250","jamesfisher","It's lovely! One request though: is it possible to not break scrolling on mobile? E.g. constrain it so that horizontal swiping moves the graph, but vertical swiping continues to…",{"value":167,"source":91,"evidence":168},"Support zoom with pinch and modifier keys",[169],{"id":145,"by":146,"text":147},[171,178],{"value":172,"source":91,"evidence":173},"Whether it will support animations like Manim",[174],{"id":175,"by":176,"text":177},"34225982","ipsum2","@stevenpetryk do you see Mafs becoming a library supporting similar features to Manim?",{"value":179,"source":91,"evidence":180},"Meaning of the name Mafs",[181],{"id":182,"by":183,"text":184},"34224879","bee_rider","The name looks like a pun but I can’t quite work it out. I mean mafs is already a funny way of pronouncing maths, so maybe that’s good enough. But is there more to it?",[186,194,200,205],{"value":187,"source":91,"evidence":188},"Manim",[189,190],{"id":55,"by":56,"text":57},{"id":191,"by":192,"text":193},"34224446","tunesmith","I've been curious about Manim for a while. Why are you looking for a replacement?",{"value":195,"source":91,"evidence":196},"Desmos",[197],{"id":198,"by":63,"text":199},"34221815","She has been using Desmos, which is pretty good. I'll tell her about Geogebra. Creating interactive demonstrations can be very helpful. Sequences and series seem to be the latest…",{"value":201,"source":91,"evidence":202},"GeoGebra",[203,204],{"id":66,"by":67,"text":68},{"id":52,"by":11,"text":53},{"value":206,"source":91,"evidence":207},"MathAnimation",[208],{"id":209,"by":210,"text":211},"34226082","_gabe_","I just so happen to be working on a real-time gui-focused replacement for manim :) It still has a ways to go, but I was able to create one video with it so far and I'm working on…",{"comments":213,"answered":38,"key":214},7,[215,218,219],{"id":216,"text":217},"34225219","Ooh thanks for calling this out, I will test.",{"id":83,"text":84},{"id":220,"text":221},"34235770","No, Mafs prioritizes interactivity, not sequenced animations. I would expect explainers using Mafs would be something like this page[1] where there are many interactive…",{"commenters":223,"max_depth":38,"maker_replies":213,"first_comment_mins":224,"lifespan_hours":225},26,454,59,[227,229,231,233,234,235,239,240,242,244,247,249,251,252,254,256,261,263,264,265,266,267,268,269,270,274,276,279,280,283,285,287,290,292,296,298,302],[94,39,32,228,95,39],"project\u002Fpositive\u002Fdesign",[131,39,33,230,132,39],"project\u002Fcritical\u002Fexecution",[216,39,39,232,11,33],"maker\u002Fneutral\u002Fexecution",[135,39,33,230,136,39],[139,39,33,230,132,39],[236,39,44,237,238,39],"34228343","project\u002Fneutral\u002Fexecution","spoils19",[83,39,39,232,11,33],[55,33,32,241,56,39],"project\u002Fpositive\u002Fidea",[191,33,39,243,192,39],"commenter\u002Fneutral\u002Fnone",[245,33,39,243,246,39],"34224959","sitkack",[248,33,39,243,56,39],"34229231",[175,33,44,250,176,39],"project\u002Fneutral\u002Fidea",[220,33,39,250,11,33],[209,33,39,253,210,39],"other\u002Fneutral\u002Fnone",[255,33,39,253,67,39],"34231159",[257,258,44,259,260,39],"34217734",2,"project\u002Fmixed\u002Fidea","lagrange77",[262,258,39,243,11,33],"34221082",[62,44,44,250,63,39],[52,44,39,250,11,33],[198,44,44,250,63,39],[152,38,33,230,153,39],[156,38,39,230,11,33],[66,32,32,228,67,39],[163,34,33,230,164,39],[271,213,32,272,273,39],"34225837","project\u002Fpositive\u002Fnone","idrios",[105,275,32,228,106,39],8,[115,277,32,278,116,39],9,"project\u002Fpositive\u002Fdocs",[145,18,33,230,146,39],[182,281,44,282,183,39],11,"project\u002Fneutral\u002Fnone",[284,281,39,282,11,33],"34224937",[286,281,39,253,132,39],"34225071",[288,281,39,253,289,39],"34226081","lloydatkinson",[70,291,32,272,71,39],12,[293,294,32,272,295,39],"34236451",13,"austinnguyen00",[123,297,32,228,124,39],14,[299,300,32,272,301,39],"34226339",15,"friedman23",[303,304,39,253,305,39],"34231164",16,"ShalaNo",[],[308,313,318,322,327,331],{"id":309,"name":310,"points":311,"category":312},"34196340","Pole Clock",440,"productivity",{"id":314,"name":315,"points":316,"category":317},"34237195","A device that only lets you type lol if you've truly laughed out loud",321,"hardware",{"id":319,"name":320,"points":321,"category":20},"34242275","Ov",181,{"id":323,"name":324,"points":325,"category":326},"34173761","elonman.com",149,"creative",{"id":328,"name":329,"points":330,"category":312},"34188734","RSS Brain",139,{"id":332,"name":333,"points":334,"category":312},"34172240","Pressn't",125,false,"v2",{"id":338,"name":5,"line":6,"ai":335,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":339,"top":18,"kw":340,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":341,"url":9,"mix":342,"praise":101,"objection":128,"sub":21},34214896,0.26,[24,25,26,27,28],"5101130500030003030310515551300055550",[18,32,33,34],1794036628986]