Built with Rive

Interactive Landing Page Hero

David Akanbi

From Static to Alive — Animating CodeGuide’s Landing Page Hero on Rive

📍How It Started

Saw Mark Vassilevskiy’s tweet
“Did I cook here?”
And he did. The layout? Super clean. Copy? Sharp. Visual hierarchy? Nailed.
But to me, the landing page looked a bit static. So I decided to remix it a little and make the hero section move using Rive.
View post on X

📍My Goal

Just one🤩
Make the hero section fun and alive without losing the clarity of the original design.

🛠 My Process

Part 1: Rebuild

I started by isolating the hero section from the screenshot
Recreated the key layout in Figma
Focused on the elements around the “AI Documentation” wheel that was the star

Part 2: Motion Plan

In Rive, I began prototyping motion around the central spinner
I imagined it like a living engine — turning project ideas into smart docs

Part 3: Micro Interactions

Animated the project selector: “I want to build a mobile app”
Gave the connecting lines a smart flow
Icons like Replit, Claude, etc., got soft float states like they’re part of a bigger system working together
View post on X

🎥 Final Output

All of this came together in Rive:
A looping, responsive, AI-inspired hero section that feels way more alive than the static concept.

For Partnership And Collaboration

Whether you’re building a new product or refining an existing product, Let's lcollaborate and ship your idea to life
Like this project

Posted Jun 21, 2025

Animated CodeGuide's landing page hero section using Rive for a dynamic effect.

Betzgram WebApp
Betzgram WebApp
Interactive Character Animation in Rive
Gigcle - Quest To Earn Platform
Gigcle - Quest To Earn Platform

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc