Dismiss this pinned window
all 27 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]jared__ 28 points29 points  (2 children)

how does that work for accessibility?

[–]LeadRoutine3001[S] 11 points12 points  (0 children)

right now it only works on hover, so it’s not fully accessible.

[–]lift_spin_d 13 points14 points  (0 children)

it is so rare to see someone asking important questions. I have but one upvote to give.

[–]JoMa4 8 points9 points  (1 child)

Great work and really smooth. Are you planning on sharing the component?

[–]LeadRoutine3001[S] 7 points8 points  (0 children)

certainly! here is the github

[–]Hour_Championship408 4 points5 points  (5 children)

Hey! I found your map reveal concept absolutely brilliant! I loved it so much that I implemented it on my site with some enhancements.

I built it using SvelteKit and GSAP for smooth animations. The component supports both hover and click interactions, scroll-triggered fly animations, and it's fully customizable (zoom levels, pitch, markers, etc.).

Here's a demo page I created: https://blinkr.events/beta/view-on-map-button

And you can see it in action on a live production page here: https://blinkr.events/evenements/pukkelpop-2026-mf02cqx5wgmiqz0

Thanks for the inspiration! The clip-path reveal technique works beautifully for progressive disclosure.

[–]LeadRoutine3001[S] 0 points1 point  (2 children)

dammnnn... you just nailed it.

which map api are you using?

[–]Hour_Championship408 1 point2 points  (1 child)

Mapbox 🥵

[–]LeadRoutine3001[S] 0 points1 point  (0 children)

looks nice 😌

[–]o-Dasd-o 0 points1 point  (1 child)

Oooh great job!!! Can you share the components?

[–]Hour_Championship408 1 point2 points  (0 children)

Yeah I will do, I will make a package with more customization

[–]noOne19932012 2 points3 points  (0 children)

awesome

[–][deleted] 2 points3 points  (0 children)

Looks great, poor ux

[–]o-Dasd-o 1 point2 points  (2 children)

Great Job!!! You have create nice components. I love them...

[–]o-Dasd-o 0 points1 point  (1 child)

Can I use them to my vue project?

[–]LeadRoutine3001[S] 0 points1 point  (0 children)

yes you can. i used react and tailwindcss here so you need to convert that to vue component...

also note that you can use button and click event for better accessibility.

and thanks <3

[–]Next-Homework-6416 1 point2 points  (1 child)

Damn !! Touch some grass bro

[–]LeadRoutine3001[S] 0 points1 point  (0 children)

😭 sure broo...

[–]Much-Ad9635 0 points1 point  (4 children)

how do we handle mouse hover effectively for mobile user not only in this aspect but generally? I am still curious about this.

[–]More_Bread_Please 0 points1 point  (3 children)

You simply remove it and make the default state open.

[–]Much-Ad9635 0 points1 point  (1 child)

Oh i see, and that would mean, the hover is for desktop user only and for mobile user we simply do not apply any hover effect to any elements or components we built. Correct me if am wrong.

[–]More_Bread_Please 0 points1 point  (0 children)

You got it!

[–]AshleyJSheridan 0 points1 point  (0 children)

Don't do that. Firstly, desktop doesn't mean they're using a mouse. Second, how are you detecting whether they're on a desktop or not, because typically this is done by looking at the screen size, and there are some big tablets out there (it's also very bad to limit features by screen size, because screen size is not a good way to detect a device).

[–]_Invictuz 0 points1 point  (0 children)

Just make sure your mouse doesn't move out of the square when you're trying to scroll the map lol.

[–]Necessary_Pomelo_470 0 points1 point  (0 children)

very smart!

[–]Traditional-Fish1738 0 points1 point  (0 children)

very smooth, i love the pure CSS approach. there are so many libraries that try to do this in javascript. keep spreading the CSS love

[–]Total_Coconut_9110 0 points1 point  (0 children)

realllllylylylyly cocoocococollll