ORBIT: Interactive Hero Concept (Motion-First Landing Page) ORBIT is an interactive landing page hero concept built to show how motion can make a website feel alive without slowing it down.

What’s inside:

Cursor-reactive hero: floating cards, labels and glow move at different depths as the cursor moves.

CTA button states: hover lift, press squeeze with ripple, and a success morph with particles and a toast.

Dashboard cards: staggered entrance with count-up numbers, animated bars, a progress ring and a drawing line chart.

Interactive feature icons: each icon has its own idle, hover and active animation.

Smooth transitions: eased modal, toast and scroll, with reduced-motion support.

Mobile-friendly: responsive grid, touch taps, no sideways scroll from 360px to 1920px.

I tested all of the above with an automated suite (20 checks, all passing) and made a 45-second demo video with sound design.

Built with: HTML, CSS and JavaScript as a working prototype.

Need this in Rive? The same motion and interaction logic (hover, press, success states, cursor-driven movement, icon states) can be rebuilt as a production-ready Rive animation with a state machine and integrated into your website. Message me with your requirements and I’ll share a timeline and quote.

the press squeeze with the ripple is the detail i keep replaying

A landing page concept created for a fictional digital product business. The design focuses on clear messaging, strong visual hierarchy, intuitive navigation and strategically placed calls to action. The project demonstrates how thoughtful UI design can communicate value and guide users towards a desired action.

Deliverables: Hero section, feature sections, testimonials layout, CTA sections and responsive mobile concept.