Building Attempt AI: Motion, Layering, and Landing Page Storytelling

Attempt AI was a landing page project, but I approached it like a storytelling exercise rather than a static marketing screen. I wanted the first impression to feel dramatic and cinematic without losing the clarity that a landing page needs in order to do its job well. The page was built with Next.js App Router, React, TypeScript, Tailwind CSS, shadcn/ui, and custom CSS animations. The hero section includes animated rain, lightning, bubbles, and glowing type, with careful layering to make everything feel rich without getting in the way of interaction. A lot of the effort went into things users may not consciously notice, like pointer-events behavior, z-index control, animation timing, and keeping the interface responsive while the motion effects are running. What I liked most about the project was how it sat at the intersection of design and engineering. A landing page has to communicate value quickly, but it also has to feel memorable. Too plain and it disappears. Too flashy and it becomes distracting. Finding that middle ground was the real challenge. Projects like this remind me that front-end work is not only about functionality and systems. Sometimes the goal is to create an emotional reaction, guide attention, and make a product feel worth exploring. That is still a real engineering problem, just expressed through visual storytelling instead of data-heavy workflows.