Building a sleek, engaging landing page to inspire and guide young AI enthusiasts through the GeoAI Hack experience.
Case Study
A Beautiful Event Registration Experience
Design Engineering
Brand Identity Design
08
2022
The landing page had to do two jobs at once: sell GeoAI Hack to first-time AI builders and move them into registration without friction. There was no existing design language, so I started from brand identity and built outward , a visual system, a component library, and the page itself. The bet was that one small set of reusable components could carry an expressive, motion-heavy treatment while staying consistent and fast.
I started from the brand , type, color, and a motion language , then built the component library from scratch: buttons, cards, form controls, and section layouts, each scoped so the whole page composed from a small, consistent set.
From there I assembled the page with scroll-driven animation, a refractive glass hero, and layouts tuned per breakpoint. Motion was used to pace the story and point attention at the call to register, not as decoration.
The page is built around one action: register. Each section answers a question a prospective participant actually has , what it is, who it’s for, why join, what’s on the schedule.
A clear information hierarchy and interactive cues keep that path obvious from the first scroll, so curiosity converts instead of stalling halfway down the page.
Every element shipped as a reusable, typed component rather than a one-off, so the site can take on a new edition, sponsor, or section without a rebuild. Content is separated from layout, which means updating the program, guests, or awards is a data change , not a design pass.
The hero centers on a refractive glass object built with React Three Fiber , transmission, IOR, and chromatic aberration tuned by hand until it read as real glass rather than a generic shader.
Scroll-linked transitions and micro-interactions carry the pace of a hackathon, while the heavy visuals are deferred and motion respects reduced-motion preferences , so the page stays fast and accessible on first load.
Every screen composes from the same component set and brand system , one page, many sections, a single consistent language from the hero through to the registration form.
The page shipped as the event’s front door , a consistent component system carrying an expressive, motion-driven design without giving up speed or clarity. It made registration the obvious next step, and because everything is built from reusable parts, the same system can carry the next edition of GeoAI Hack with a content update instead of a redesign.