Paste one prompt into Claude, Lovable or Framer's AI (or send it to your web designer). Ask it for the code and exactly where to paste it. Start with one. These small details are what make a site feel built just for you.
1. A cursor in your brand color
Add a custom cursor to my website: a small circle in [my brand color] that grows a little when it's over a link or button. Keep the normal cursor on phones and for anyone who has reduced motion turned on. Give me the code and tell me exactly where to paste it.
2. Headlines that fill with color as you scroll
Make my main headlines fill with color, word by word, as they scroll into view. They start in a light gray and fill to [my brand color]. Keep it smooth and quick, and show the final color right away for anyone with reduced motion on. Give me the code and where to paste it.
3. A moving announcement bar
Add a slim announcement bar to the top of my site with this text scrolling slowly on a loop: [your message, like 'Free guide: AI basics, get it here']. Use [background color] with [text color]. It should pause when someone hovers it, and the whole bar links to [your page]. Give me the code and where to paste it.
4. Hover photos on your services list
On my services list, show a photo that fades in next to the mouse when someone hovers each service. Use these images: [list each service and its image]. On phones, show the photo under each service instead. Give me the code and where to paste it.
5. Buttons that lean toward your mouse
Make my main buttons lean gently toward the mouse when it gets close (a 'magnetic' effect), then settle back when it leaves. Keep the movement small, under 8 pixels, and turn it off on phones and for reduced motion. Give me the code and where to paste it.
- Add one at a time and check your phone after each.
- If your site feels slower, take the last one back out.
- Pick the two you love most. You don't need all five.
Your website should be your hardest working employee. Let it show a little personality.