1Buying and setting up domains
Finding the perfect domain is really difficult. Sometimes it takes days to find the right domain name, but with a little bit of openmindedness and persistence, you can find the right domain name and even get it at a good price. I used tools like Google Gemini to prompt some names for the project and while it is very bland, it offers a silly but unique name. I managed to get the name "Zipply" after about 3 iterations.
To secure the domain and verify it wasn't taken by anyone else, I used namecheap.com to find zipply.dev through their advanced domain search
We implemented a centered "Blog" link with a custom hover animation. Instead of a simple color change, we added a progressive underline that draws itself from left to right.
Typography: text-xl font-bold (Matching Brand)
Animation: 0.3s ease-out
(Static Preview)
1Fluid "Comet" Cursor
The landing page needed to feel alive. We moved beyond simple CSS hover states to implement a physics-based spotlight effect. This isn't just a static circle following your mouse—it's a simulated physical object that responds to velocity.
- Velocity Deformation: The cursor stretches ("stretches") along the axis of movement and flattens ("squashes") perpendicularly, creating a jelly-like feel.
- Rotational inertia: The spotlight rotates to face the direction of travel, calculated using `Math.atan2` on the delta vectors.
// Physics state for deformation
const updatePhysics = () => {
const dx = currentX - prevPos.current.x;
const dy = currentY - prevPos.current.y;
const speed = Math.sqrt(dx * dx + dy * dy);
// Stretch based on speed
const stretch = Math.min(1 + speed * 0.04, 3.0);
scaleX.set(stretch);
}2Navigation Micro-Interactions
Navigation needs to be functional but delightful. We enhanced the top navbar with a new entry point for our engineering blog. The goal was to make it noticeable without distracting from the primary "Sign In" call-to-action.
We implemented a centered "Blog" link with a custom hover animation. Instead of a simple color change, we added a progressive underline that draws itself from left to right.
Typography: text-xl font-bold (Matching Brand)
Animation: 0.3s ease-out
(Static Preview)
"We're just getting started. Zipply is evolving rapidly, and these foundational UI elements set the stage for the premium experience we are building."