Show HN: I made a no-code tool to create animated technical papers(textframe.app)
textframe.app
Show HN: I made a no-code tool to create animated technical papers
https://textframe.app/examples/bitcoin
65 comments
Please ignore all the comments where people are hung up on the 'technical papers' bit. This is great and you should be proud of what you've made. It is under no obligation to fulfill the expectations of a previous generation of media for one specific use case. I think a lot of people resort to slide decks to accomplish what you've built and IMO this is better.
Hi Rahul, here is some critique as a user / reader:
- While I was reading (left column), the image (right column) changed but I did not catch it, since my focus was on the left column
- Sometimes when I was reading and the image changed, I was not sure which part of the reading section the new image referred to.
- Due to the 2 above things, I had to do a lot of left and right eye movements with every scroll of the mouse wheel.
Now, I am not sure of the best solutions for the above problems, but just wanted to bring these "user experience" challenges to your attention.
Nice work!
- While I was reading (left column), the image (right column) changed but I did not catch it, since my focus was on the left column
- Sometimes when I was reading and the image changed, I was not sure which part of the reading section the new image referred to.
- Due to the 2 above things, I had to do a lot of left and right eye movements with every scroll of the mouse wheel.
Now, I am not sure of the best solutions for the above problems, but just wanted to bring these "user experience" challenges to your attention.
Nice work!
Really cool, but the examples don't work well for me. One scroll step with my mouse on Windows is enough to scroll past some of the intermediary animations. A lot of information is lost because of that. I have to slowly drag the scrollbar with my mouse to view all animations.
Another thing that has been pointed out is that this needs to degrade gracefully for PDFs and printed media.
Another thing that has been pointed out is that this needs to degrade gracefully for PDFs and printed media.
"this needs to degrade gracefully for PDFs and printed media."
It does not. I can't remember the last time I printed out a tutorial video. Just because this media describes itself as 'animated technical papers' does not mean it should behave like dead-tree or static pdf technical papers any more than 'motion pictures' should behave like tintypes.
It does not. I can't remember the last time I printed out a tutorial video. Just because this media describes itself as 'animated technical papers' does not mean it should behave like dead-tree or static pdf technical papers any more than 'motion pictures' should behave like tintypes.
I guess it depends on your view of a technical paper. But I guess we can both at least agree that it would be useful to have graceful degradation, right? It allows for the ability to easily share it across multiple mediums.
There's a lot of information happening and there's a huge chance I might miss something because the scroll animation is quite sensitive but I'm really amazed by the idea.
nice idea but I think not knowing exactly when the animation will change is really a negative. it's fine if you are reading and scrolling slowly in a linear manner, but whenever you want to do other things like jump 3 sentences etc. it becomes confusing for me. I see that you put visual indicators on the left of the text whenever theres an animation,but maybe a better idea would be to put permanent indicators so the reader knows where are these animations are triggered.
Technical frills are nice and all, but I wish some effort would be put into degrading gracefully. It's impossible to print this paper, for example.
I work in a company with a "no-print" policy, so that doesn't matter to me. I guess there is a question of how it works for, say, blind people but most of our diagrams already have that problem. If this makes the diagram easier to understand for a wider audience, then perhaps this actually helps accessibility.
What a weird policy? Why do they do this? Nothing beats paper for understanding something difficult for me, at that point technology is a distraction.
A lot of the documents contain highly sensitive data. There have been too many incidents of printed docs left on trains, thrown out in the rubbish, etc. That being said, you're not going to be use a third-party system like this to draw such diagrams. But there is definitely a use case for animated diagrams in such documents.
Ok that makes sense.
Technical papers are fairly often printed. It's not a leisure read that you skim through once for the entertainment. You typically need to make margin notes and cross reference other papers a fair bit to actually get any value out of them.
some technical papers, not all.
I would say most technical literature. Sure there are rare unicorns like Richard Feynman who manage to be geniuses in both communication and science, but even in those cases you need to read carefully and repeatedly to make the most of the text. If anything, it's a danger that you stop paying attention because it's so superficially readable.
I for one really like this. Great work, and I would absolutely use (and pay for) this once it gets a bit more mature!
Hi HN,
My name is Rahul Sarathy and I created TextFrame, a no-code platform to create animated written content. I've linked an example here where I use TextFrame to animate the Bitcoin white paper.
You can check out more examples are https://textframe.app/examples
If you're interested, feel free to sign up and play around with the software.
My name is Rahul Sarathy and I created TextFrame, a no-code platform to create animated written content. I've linked an example here where I use TextFrame to animate the Bitcoin white paper.
You can check out more examples are https://textframe.app/examples
If you're interested, feel free to sign up and play around with the software.
I can see how this would be really useful to better explain technical content and make long form content more engaging.
You could have just made that sentence part of your pitch, instead of attempting this little scam where you pretend that you're a different person. Next time, perhaps use an account with a different last name, or one that made a comment more recently than 2012. Or maybe just sell the community on the merits of your product, instead of trying to scam them at all.
Please don't be an aggressive jerk on HN. The damage it does to community far outweighs any benefit it has, no matter how in the right you are, or feel you are.
It's true that booster comments aren't helpful in the end, but people often post them without the slightest idea that they're doing anything wrong. They don't deserve to be piled on. Also, vsarathy didn't upvote this submission; that's not the mark of a typical manipulator. The benefit of the doubt would have gone a long way here!
https://news.ycombinator.com/newsguidelines.html
It's true that booster comments aren't helpful in the end, but people often post them without the slightest idea that they're doing anything wrong. They don't deserve to be piled on. Also, vsarathy didn't upvote this submission; that's not the mark of a typical manipulator. The benefit of the doubt would have gone a long way here!
https://news.ycombinator.com/newsguidelines.html
I've had this HN id since 2012 and I can assure you that I am not the author of this post. I am related to Rahul though - he's my son.
This is almost always how it is sadly. Either this or you have to know someone that can submit it for you etc. It’s sad but it’s how it is.
That's not true! Of course it can be frustrating to try to get attention when so many other things are competing for it, and when randomness plays a large role. But it's simply not the case that most things make the front page as a result of vote manipulation, or similar things.
I think part of this is due to the way sometimes ycombo endorsed projects can get special treatment, and sometimes come pre-loaded with canned comments that all show up at once. (There is one on the front page right now that I suspect is up to something like this). Perhaps that can be worked on from the HN-side to make a better appearance that all submissions are treated equally.
We need to make some clear distinctions here! You're partly right and partly wrong, and it's important to understand how.
Launch HNs (and also job ads) for YC startups are special mechanisms that get special front page treatment. This is in the FAQ: https://news.ycombinator.com/newsfaq.html#yc. In that sense, but only in that sense, submissions are not treated equally. We do those things so HN gives something back to YC in exchange for funding it. That's important for a balance of giving and taking, and for HN's long-term future. I believe the bulk of the community understands this and is ok with it.
The important thing to understand is that these are specific, clear exceptions to HN's general practices. Other than that (plus orange usernames for YC alums), there are no such exceptions. In particular, what you describe here is absolutely not ok:
> sometimes come pre-loaded with canned comments that all show up at once.
We tell all HN users, including all YC founders, never to do that. Not only that, but I tell YC founders that it's the fastest way for them to get flagged and flamed by this community, and that there will be little we can do to salvage their thread if it happens. Basically I try my best to terrorize them about this. You'll notice that it's the only bold text in the Launch HN instructions: https://news.ycombinator.com/yli.html. It's also one of the few things that appear both in the FAQ (https://news.ycombinator.com/newsfaq.html: "Can I ask people to comment on my submission?") and in the site guidelines (https://news.ycombinator.com/newsguidelines.html: "Don't solicit upvotes, comments, or submissions"). The rules are clear and they're the same for everybody*.
> There is one on the front page right now that I suspect is up to something like this
What is the link? Even when non-YC startups or projects do this, I often tell them not to and explain why it's not in their interest.
* That doesn't mean we automatically ban people for breaking them; there's a gradient of punishment. A lot of the time people have no idea that they're breaking rules or local conventions. That's different from hardened manipulators trying to game the site, people buying upvotes or comments from spammers (<-- do not! that will get you banned!), and so on.
Launch HNs (and also job ads) for YC startups are special mechanisms that get special front page treatment. This is in the FAQ: https://news.ycombinator.com/newsfaq.html#yc. In that sense, but only in that sense, submissions are not treated equally. We do those things so HN gives something back to YC in exchange for funding it. That's important for a balance of giving and taking, and for HN's long-term future. I believe the bulk of the community understands this and is ok with it.
The important thing to understand is that these are specific, clear exceptions to HN's general practices. Other than that (plus orange usernames for YC alums), there are no such exceptions. In particular, what you describe here is absolutely not ok:
> sometimes come pre-loaded with canned comments that all show up at once.
We tell all HN users, including all YC founders, never to do that. Not only that, but I tell YC founders that it's the fastest way for them to get flagged and flamed by this community, and that there will be little we can do to salvage their thread if it happens. Basically I try my best to terrorize them about this. You'll notice that it's the only bold text in the Launch HN instructions: https://news.ycombinator.com/yli.html. It's also one of the few things that appear both in the FAQ (https://news.ycombinator.com/newsfaq.html: "Can I ask people to comment on my submission?") and in the site guidelines (https://news.ycombinator.com/newsguidelines.html: "Don't solicit upvotes, comments, or submissions"). The rules are clear and they're the same for everybody*.
> There is one on the front page right now that I suspect is up to something like this
What is the link? Even when non-YC startups or projects do this, I often tell them not to and explain why it's not in their interest.
* That doesn't mean we automatically ban people for breaking them; there's a gradient of punishment. A lot of the time people have no idea that they're breaking rules or local conventions. That's different from hardened manipulators trying to game the site, people buying upvotes or comments from spammers (<-- do not! that will get you banned!), and so on.
Wow, @bryans, open mouth, insert foot.
Please don't pile on with further nastiness. It helps nothing.
https://news.ycombinator.com/newsguidelines.html
https://news.ycombinator.com/newsguidelines.html
Congrats ! I think you should make sure an animation stops before the next one starts, or something similar. I am a burst scroller (read the full page, then scroll), and sometime I have to be very careful about how much I need to scroll to not trigger 2+ animations at the same time. Maybe an indicator somewhere the show where animations would happen so that I can control my scroll ?
Very cool. I was impressed with the no-code aspect - especially for WYSIWYG based tech writers.
Have you considered integrating with DocFX, Jekyll, Read The Docs and the ilk. I'd think for a lot of Tech Docs where we have a ton of flow diagrams, would be interesting.
Have you considered integrating with DocFX, Jekyll, Read The Docs and the ilk. I'd think for a lot of Tech Docs where we have a ton of flow diagrams, would be interesting.
This is awesome!
I also recommend Idyll, a JS / React framework for creating scrollables:
https://idyll-lang.org/docs
I am a backer in the open collective :]
I also recommend Idyll, a JS / React framework for creating scrollables:
https://idyll-lang.org/docs
I am a backer in the open collective :]
Thanks for sharing!
This looks super cool. Will definitely look towards some of the examples here as features I can implement.
This looks super cool. Will definitely look towards some of the examples here as features I can implement.
I found the Bitcoin paper example to be very compelling - really awesome work! You have a great eye for design.
I signed up and liked the familiar Notion-style interface, however I had some difficulty figuring out how to create the same caliber of animations as your examples, and get them to sync up correctly with the text - would be nice to get a bit more help when opening the animation editor for the first time.
Edit: also not able to delete blocks and re-order, and I am still trying to figure out the controls to switch between editing different animation steps.
I signed up and liked the familiar Notion-style interface, however I had some difficulty figuring out how to create the same caliber of animations as your examples, and get them to sync up correctly with the text - would be nice to get a bit more help when opening the animation editor for the first time.
Edit: also not able to delete blocks and re-order, and I am still trying to figure out the controls to switch between editing different animation steps.
Thank you!
And yes, the editor view is not fully intuitive unfortunately. You can delete blocks similar to how you delete blocks in notion - dragging a rectangle over them.
If you are having trouble creating content for an idea you have, feel free to email me at [email protected]. I can help you figure out any other issues you have.
And yes, the editor view is not fully intuitive unfortunately. You can delete blocks similar to how you delete blocks in notion - dragging a rectangle over them.
If you are having trouble creating content for an idea you have, feel free to email me at [email protected]. I can help you figure out any other issues you have.
Awesome, I actually figured out how to use the animation editor by making multiple animation blocks in a row. Once I figured you could copy/move shapes/text/etc from previous animation blocks to the current frame, it made perfect sense and I can now see the full utility of this. I'll keep playing around and email you if I make anything interesting :)
This is a really interesting and deceptively simple idea. "Animate technical papers" seemed (to me) like a silly concept as a one-liner, but the example really does the media format justice and totally changed my mind - why hasn't this been done before!
Well done Rahul!
Well done Rahul!
Super impressive Wysiwyg editor. Which part of the product did you build first? Did you build an example output page first the the editor, or did you start from the editor itself?
Thank you!
Started with the editor view itself, and then built the final output page afterwards.
Started with the editor view itself, and then built the final output page afterwards.
I like the approach and it looks cool, but you might struggle with the target market here.
Most people reading technical papers care absolutely zero about the animations in between the diagrams and figures.
For example, the Bitcoin whitepaper animations probably bring no value, and I personally would prefer to rather read the PDF version of that.
With that in mind, you may still be on to something, but I suspect there needs to be another value proposition here that perhaps you haven't identified yet.
Most people reading technical papers care absolutely zero about the animations in between the diagrams and figures.
For example, the Bitcoin whitepaper animations probably bring no value, and I personally would prefer to rather read the PDF version of that.
With that in mind, you may still be on to something, but I suspect there needs to be another value proposition here that perhaps you haven't identified yet.
I strongly disagree. I like reading technical papers but I'm not smart enough for them. I'd draw lots of sketches for math class, architecture, algorithms. I've actually been running technical papers through GPT-3 to try to simplify parts before reading them.
I heavily disagree with this. I went through the example papers on the website and found that the animations made a huge positive impact on my experience. While people who prefer non-animated versions of papers can read them already, something like this could help a lot of people who generally may get bored or have an aversion to reading long static text.
If in your paper you are going to try and explain abstract concepts in words and expect the reader to visualise things in their head, why not make it easier by dynamically rendering it out alongside the paper?
I think this is a very cool innovation in an area that is pretty old (research papers), and something that with a proper go-to-market strategy could end up having wide adoption.
If in your paper you are going to try and explain abstract concepts in words and expect the reader to visualise things in their head, why not make it easier by dynamically rendering it out alongside the paper?
I think this is a very cool innovation in an area that is pretty old (research papers), and something that with a proper go-to-market strategy could end up having wide adoption.
That is because the target market usually shuns technical papers, because the tool didnt exist previously.
This is for the Projectlead who sends you links to papers, to do "research" for him and wants it visualized in a presentation.
Now he does not need you to be his eyes and explaining things in layman terms. Actually i could see this standardized and partially auto-generated for math-papers.
This is for the Projectlead who sends you links to papers, to do "research" for him and wants it visualized in a presentation.
Now he does not need you to be his eyes and explaining things in layman terms. Actually i could see this standardized and partially auto-generated for math-papers.
I do not think this is possible to do in LaTeX, which is typically used in science and math papers.
and thus will reinvent the wheel - instead of simply including executable javascript into the pdf
All things become browsers given enough time..
All things become browsers given enough time..
I'm a bit more positive: it might help to engage less technical readers, a bit like the popular science magazines. It does depend on how good your text and animations are, though: it takes a lot of time and effort to communicate in this style to laymen, which would make this service very niche.
But one of the picture is not accurate. In BTC users do not vote on which chain to keep!
This is great!
Even more so, because it might be a glimpse of a 'next-gen' PDF format.
PDF can include vector graphics. In the same way that SVG encompasses both static and animated images, there's no reason why similar graphics in a 'PDF-next' document shouldn't be animatable, with a fall-back to static images for printed output...
The next step would be to get together with Adobe/Apple/Microsoft and convene a panel of experts to thrash out the details ;-)
Even more so, because it might be a glimpse of a 'next-gen' PDF format.
PDF can include vector graphics. In the same way that SVG encompasses both static and animated images, there's no reason why similar graphics in a 'PDF-next' document shouldn't be animatable, with a fall-back to static images for printed output...
The next step would be to get together with Adobe/Apple/Microsoft and convene a panel of experts to thrash out the details ;-)
This is actually a really nice idea. In my current gig we write technical documentation (before implementing) that has both words/sentences and visuals in it. My co-workers have to approve the document before I (or somebody else) implements it. This would be a really great way to read such documents.
Hi rkuska, that's an interesting use case I'd really like to explore.
Do you mind emailing me at [email protected]?
Would love to see if I could help you and your co-worker's workflow at all.
Do you mind emailing me at [email protected]?
Would love to see if I could help you and your co-worker's workflow at all.
This is incredible! I spend a lot of time thinking about how reading can be enhanced with visual aids for language learning, and am in the process of building something similar for visual story telling. I absolutely love how you’ve managed to make the visual content feel so fluidly combined with the text!
Super impressive, and inspiring for my own pursuits :)
Super impressive, and inspiring for my own pursuits :)
Thank you!
It's always good to see more people building interactive learning content. Feel free to email me at [email protected] if you want to chat.
It's always good to see more people building interactive learning content. Feel free to email me at [email protected] if you want to chat.
Thumbs up. Enjoyed the demo.
As someone who reads technical papers and is a visual learner, I enjoyed this demonstration a lot. I'd imagine website/webapp-based electronic textbooks favoring this format.
As someone who reads technical papers and is a visual learner, I enjoyed this demonstration a lot. I'd imagine website/webapp-based electronic textbooks favoring this format.
Love it. Personally I would love a slightest bit of resistance while I scroll to the next page or animation pane. The fluidity is kinda weird to me.
Yeah, like in the bitcoin one it's a bit too much - like if I am reading at a normal rate the diagrams are just freaking out to the right.
And I would normally scroll to the full next page rather than scroll to each paragraph, which also then means you skip the animations.
Also the text is really weirdly formatted in the bitcoin paper - like lots of paragraphs that are only half a sentence.
Also a lot of the diagrams don't mean much, like the bitcoin one has "1 CPU is 1 vote" in the text, and then the diagram is an image of a CPU and an arrow to some text that says 1 vote. For me, the diagrams are supposed to add something, and this just says the same thing twice.
Apologies if this is a bit critical as the tool looks like a lot of thought has gone into it, but the examples given don't give me a good reading experience in the style that I personally read. For examples of this done well, there is this site: https://distill.pub/2020/communicating-with-interactive-arti... but the common thread here is that the diagrams and images add to the text rather than repeat it.
And I would normally scroll to the full next page rather than scroll to each paragraph, which also then means you skip the animations.
Also the text is really weirdly formatted in the bitcoin paper - like lots of paragraphs that are only half a sentence.
Also a lot of the diagrams don't mean much, like the bitcoin one has "1 CPU is 1 vote" in the text, and then the diagram is an image of a CPU and an arrow to some text that says 1 vote. For me, the diagrams are supposed to add something, and this just says the same thing twice.
Apologies if this is a bit critical as the tool looks like a lot of thought has gone into it, but the examples given don't give me a good reading experience in the style that I personally read. For examples of this done well, there is this site: https://distill.pub/2020/communicating-with-interactive-arti... but the common thread here is that the diagrams and images add to the text rather than repeat it.
Yes, you're definitely right. I was trying some hacks with css scroll-snap, but wasn't able to get anything functional.
If anyone has any input on how I could add more resistance to the scrolling, I would greatly appreciate it!
If anyone has any input on how I could add more resistance to the scrolling, I would greatly appreciate it!
Nice idea. We need more tools to build various explainers. Ideally, embeddable.
I like the idea, but as someone who might use this type of tool, you need to say somewhere fairly early on that there is a way for me to download my "paper" and host it myself.
I'd never start putting significant work into writing a paper, or book, on a platform which might close and take all my work & animations with it.
I'd never start putting significant work into writing a paper, or book, on a platform which might close and take all my work & animations with it.
That's definitely something I've been thinking about. I'm currently working on a feature to export to static HTML.
One system which works really well for this (for me) is slides.com
Paid accounts can sync to Dropbox, and the files in Dropbox are enough for me to view my presentations -- I wouldn't necessarily want to edit them (although I could, it's HTML), but I know even if slides.com shut down tomorrow I'd have the files.
Paid accounts can sync to Dropbox, and the files in Dropbox are enough for me to view my presentations -- I wouldn't necessarily want to edit them (although I could, it's HTML), but I know even if slides.com shut down tomorrow I'd have the files.
Very cool tool. Great not just for papers, but websites too to explain how tools work for example