8 days ago
182
109
Posted On: October 28th 2026, 07:43 pm
Comment “WOOD” and I’ll send you the whole project: prompt, images, code, the lot. 🪵
Most hero sections just fade in and sit there. This one gets painted in.
A round brush sweeps right to left and reveals a driftwood log in under a second. Then the log keeps drifting slowly across the screen. Hover anywhere and the colour pours in under your cursor.
The trick is a hard-edged circular mask moving along the log’s own angle, so it reads as one continuous brush stroke, not a fade. The colour layer sits under a muted copy of the same image, and your cursor decides where it shows through.
Your DM gets the full build: the copy-paste prompt, the hosted image links, a downloadable image pack and the live demo. Paste the prompt into your AI builder, drop in the images, double-click index.html. Done.
It’s free. Save this for your next hero or client. 🔖
#aiwebsite #webdesign #uidesign #creativecoding
[hero section, website hero, hero section design, web design, ui design, ux design, ai website builder, claude ai, claude opus, ai web design, prompt to website, website prompt, html css javascript, vanilla javascript, css animation, mask animation, brush reveal, hover reveal, hover effect, cursor effect, color reveal, parallax, scroll animation, landing page, landing page design, framer, webflow, figma, creative coding, frontend, front end development, web animation, micro interactions, motion design, free prompt, free website template, design resources, Logoth, Web design India, Startup India, Thinking Gods]
Most hero sections just fade in and sit there. This one gets painted in.
A round brush sweeps right to left and reveals a driftwood log in under a second. Then the log keeps drifting slowly across the screen. Hover anywhere and the colour pours in under your cursor.
The trick is a hard-edged circular mask moving along the log’s own angle, so it reads as one continuous brush stroke, not a fade. The colour layer sits under a muted copy of the same image, and your cursor decides where it shows through.
Your DM gets the full build: the copy-paste prompt, the hosted image links, a downloadable image pack and the live demo. Paste the prompt into your AI builder, drop in the images, double-click index.html. Done.
It’s free. Save this for your next hero or client. 🔖
#aiwebsite #webdesign #uidesign #creativecoding
[hero section, website hero, hero section design, web design, ui design, ux design, ai website builder, claude ai, claude opus, ai web design, prompt to website, website prompt, html css javascript, vanilla javascript, css animation, mask animation, brush reveal, hover reveal, hover effect, cursor effect, color reveal, parallax, scroll animation, landing page, landing page design, framer, webflow, figma, creative coding, frontend, front end development, web animation, micro interactions, motion design, free prompt, free website template, design resources, Logoth, Web design India, Startup India, Thinking Gods]
Comments (109)
Load More
More posts
