HX-01 · Maps & dataΧάρτες & δεδομένα

Painted MapΖωγραφισμένος χάρτης

A hand-painted place you drag, zoom and explore. Pins open the story of each stop; a wipe turns day into night.Ένας ζωγραφισμένος τόπος που σύρετε, μεγεθύνετε και εξερευνάτε. Οι καρφίτσες ανοίγουν την ιστορία κάθε στάσης· ένα σκούπισμα κάνει τη μέρα νύχτα.

Drag to explore, open a pin, take the tour, switch to nightΣύρετε, ανοίξτε μια καρφίτσα, κάντε την περιήγηση, γυρίστε σε νύχτα

Arrow keys move the map, plus and minus zoom, 0 goes back to the whole map. Tab to reach the pins.Τα βελάκια μετακινούν τον χάρτη, συν και πλην μεγεθύνουν, το 0 δείχνει όλο τον χάρτη. Με Tab φτάνετε στις καρφίτσες.

Good forΤαιριάζει σε

  • A villa's island, a development's neighbourhood, a clinic's street
  • Showing distances that sell: the beach in 4 minutes, the metro in 2
  • A tour of a process or a place, stop by stop
  • Το νησί μιας βίλας, τη γειτονιά ενός έργου, τον δρόμο ενός ιατρείου
  • Αποστάσεις που πουλάνε: η παραλία σε 4 λεπτά, το μετρό σε 2
  • Μια περιήγηση σε μια διαδικασία ή έναν τόπο, στάση στάση

Under the hoodΑπό κάτω

The map is painted in code on a canvas, in the theme's own colours: washes, ink lines, buildings with cast shadows, then a night version with lit windows. A WebGL shader pans and zooms it, gives the ink a slight hand-drawn tremor and wipes day into night. No map tiles, no images.

Ο χάρτης ζωγραφίζεται με κώδικα σε canvas, με τα χρώματα του θέματος: νερομπογιές, γραμμές μελανιού, κτίρια με σκιές, και μια νυχτερινή εκδοχή με φωτισμένα παράθυρα. Ένας WebGL shader τον μετακινεί και τον μεγεθύνει, δίνει στο μελάνι ένα ελαφρύ τρέμουλο χεριού και σκουπίζει τη μέρα σε νύχτα. Χωρίς πλακίδια χάρτη, χωρίς εικόνες.

Access & speedΠροσβασιμότητα & ταχύτητα

Pins are buttons in the tab order; the map moves with the arrow keys and zooms with + and −. On touch, a sideways swipe pans and the page still scrolls. It renders only while on screen, at a lower resolution if frames get slow, and with reduced motion it jumps instead of flying. About 25 KB of code gzipped (plus GSAP), zero images.

Οι καρφίτσες είναι κουμπιά στη σειρά του Tab· ο χάρτης κινείται με τα βελάκια και μεγεθύνεται με + και −. Στην αφή, σύρσιμο στο πλάι μετακινεί τον χάρτη και η σελίδα συνεχίζει να κυλά. Σχεδιάζεται μόνο όταν φαίνεται, σε χαμηλότερη ανάλυση αν τα καρέ αργούν, και με μειωμένη κίνηση πηδά αντί να πετά. Περίπου 25 KB κώδικα συμπιεσμένο (συν το GSAP), καμία εικόνα.