Earlier this year, I created an interactive post-apocalyptic-themed landing page for Grammy Award-winning, multi-platinum metal legends Megadeth! It serves as the signposting for their exclusive digital all-access pass and includes a bunch of easter eggs inspired by the band's lore. Built with Rive 🤘🏻

Big props to @rossplaskow, @philterdesign, @lances_art for helping out with some quirks I had with the scroll constraint and responsive scroll for mobile devices! Thanks dudes! 🤘🏻

Check it out from @MegadethDigital 🤘🏻💀🤘🏻

@Megadeth 👀

@rive_app @Megadeth This is incredible How long did it take you to do this Ashley?

@rive_app @Megadeth Thanks Mark! It took a fair while to illustrate! The interactive elements were pretty fun to put together, I ran into some issues with Rive's scroll constraint, but the Rive team went above and beyond to help me solve the problems!

@Blondie23LMD @Megadeth Very cool 🔥

@Megadeth Hey, Ashley! Any interest in being interviewed about this project for the @rive_app blog?

@Megadeth @rive_app Absolutely! I’ll send you a DM! 🙂

@Megadeth Great job on the Rive work! It's for creating interactive maps. 😍

@Megadeth How did you illustrate these elements? In rive only? Btw, this is so dope 💯😍

Thank you Yash! It was a mixture of tools used, really. I mostly illustrated in Adobe Illustrator, since I could use custom scripts to quickly convert flat shapes into isometric projection. I also wanted to apply things like 'roughen' on all of the line work to give it a slightly hand drawn feel. Some elements were illustrated inside Rive (usually elements that I knew I wanted to keyframe the paths of), then some elements; textures, backgrounds etc sourced from photographs or generated with AI and layered in using Photoshop. The map is one huge image, and then a lots of vector shapes layered over the top in Rive. Rive's vector feathering was released at exactly the point where I was trying to figure out how to do all the fire and lightning, so that was a very exciting announcement when I saw it!

@Megadeth @rive_app that's a hell lot of work man 🫡, saw such thing mde first time in Rive, keep producing such stuff man, you're an inspiration 🤩

@Megadeth

@Megadeth Thanks Oleg! 🫡

@Megadeth This looks really good. How long did it take to complete?

@sting_animation @Megadeth Thanks Sting! It was a bit stop-start over a few months, but I think I clocked around 15 days.

@airnanan @Megadeth Really?! All with rive? Very interesting. What is the mobile consideration for the site? Full experience? Request desktop 🖥️

@airnanan @Megadeth A lot of the illustration was brought in as a combination of flattened raster and vector files, some were drawn inside Rive. But all of the interactions and logic was done in Rive. The mobile logic took some work, but we got there in the end!

@Megadeth I looked around this the other day. Love it. Makes me want more Lyke Island.

@Megadeth Thanks Snoopy, makes me want to make Lyke interactive!

@Megadeth Sick

@Megadeth this looks great man

@Megadeth Thanks Alex 🙌🏻

@Megadeth pal active af rn

@Megadeth 🤘💀🤘

@Megadeth

@Megadeth So cool!! I was drooling over this earlier in the year when I came across it

@Megadeth Haha, thanks g! 🤤

@Megadeth Dude that sounds straight fire! I've been experimenting with similar ideas, just in a sci-fi setting. How'd you get the Megadeth team on board

@Megadeth This is insane! I’m studying Rive data binding for interactive pages could you share any resources or how you approached the state machines?

Thanks Yuva! This particular example was almost finished as data binding was being released, so it doesn’t use it! To be honest I’m also still getting to grips with it myself! I find the YouTube tutorial series really useful, but there’s also a lot of detail in the documentation. But I agree, more data binding resources would be great!

@Megadeth Hi Ashley! Thanks for sharing this, super inspiring. If possible, could you name the YouTube channels you found most helpful or share the specific tutorial links? It would really help me and others learning Rive data binding and state machines.

@Megadeth This playlist is a must! If you're like me you might need to watch them all multiple times!

@Megadeth Awesome, thanks Ashley! If you come across any other related tutorials, please do share, would love to dive in.

@LykeIsland @Megadeth like.