Free
Make Your Website Look Like a Studio Made It
Add interactive animated drawings from the free hairline set to a Wix website by pasting a short block of code into an embed element. It makes your homepage look designed by a studio and takes about 17 minutes the first time.
Worth it
- Skill needed
- Bit techy
- Setup time
- 17 min
- Cost
- Free
- Time saved
- None, it improves how your site looks
Steps
- 01Open the free companion guide linked in the YouTube description. It has the HTML version of the code, the names of all 33 pre-made hairline drawings and the colour fix code. The drawings come from hairline by Lucas Marques, free to use under the MIT license.
- 02In Wix, open your homepage or make a new one from any template. Pick a template with a white background, because the first version of the drawing has a white frame around it.
- 03Click add a new element, go to Embedding and social media, choose Embed code, then Embed code again. Make the box bigger so the drawing has room.
- 04Click to add your code, choose HTML, paste in the code from the guide and click Update. The drawing only becomes interactive on the published site, not in the editor.
- 05Click Publish. The free Wix domain is fine; your own custom domain costs a little extra. Scroll down on the live site and hover over the drawing to see it react to your mouse.
- 06To swap the drawing, click the element, choose Edit code, delete everything and paste in a new one. On the hairline site, pick a drawing, click CDN rather than React or vanilla, copy the code, paste it in and click Update, then Publish and reload.
- 07To remove the white square, use the updated code from the guide that has no background. To match your site, change the background colour and the drawing colour in that code, paste it in and publish. Light drawings work best on light backgrounds and look poor on dark ones.
- 08Place the drawing where it fits your page, such as a contact or FAQ section, instead of as a random block in the middle.
- 09Optional and geeky: to build your own drawing, install the hairline skill in the terminal, then ask Claude Code in plain language what the drawing should be and what it should do. The example was a carpenter's workbench where the vice opens and a plank slides in. It took about 15 minutes and needs a $20 a month AI tool such as ChatGPT or Claude.
Tools used
- Wix
- hairline
- Claude Code
- ChatGPT
- Claude