Show HN: MockRocket – 3D app mockups and animations in the browser

Show HN: MockRocket – 3D app mockups and animations in the browser(mockrocket.io)

75 points by dfeehrer 4 years ago | 30 comments

Hey HN,

I've spent a lot of time over the years building mockups and demo videos for my apps with tools like Photoshop and After Effects, always frustrated by how tedious it was.

For the past year and a half, I've been working on building a better way.

MockRocket makes it easy to show off your app, right from your web browser–no experience required. Choose a template, drag and drop a screenshot or video and display it on a realistic 3D device model. You can even animate it to create a video.

You can customize as much or as little as you want, and export in up to 4K resolution. All rendering is done in the browser, not on a server–using WebGL and WebAssembly–so your imported designs stay 100% private.

This is the first release! Please let me know if you have any feedback or questions!

chrisdalke 4 years ago |

I've been following Derek closely as he's been working for the past >1 year to make MockRocket a reality. Congratulations on the launch!

I saw a discussion on HN earlier today criticizing SPAs for offloading data processing to the user's machine, benefiting Facebook/Google/big tech at the expense of the user experience. I think that conversation sometimes misses the positive side of React/client-based apps.

MockRocket and other web-based creative tools demonstrate the strength of the web as an application platform, making complex tools more accessible and easily distributed than before. Derek's built a pretty slick editing & rendering experience that allows more people access to video editing, without having a powerful machine with a GPU. I'm incredibly impressed with the rendering fidelity he's been able to build into MockRocket and excited to play around with it more.

Another great application is https://www.photopea.com/ -- a pretty powerful photoshop competitor that also works exclusively in the browser. Looking forward to seeing more people build and distribute creative/technical tools that more people have access to.

dfeehrer 4 years ago | |

Thanks Chris!

Agreed–data processing on the user's device can certainly be abused in some cases, but when it's used right you can build some pretty amazing experiences with modern web APIs.

Closely following the development of WebGPU as well–I think that's going to enable a whole new class of web apps with serious graphics and compute power.

dannygarcia 4 years ago |

This is an awesome tool! I created my own promo in Blender for a personal site project* some time ago and it was a real pain getting the screen content to render accurately and contrast well off of the device. Do you have any concerns with consistency across different devices/GPUs since you're doing everything client-side? Nice to see the attention to detail you put into this.

* https://twitter.com/dannygarcia/status/1220401033064484864

dfeehrer 4 years ago | |

Here's my attempt at a quick recreation in MockRocket: https://twitter.com/DerekFeehrer/status/1486471488857378816

Definitely can't compete with those nice photorealistic reflections in Blender, but it's cool to see how close you can get with some of the other aspects in a pretty short amount of time!

2 devices + camera + laptop screen angle + depth of field blur, all animated in the same shot!

go_prodev 4 years ago | | |

Nicely done. If that genuinely only took you 25 mins, I'm really impressed

dfeehrer 4 years ago | |

That video–wow! I'd love to try to recreate that in MockRocket and see how close I can get!

There are definitely some trade offs with doing it client side and even some nasty graphics driver bugs across devices (especially Intel integrated GPUs) that have taken quite a lot of work to figure out. For the most part it's worked out though and renders have been pretty consistent, both in my testing and from what customers have shared with me.

I do actually have server rendering built as well, and may enable it down the road for certain use cases, but it's much more expensive, especially because it needs real GPUs on cloud instances and those are obviously in very high demand these days on AWS and GCP.

lpa22 4 years ago |

This looks simply amazing - I've been looking for an all-in-one way to create beautiful app mockups and noticed how tedious the whole process is so I will definitely be looking into this.

dfeehrer 4 years ago | |

Thanks for the kind words, I really appreciate it! If you have any questions or requests, free to ping me!

lpa22 4 years ago | | |

Just purchased the yearly - this was even better than advertised with being able to have video as media in addition to images. This is already better than many of the other options on the market I have tried. Excellent work. One question - I want to share my account login with my business partner, is there a way to share a login?

pabe 4 years ago |

This looks stunning! Some thoughts:

* I cannot buy on mobile ("made for desktop" message). I'll check back on Desktop but not everybody will do.

* It's not clear to me if the launch sale fixes the price "forever" or just for the first year.

dfeehrer 4 years ago | |

Thanks for the feedback!

Yeah I'm still working on figuring out some fallbacks for mobile browsers. It's especially tricky to render videos on mobile, both due to CPU/GPU constraints and due to some missing APIs–even Safari desktop is tough at the moment. But I hear you, I'll try my best to figure out a solution, even if it's just image exports to start.

The sale price does indeed fix the price, it's an 80% discount recurring for as long as you keep the subscription. I'll clarify that!

pabe 4 years ago | | |

I'd have bought already if I could checkout on mobile :) I went to pricing, "images & animations" package, "upgrade now" and then I got stopped out because I'm on mobile right now. Therefore, If I were you, I'd focus on getting the checkout to work on mobile.

bredren 4 years ago |

Cool product. Maybe I missed this, but do you currently or have plans to support video content for display on the devices?

For example, a video screencap of a mobile web page scrolling down. Or the interface changing due to a tap on a button.

dfeehrer 4 years ago | |

Yes, absolutely, you can currently upload videos to display on the screens. MP4, MOV and WEBM files all work!

I’m going to work on clarifying this on the landing page.

bredren 4 years ago | | |

That would be good. I did not notice it in the demo video either. This is a big feature so definitely call attention to it!

fernandorojo 4 years ago |

I've been using this myself. I'm a fan. I even got the pro tier after using the Figma plugin. Derek has been really helpful too in providing customer service when I hit him up.

ronyfadel 4 years ago |

The "Introducing MockRocket" looks great. I'm guessing you used a tool such as FCP? I'd love a tool that makes creating such videos easier.

dfeehrer 4 years ago | |

Thanks! Yeah that video was edited in Premiere Pro (and all the shots with mockups were of course rendered in MockRocket). There are actually some features on the roadmap to make it easier to create full product videos like this all from MockRocket!

jaywalk 4 years ago |

Very cool, and very reasonable pricing. Nice work!

dfeehrer 4 years ago | |

Thanks, glad to hear it!

CrazyRobot 4 years ago |

This looks great! just what I've been looking for. Will definitely give this a try over the weekend.

dfeehrer 4 years ago | |

Awesome, please let me know what you think when you try it out!

Zensynthium 4 years ago |

Jeeez this looks amazing! I can't wait to go home and try this!

sroussey 4 years ago |

Well done!

dfeehrer 4 years ago | |

Thanks!

dang 4 years ago |

Can you please email hn@ycombinator.com? I want to help you with this post.

Cilvic 4 years ago | |

Thanks for the hard work on moderating HN, I appreciate your down-to-earth and transparent approach. Can you share what you guys do to "help with posts"?

dfeehrer 4 years ago | |

Done!