Ίσως πρόσεξες την μπογιά. Σε κάθε άκρη με χρώμα μελανιού σε αυτό το site φυτρώνουν σταγόνες. Γεμίζουν, βαραίνουν, τεντώνονται σε κλωστή και πέφτουν. Το ίδιο κάνει και κάθε λογότυπο στη λωρίδα με τα brands για τα οποία δουλεύουμε. Οι σταγόνες πέφτουν σε ό,τι βρίσκεται από κάτω (μια φωτογραφία, μια κάρτα, ένα κουμπί) και κάνουν πλατς. Σε επίπεδη επιφάνεια μένουν ακίνητες. Σε γερτή γλιστράνε, ξεχειλίζουν από την άκρη, κυλάνε στο πλάι και συνεχίζουν να στάζουν. Όλα καταλήγουν σε μια λιμνούλα πάνω από το footer, που ανεβαίνει όσο μένεις εδώ.
Το λογότυπό μας είναι μια σταγόνα, άρα έπρεπε να στάζει και το site. Όχι βίντεο σε λούπα: αληθινή μπογιά, που υπολογίζεται σε πραγματικό χρόνο στον browser σου. Φτιάχτηκε με το Claude Code, όπως θα περίμενες από ένα agency που έχει γράψει το AI στην ταμπέλα του. Το να εμφανιστούν σταγόνες στην οθόνη ήταν το εύκολο. Το να γίνουν αρκετά καλές ώστε να τις αφήσουμε να τρέχουν σε ένα site που είναι στον αέρα ήταν η πραγματική δουλειά. Γι’ αυτό ακριβώς είναι αυτή η σημείωση.
Μπογιά που ξέρει πού βρίσκεται
Κάθε σταγόνα είναι ένα μικρό παιχνίδι φυσικής. Η μπογιά μαζεύεται στη φούσκα και η φούσκα βαραίνει. Όσο βαραίνει, τόσο πιο γρήγορα κυλάει η σταγόνα, μέχρι να στενέψει στον λαιμό και να πέσει. Μια σταγόνα που πέφτει διαβάζει το πραγματικό περίγραμμα του σημείου όπου χτυπάει, μαζί με τις στρογγυλεμένες γωνίες και τις γερτές φωτογραφίες, οπότε η μπογιά σε ένα στρογγυλό κουμπί αγκαλιάζει το κουμπί. Νιώθει και τη σελίδα. Τίναξε τη σελίδα καθώς σκρολάρεις και οι κρεμασμένες σταγόνες ξεκολλάνε. Πέρνα τον κέρσορα πάνω από ένα λογότυπο στην αρχική και σηκώνεται, και μαζί του σηκώνεται και η μπογιά.
Πριν μπει οτιδήποτε από αυτά στο site που είναι στον αέρα, έπρεπε να τηρεί τέσσερις κανόνες:
- Ποτέ στη μέση. Δεν μπλοκάρει κλικ, δεν κρύβει κείμενο και δεν καθυστερεί τη σελίδα.
- Ακίνητη όταν της το ζητάς. Αν η συσκευή σου ζητά λιγότερη κίνηση ή αν η JavaScript είναι απενεργοποιημένη, βλέπεις τη σελίδα ακίνητη, με τις σταγόνες ζωγραφισμένες πάνω της.
- Επίπεδο χρώμα. Καθαρές άκρες και η ίδια μικρή γυαλάδα με το λογότυπο. Χωρίς θόλωμα, χωρίς ντεγκραντέ.
- Σε ύπνο όταν δεν κουνιέται τίποτα.
Εκεί που ζόρισε
Πρώτα απ’ όλα, τα στρογγυλά. Τα περισσότερα από αυτά τα λογότυπα κάθονται σε κουμπιά σε σχήμα κάψουλας, και η μπογιά λατρεύει να γλιστράει γύρω από τις στρογγυλές άκρες τους. Ακριβώς εκεί άρχισαν να βγαίνουν στις σταγόνες μυτερά αγκάθια, σαν να τις είχε κόψει κάποιος με ψαλίδι. Ο κώδικας που σχεδίαζε μια κρεμασμένη σταγόνα υπέθετε ότι η επιφάνεια από πάνω της ήταν επίπεδη. Στο κάτω μέρος μιας κάψουλας, είναι. Στην καμπύλη, όμως, σχεδίαζε μια σφήνα προς τα πάνω στην κλίση και μια λωρίδα μπογιάς πάνω στο ίδιο το κουμπί. Η λύση ήταν να αφήσουμε την μπογιά να συναντά την πραγματική καμπύλη και από τις δύο πλευρές, όπως θα ακουμπούσε και τις δύο μια μπάλα που κυλάει ανάμεσα στη σταγόνα και την επιφάνεια.
Μετά ήρθε το κομμάτι που παραλίγο να λιώσει τον browser. Όσο περισσότερο έμενες, τόσο βάραινε η σελίδα. Η μπογιά μαζευόταν σε κάθε φωτογραφία και κάρτα που σκρόλαρες, και όταν περνούσες τον κέρσορα πάνω από ένα λογότυπο, η λωρίδα κολλούσε. Η πρώτη εκδοχή ακολουθούσε μια ιδέα που οι περισσότεροι developers θα ενέκριναν με ένα νεύμα: ζωγράφισε την μπογιά σε πολλά μικρά canvas και ξαναζωγράφισε μόνο τα κομματάκια που αλλάζουν. Αποδείχτηκε ανάποδο. Κάθε canvas κοστίζει κάτι στην κάρτα γραφικών μόνο και μόνο επειδή υπάρχει και ξαναζωγραφίζεται, όσο μικρό κι αν είναι, και μετά από μια μεγάλη επίσκεψη είχαν μαζευτεί γύρω στα 250. Λιγότερα και μεγαλύτερα canvas, και καθόλου ζωγραφική εκεί που δεν βλέπει κανείς, τα έριξαν περίπου στα 80. Σε ένα τεστ που σκρολάρει όλη τη σελίδα και περνά πάνω από δώδεκα λογότυπα, η δουλειά των γραφικών έπεσε κατά 39% και τα μεγάλα κολλήματα από έντεκα έγιναν ένα.
Και η μέτρηση είχε τη δική της παγίδα. Η πρώτη μας μέτρηση έλεγε ότι η σελίδα έχανε 19 καρέ κάθε δευτερόλεπτο. Δεν έχανε. Οι σταγόνες τρέχουν επίτηδες στα 60 καρέ το δευτερόλεπτο, σε οθόνη που ανανεώνεται 120 φορές το δευτερόλεπτο, και ο browser μετρούσε κάθε καρέ που παραλείπαμε ως αποτυχία. Θα μπορούσαμε άνετα να φάμε μια μέρα βελτιστοποιώντας με βάση αυτόν τον αριθμό. Πριν κυνηγήσεις έναν αριθμό, τσέκαρε τι σημαίνει.
Ένα site μπορεί να έχει προσωπικότητα και να είναι και γρήγορο. Το κόλπο είναι να αντιμετωπίζεις το παιχνιδιάρικο κομμάτι με την ίδια πειθαρχία όπως τα βαρετά: το τεστάρεις σε αληθινό browser, σέβεσαι όσους δεν θέλουν κίνηση και το κρατάς μακριά από ό,τι ήρθε να κάνει ο επισκέπτης.
Θέλεις και το δικό σου site να δείχνει λίγο πιο ζωντανό;