5 ms·

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

75 points by dfeehrer 5y ago

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!

deleted 5y ago
[deleted]
dang 5y ago
Can you please email hn@ycombinator.com? I want to help you with this post.
- dfeehrer 5y ago
  Done!
- Cilvic 5y 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"?
deleted 5y ago
[deleted]
lpa22 5y 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 5y ago
  Thanks for the kind words, I really appreciate it! If you have any questions or requests, free to ping me!
  - lpa22 5y 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?
    - dfeehrer 5y ago
      Thanks so much! I definitely need to show more examples with videos on the screens. Currently there's not a great way to share accounts with multiple users other than to buy another account or share your email, but I do plan to add more team collaboration features down the road, especially once I allow people to save projects as templates to use again (soon!). But if you'd like to change the email on the account to something easier to share we can make that happen, just shoot me an email or chat with the details. (In the future I may also look at selling these accounts explicitly as limited to a certain number of seats, but for now it's all good if you want to share with your business partner, and you'd be grandfathered in if change things later).
pabe 5y 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 5y 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 5y 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.
CrazyRobot 5y ago
This looks great! just what I've been looking for. Will definitely give this a try over the weekend.
- dfeehrer 5y ago
  Awesome, please let me know what you think when you try it out!
jaywalk 5y ago
Very cool, and very reasonable pricing. Nice work!
- dfeehrer 5y ago
  Thanks, glad to hear it!
sroussey 5y ago
Well done!
- dfeehrer 5y ago
  Thanks!
chrisdalke 5y 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/ 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 5y 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.
bredren 5y 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 5y 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 5y 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 5y ago
      Agreed, I would put this on the landing page. Was a big sell to me.
dannygarcia 5y 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 https://twitter.com/dannygarcia/status/1220401033064484864
- dfeehrer 5y 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.
- dfeehrer 5y ago
  Here's my attempt at a quick recreation in MockRocket: https://twitter.com/DerekFeehrer/status/1486471488857378816 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 5y ago
    Nicely done. If that genuinely only took you 25 mins, I'm really impressed
ronyfadel 5y 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 5y 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!
Zensynthium 5y ago
Jeeez this looks amazing! I can't wait to go home and try this!
fernandorojo 5y 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.

75 points by dfeehrer 5y ago

deleted 5y ago

[deleted]

dang 5y ago

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

dfeehrer 5y ago
Done!
Cilvic 5y 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"?

deleted 5y ago

[deleted]

lpa22 5y 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 5y ago
Thanks for the kind words, I really appreciate it! If you have any questions or requests, free to ping me!
- lpa22 5y 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?
  - dfeehrer 5y ago
    Thanks so much! I definitely need to show more examples with videos on the screens. Currently there's not a great way to share accounts with multiple users other than to buy another account or share your email, but I do plan to add more team collaboration features down the road, especially once I allow people to save projects as templates to use again (soon!). But if you'd like to change the email on the account to something easier to share we can make that happen, just shoot me an email or chat with the details. (In the future I may also look at selling these accounts explicitly as limited to a certain number of seats, but for now it's all good if you want to share with your business partner, and you'd be grandfathered in if change things later).

pabe 5y 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 5y 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 5y 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.

CrazyRobot 5y ago

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

dfeehrer 5y ago
Awesome, please let me know what you think when you try it out!

jaywalk 5y ago

Very cool, and very reasonable pricing. Nice work!

dfeehrer 5y ago
Thanks, glad to hear it!

sroussey 5y ago

Well done!

dfeehrer 5y ago
Thanks!

chrisdalke 5y 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/ 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 5y 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.

bredren 5y 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 5y 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 5y 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 5y ago
    Agreed, I would put this on the landing page. Was a big sell to me.

dannygarcia 5y 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 https://twitter.com/dannygarcia/status/1220401033064484864

dfeehrer 5y 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.
dfeehrer 5y ago
Here's my attempt at a quick recreation in MockRocket: https://twitter.com/DerekFeehrer/status/1486471488857378816 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 5y ago
  Nicely done. If that genuinely only took you 25 mins, I'm really impressed

ronyfadel 5y 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 5y 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!

Zensynthium 5y ago

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

fernandorojo 5y 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.