Show HN: Mafs – React components for interactive math | Hacker News Reader

Show HN: Mafs – React components for interactive math

mafs.dev

196 pointsstevenpetryk37 comments

Open articleView on HN

That's one beautiful website.

The code snippets colorscheme/nav/typography. Well done.

Edit: looks like it's using Tailwind.

But broken on my iPhone (tiny SE). Now I have to get off my butt to get my laptop to see it

Thanks for calling this out—I couldn't find anything when I tried emulating an SE. What's broken?

It seems like all interaction + scrolling is broken on the SE for me, although rendering and animations play.

Yes, as per blobcode’s comment - it’s a zero-interaction page for me. No scroll, no clicks.

Interesting that it's also using React - normally landing pages, even for React libraries, don't need the framework itself. Wouldn't a plain HTML / CSS site work better here, served from a robust backend?

It might work better in terms of bandwidth/performance, but developer experience was a priority (for myself) for me in this case.

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 work.

I've been curious about Manim for a while. Why are you looking for a replacement?

There is Manim and Manim.community [2], most development happens around community.

[2] https://www.manim.community/

I’ve used it for a few videos. But I find it pretty hard to use. It’s great if you are doing things that are covered by examples. But anything off the beaten track involves knowing about how it’s implemented.

I do like it - but don’t have the time to invest in understanding how it works under the hood.

It’s also quite slow (at least on my computer) - the feedback from making changes in the python code - to seeing results can often involve re-rendering the entire video.

@stevenpetryk do you see Mafs becoming a library supporting similar features to Manim?

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 visualizations at various levels of abstraction as concepts are elucidated.

[1]: https://ciechanow.ski/mechanical-watch/

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 all the pain points I ran into while using it. Feel free to check it out if you're interested!

https://github.com/ambrosiogabe/MathAnimation

I just so happen to be looking for a simple-enough morph/"magic move"-based animation software. This looks promising! Especially since I love the style of manim videos.

I love it, especially the vector field component is super cool!

Unfortunately i have to build sth. like that myself, because.

Of course, builders gonna build.

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 introduce mathematical concepts to her student. Are you approaching this from an educational perspective?

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 spiraled into a full blown thing. I kept getting impressed by the flexibility and accessibility of SVG.

I don’t really have a target audience, I just enjoy building it. As I add more examples I expose more weak spots or feature opportunities.

Regarding your SO, Mafs could be a good fit if she knows React, but if not, Geogebra is a fantastic WYSIWYG visualization editor. Mafs would have the cool benefit of being able to show the underlying logic to the student though :)

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 topic students are having difficulties with.

The underlying logic is good, but being able to visualize the topic and play with parameters is important as well. Thanks!

I wasn't expecting scaling the points by a some multiplier number for line through points example https://github.com/stevenpetryk/mafs/blob/main/src/display/L...

Doing some trigonometry to get the angles of the points and drawing lines from the svg edges could be a better approach

Yeah, you found some jank.

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 study some maths-related subjects.

It's great that it's a React component because that makes it very easy to use it to build interactive articles with something like MDX.

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 scroll the page?

I spent months learning d3js in my spare time, experimenting with plotly.js, hacking things together to try to make good looking interactive math demos for my crappy amateur React website -- and then just as I have things all mostly working you release this tool that has everything I wanted.

I'm furious. Beautiful work.

This is gorgeous. Very Reacty (Reacthonic?) API as well, which is nice.

Such a sweet library! It's nice to see examples so well laid out.

It's great! I just could not figure out how to zoom the chart / coordinate system with the mouse / touchpad. pinching and modifier keys did not work.

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?

That's all there is to it.

It’s also the acronym for a terrible reality show, and I hear people pronouncing it that way (as a word, not spelling it out)

https://www.youtube.com/watch?v=X09oxyIeGuY

Super cool! Will definitely be using this to explain mathematical concepts

Very nice library, hope that it can get more users in the future.

The `y={fn}` prop is neat

Amazing

Now

Reply on news.ycombinator.com