The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Day 6/30 of designing one hero section every day.
Today: Fluff & Co., a dog grooming salon
The hero is a hover mask reveal component on Framer: the dog starts scruffy, and wherever your cursor moves, the groomed version shows through. You groom the dog with your mouse.
→ The interaction performs the headline.
→ Playfulness matches the client.
6 down, 24 to go.
#webdesign #uidesign #herosection #30daychallenge #interactiondesign #microinteractions #designchallenge
Tying the reveal to cursor position instead of a fixed hover state is what makes it a groom-your-own-dog interaction, not a before/after slider — the mess-to-clean feels earned rather than just toggled.
Thanks!
Thank you :)
TOP 🙌
Thank you!
This is such an awesome challenge you're doing good luck with it man!! 🚀
Thank you!
Great effect so nice to see and satisfying
Thank you!
grooming the dog with my mouse is so cute. day 6 of 30, keep going
Thank you Benjamin!
Six days in and already doing hover-based reveals is ambitious. What's your plan for this interaction on mobile where hover doesn't really exist, tap to reveal, or something else entirely?
Great question!
The nice thing about this particular mechanic is that it translates almost 1:1: on touch devices the mask follows touchmove instead of mousemove, so your finger becomes the groomer. Dragging across the dog paints the fluff in directly, arguably more satisfying...
Thank you so much!
The handwritten purple accents give this a friendly salon feel, and the booking CTA stays easy to spot beside the playful reveal. Nice to see the interaction support the service without taking over the whole hero.
Thank you Rohan!
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
Ledger — AI CFO Platform
Ledger is an AI platform that acts as an always-on Chief Financial Officer for founders — connecting to accounts, learning cash rhythm, and surfacing risks before they become real problems. I designed the full landing page.
My role: UI/UX Design
Scope: Landing page
Financial tools for founders usually feel either cold (dashboards) or intimidating (accounting software).
For Ledger, we borrowed from old-world institutional finance instead — serif type, oil-painting textures, classical architecture — so an AI CFO feels like real authority, not another app.
This color pallet works so well with data and makes everything look premium. love it!
I am gathering cool references for my own work as a Motion Designer, and this one caught my eye this week.
Day 3 of 60-days-collecting-awesome-motion-design-references
I love the way this is designed, based on abstract shapes and concepts with a coding visual language that we are all already familiar with. This is a great reference in this modern era where we deal more and more with products and services that live on the internet, not on a physical product.
This animation was created by Odd Fellows in collaboration with Figma.
60 days of references is a serious commitment. Curious, are you mostly drawn to the same visual language each time, or does it shift a lot depending on the day?
A SaaS website can explain every feature perfectly and still leave one question unanswered:
Why should I care?
That's why CORESPACE includes Stories.
Instead of only describing what the product does, Stories give those features context — showing how they're used and what they make possible.
Features explain the product.
Stories make it relatable.
The “why should I care?” framing is exactly the right antidote to feature tours. Turning real team stories into the connective tissue between the product and its impact makes the homepage feel human, not just informative.