The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
I’m kicking off a two‑part, step‑by‑step Rive guide on how I built Wavy Tiles, the interactive grid you may have seen me posting about lately.
https://www.linkedin.com/pulse/wavy-tiles-step-by-step-guide-rive-pt-1-mayte-cg-oijie/?trackingId=lF6f8PNhQCGOInKZ21pFfg%3D%3D
In Part 1, you’ll see:
● How to build the script‑driven grid and data model
● How to add the press‑and‑drag interactions
● How to add a rainbow color wash
● And how to work with a project_specs doc, a workflow trick I’ve been experimenting with
If you’re starting out with Rive scripting, this one's for you.
Stay tuned for Pt 2, where we’ll connect custom artboards to the grid, and I’ll break down how I built my eyeball design, including the pupil dilation and gaze animations 👁️
Happy Scripting!
linkedin.com
Wavy Tiles: A step-by-step guide in Rive (Pt. 1)
Welcome back! In this two‑part guide, I’ll walk you through the full process of building my project Wavy Tiles in Rive: an interactive grid of tiles that react to pointer input with translation, rotation, scale, and color effects, resulting in a slightly trippy and weirdly satisfying result. In Part
good work.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
For Chargee, a mobile app designed to help people use energy more mindfully and strategically, I created a set of interactive
Rive animations illustrating various energy-use scenarios for both the home
and the car.
Each animation was designed to make complex energy concepts feel clear,
intuitive, and engaging through playful visual storytelling.
Every scenario is fully interactive. The animations are powered by Rive
State Machines and variables, allowing the visuals to dynamically respond to user interactions and app logic.
These animations turn abstract energy data into something users can see, understand, and interact with.
The graphic assets, visual elements, and detailed requirements for each
energy-use scenario were provided by the client.
My role was to bring these concepts to life through engaging,
responsive Rive animations, transforming the provided visuals and specifications into interactive experiences that work seamlessly within the app.
Simple UI. Better interaction. Make It Alive!
Static icons switch. Just set the state machine accordingly and you are ready!
Good UI motion transforms. A simple arrow → menu interaction built in Rive. Small detail. Big difference in how an interface feels.
Available for custom Rive & UI motion work.
Built a 3D model viewer inside @Rive .
Not a plugin, not an embed — an actual glTF renderer running on @Rive 's GPU Canvas, written in Luau and WGSL, living inside the .riv file.
Drop in a .glb and it loads, lights, animates and orbits. Every control is a data-bound property, so the whole scene is drivable from a state machine, a timeline, or app code. Nothing is hardcoded to one model.
What's in it:
• glTF parsing written from scratch — Luau has no JSON library, so the decoder is hand-rolled
• PBR shading (Cook-Torrance GGX) with key/fill/rim lighting
• Skeletal skinning, 128-joint palette
• Rigid node animation with full keyframe interpolation
• Orbit camera with per-axis locks
• Auto-fit, so any model frames correctly regardless of authored scale
• ~40 data-bound properties: camera, transform, material, animation
Most of it was built by driving the Rive editor over its MCP server with Claude Code — scripted, not clicked.
Runtime support is nearly there. GPU Canvas landed in the web runtime last week. A couple of scripting APIs still need to follow before this can ship to a live site.
Here is the Github Repo for Instructions: https://lnkd.in/dAMXQJBR
the 3D viewer is so cool. nice work!